/* ---------------------------------------------------------------------------
   The public onboarding form. Tokens, the reset and the body font come from
   design.css; the topbar comes from shell.css. Both load first.

   This is the only page in the product a stranger sees, and the only one opened
   as often on a phone in a studio as on a desktop - so every control here is
   thumb-sized, and the submit button lives in a dock that never scrolls away.
   --------------------------------------------------------------------------- */

body { font-size: var(--ui-t-md); }

main { max-width: 760px; margin: 0 auto; padding: var(--ui-s5) var(--ui-s5) 0; }
main > section { max-width: none; }

.intro { margin-bottom: var(--ui-s5); }
.intro h2 { margin: var(--ui-s1) 0 var(--ui-s2); font-size: var(--ui-t-2xl); }
.lead { color: var(--ui-text-secondary); line-height: var(--ui-lh-body); margin: 0; }

.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-sm);
  padding: var(--ui-s4);
  margin-bottom: var(--ui-s4);
}
.card h3 { margin: 0 0 var(--ui-s1); font-size: var(--ui-t-lg); }

.muted { color: var(--ui-text-muted); font-size: var(--ui-t-sm); }

/* The "your assistant is already live" banner. Warning-toned and edge-marked
   rather than an alert box: it must be impossible to miss and must not read as
   an error, because nothing has gone wrong - the edit is simply a request. */
.notice {
  border-inline-start: 3px solid var(--ui-warn);
  background: var(--ui-warn-soft);
}
.notice b { color: var(--ui-warn-text); }

/* The same banner in its other job: "this device has been here before, want to
   pick up what you already sent?". Informational, not a warning - nothing is
   wrong, and a warning tone would make returning feel like a mistake. */
.notice.info { border-inline-start-color: var(--ui-info); background: var(--ui-info-soft); }
.notice.info b { color: var(--ui-info-text); }
.notice .acts { display: flex; flex-wrap: wrap; gap: var(--ui-s3); align-items: center; margin-top: var(--ui-s3); }
.notice .acts button { min-height: 40px; padding: var(--ui-s2) var(--ui-s4); font-size: var(--ui-t-sm); }
.notice .acts button.ghost {
  background: none;
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-text-secondary);
  border-radius: var(--ui-radius);
  font-family: inherit;
  cursor: pointer;
}
.notice .acts button.ghost:hover { color: var(--ui-text); }
.hint { color: var(--ui-text-secondary); font-size: var(--ui-t-sm); line-height: var(--ui-lh-tight); margin: var(--ui-s1) 0 var(--ui-s2); }
.req { color: var(--ui-bad-text); }

label { display: block; color: var(--ui-text-muted); font-size: var(--ui-t-xs); margin: var(--ui-s4) 0 var(--ui-s1); }

input[type=text], textarea, select {
  width: 100%;
  background: var(--ui-surface-sunken);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: var(--ui-s3);
  font-size: var(--ui-t-md);
  font-family: inherit;
  min-height: 44px;
}
textarea { min-height: 96px; line-height: var(--ui-lh-body); resize: vertical; }
textarea.big { min-height: 220px; }
input[type=file] { width: 100%; font-family: inherit; font-size: var(--ui-t-sm); color: var(--ui-text-secondary); }

/* Two across on a desktop, one on a phone. The contact fields are short and a
   full-width row for a phone number reads as an error. */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--ui-s4); }

/* The input-mode tabs (.modes/.mode) used to live here. They are gone with the
   "איך נוח לכם למסור את המידע?" card: a tab reads as a CHOICE between the four
   ways of telling us about the business, and there is no choice to make - a
   business with a catalogue AND ten minutes to type should give us both. All
   four are laid out in the flow now, so there is nothing left to switch. */

/* ── the honeypot ─────────────────────────────────────────────────────────
   Off-screen rather than display:none, and aria-hidden with tabindex="-1" in
   the markup: a person never reaches it by eye, pointer, keyboard or screen
   reader, while a bot filling every input in the DOM still fills it. */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── the completeness checklist ───────────────────────────────────────────── */
.checklist { list-style: none; margin: var(--ui-s3) 0 0; padding: 0; }
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--ui-s2);
  padding: var(--ui-s2) 0;
  border-block-end: 1px solid var(--ui-border);
  font-size: var(--ui-t-sm);
  color: var(--ui-text-secondary);
}
.checklist li:last-child { border-block-end: none; }
.checklist li.done { color: var(--ui-text); }
.checklist .tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  border: 1px solid var(--ui-border-strong);
  display: grid;
  place-items: center;
  font-size: var(--ui-t-xs);
  line-height: 1;
}
.checklist li.done .tick {
  background: var(--ui-ok-soft);
  border-color: var(--ui-ok);
  color: var(--ui-ok-text);
}

/* ── attached files ───────────────────────────────────────────────────────── */
#filelist { margin-top: var(--ui-s3); }
.file {
  display: flex;
  align-items: center;
  gap: var(--ui-s3);
  padding: var(--ui-s2) var(--ui-s3);
  margin-bottom: var(--ui-s2);
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  font-size: var(--ui-t-sm);
}
.file .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .size { color: var(--ui-text-muted); font-size: var(--ui-t-xs); white-space: nowrap; }
.file.bad { border-color: var(--ui-bad); }
.file .why { color: var(--ui-bad-text); font-size: var(--ui-t-xs); }
.file button {
  background: none;
  border: none;
  color: var(--ui-text-muted);
  font-size: var(--ui-t-lg);
  line-height: 1;
  cursor: pointer;
  padding: var(--ui-s1) var(--ui-s2);
  min-height: 32px;
}
.file button:hover { color: var(--ui-bad-text); }

/* ── the submit dock ──────────────────────────────────────────────────────
   Sticky rather than in-flow: on a phone the form is long enough that an
   in-flow submit button is several screens below the fold, and a business
   owner who has finished typing should never have to hunt for it. */
.spacer-dock { height: 88px; }
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  background: var(--ui-surface);
  border-block-start: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-md);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 30;
}
.dock-in {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--ui-s3) var(--ui-s5);
  display: flex;
  align-items: center;
  gap: var(--ui-s3);
}
.dock .spacer { flex: 1; }

.progress {
  flex: 0 0 90px;
  height: 6px;
  border-radius: 99px;
  background: var(--ui-surface-sunken);
  overflow: hidden;
}
.progress span { display: block; height: 100%; width: 0; background: var(--ui-accent); transition: width 0.25s; }

button.primary {
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  border: none;
  border-radius: var(--ui-radius);
  padding: var(--ui-s3) var(--ui-s5);
  font-size: var(--ui-t-md);
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
button.primary:hover { background: var(--ui-accent-hover); }
button.primary[disabled] { opacity: 0.55; cursor: default; }

#toast {
  position: fixed;
  bottom: 84px;
  inset-inline-end: var(--ui-s4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-md);
  padding: var(--ui-s3) var(--ui-s4);
  border-radius: var(--ui-radius-lg);
  display: none;
  z-index: 40;
  max-width: 80vw;
  font-size: var(--ui-t-sm);
}

/* ── the done state ───────────────────────────────────────────────────────── */
.done-card { text-align: center; padding: var(--ui-s6) var(--ui-s5); }
.done-card h2 { margin: 0 0 var(--ui-s3); font-size: var(--ui-t-xl); }
.done-card p { color: var(--ui-text-secondary); line-height: var(--ui-lh-body); margin: 0 auto var(--ui-s4); max-width: 42ch; }

@media (max-width: 640px) {
  main { padding: var(--ui-s4) var(--ui-s4) 0; }
  .card { padding: var(--ui-s4); }
  .intro h2 { font-size: var(--ui-t-xl); }
  .dock-in { padding: var(--ui-s3) var(--ui-s4); }
  .progress { flex-basis: 60px; }
}