/* ═══════════════════════════════════════════════════════════════════════
   The tradesman application form.

   Loaded on top of legal.css, which already carries the palette, the
   typefaces and the one-column measure. Only the form widgets are here.

   Written for somebody filling this in on a phone, in a van, between jobs:
   inputs are 44px tall so they can be hit with a thumb, labels sit above
   rather than beside so nothing wraps into a column two words wide, and the
   file inputs are left as the browser's own — a prettier custom control is
   the thing most likely to break on the one Android browser we did not test.
   ═══════════════════════════════════════════════════════════════════════ */

form { margin: 0 0 8px }

fieldset {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 18px 22px;
  margin: 0 0 18px;
  background: var(--glass);
}

legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--bone);
  padding: 0 9px;
  margin-left: -4px;
}

label {
  display: block;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--fog);
}

label:last-child { margin-bottom: 0 }

.req { color: var(--volt) }

input[type="text"], input:not([type]), input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="password"],
textarea, select {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--deep);
  color: var(--bone);
  font-family: var(--text);
  font-size: 15.5px;
  line-height: 1.45;
}

textarea { min-height: 84px; resize: vertical }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 2px;
}

input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 0;
  color: var(--fog);
  font-family: var(--text);
  font-size: 13.5px;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: var(--glass);
  color: var(--bone);
  font-family: var(--text);
  font-size: 13.5px;
  cursor: pointer;
}

/* ── rows ─────────────────────────────────────────────────────────── */

.row { display: flex; flex-wrap: wrap; gap: 0 14px }
.row > label { flex: 1 1 190px; min-width: 0 }
.row > label.f-2 { flex: 2 1 320px }

.hint {
  display: block;
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fog-2);
  max-width: 68ch;
}

.hint.block { margin-top: 10px }

/* ── certificates ─────────────────────────────────────────────────── */

.cert {
  border: 1px dashed var(--rule-2);
  border-radius: 12px;
  padding: 14px 14px 6px;
  margin: 0 0 12px;
}

.cert-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cert-head .n {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--volt);
}

.drop {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fog-2);
  font-family: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.drop:hover { color: var(--amber) }

/* ── consents ─────────────────────────────────────────────────────── */

label.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--fog);
  line-height: 1.6;
  margin-bottom: 16px;
}

label.check input {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--volt);
}

/* ── buttons ──────────────────────────────────────────────────────── */

button {
  font-family: var(--display);
  font-weight: 700;
  cursor: pointer;
}

button.ghost {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: transparent;
  color: var(--volt);
  font-size: 14px;
}

button.ghost:hover { border-color: var(--volt) }

.submit { margin-top: 22px }

#send {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--volt);
  color: #041109;
  font-size: 16.5px;
  letter-spacing: .01em;
}

#send[disabled] { opacity: .55; cursor: progress }

#status { margin-top: 12px; font-size: 13.5px }
#status.err { color: var(--amber) }
#status.ok { color: var(--volt) }

/* The answer after a successful send replaces the form entirely: leaving a
   filled-in form on screen invites a second submission of the same thing. */
.done {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--volt);
  border-radius: 14px;
  padding: 22px 20px;
  background: var(--glass);
}

.done h3 { margin-top: 0 }

@media (max-width: 600px) {
  fieldset { padding: 16px 14px 18px }
  .row { gap: 0 10px }
  .row > label, .row > label.f-2 { flex: 1 1 100% }
}

/* ── potvrdenie adresy a nové heslo ───────────────────────────────────
 *
 * Dve stránky, ktoré človek otvorí z e-mailu a chce z nich odísť do pol
 * minúty. Žiadne karty, žiadne sekcie — pole, pole, tlačidlo. */

.field { display: block; margin: 0 0 16px }
.field > span { display: block; font-size: 13.5px; color: var(--fog) }

.rules {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12.5px;
  color: var(--fog);
}
.rules li::before { content: "· "; color: var(--volt) }

.account-state {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--fog);
  min-height: 1.4em;
}