/* ============================================================
   Rathe TEC — form.css
   Interest form, fields, validation, owner panel
   ============================================================ */

.signup {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 900px) { .signup { grid-template-columns: 1fr; } }

.form {
  background: var(--surface, #fbf6ee);
  border: 1px solid var(--line, #e3d8c6);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(40, 30, 20, .08));
  padding: clamp(1.15rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { padding: 0; font-weight: 600; color: var(--ink-900, #241d16); }

.field label,
.field legend {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-700, #4a4036);
}

.req { color: #a8452c; font-weight: 700; }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: .96rem;
  color: var(--ink-900, #241d16);
  background: #fff;
  border: 1px solid var(--line, #e3d8c6);
  border-radius: var(--radius-sm, 9px);
  padding: .72rem .85rem;
  transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7a6a56 50%), linear-gradient(135deg, #7a6a56 50%, transparent 50%); background-position: right 1rem center, right .75rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green-500, #4f7a52);
  box-shadow: 0 0 0 3px rgba(79, 122, 82, .18);
}
input::placeholder, textarea::placeholder { color: #a1948a; }
input:disabled, textarea:disabled { background: #f2ece2; color: #8b8177; }

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #b5533a; box-shadow: 0 0 0 3px rgba(181, 83, 58, .14); }

.field__hint { margin: 0; font-size: .8rem; color: var(--ink-400, #7b6f63); line-height: 1.45; }
.field__err { margin: 0; font-size: .8rem; font-weight: 600; color: #9d3f27; min-height: 0; }
.field__err:empty { display: none; }

/* ---------- checkbox group ---------- */
.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .55rem;
}
@media (max-width: 640px) { .checks { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-700, #4a4036);
  cursor: pointer;
  padding: .6rem .75rem;
  border: 1px solid var(--line, #e3d8c6);
  border-radius: var(--radius-sm, 9px);
  background: #fff;
  transition: border-color .2s var(--ease, ease), background-color .2s var(--ease, ease);
}
.check:hover { border-color: var(--green-400, #6f9a72); }
.check:has(input:checked) { border-color: var(--green-500, #4f7a52); background: rgba(79, 122, 82, .08); }
.check input { margin-top: .15rem; accent-color: var(--green-600, #3d6640); width: 17px; height: 17px; flex: none; }
.check--inline { border: 0; padding: 0; background: none; }
.check--inline:hover { border-color: transparent; }

.field--consent { font-size: .88rem; }

/* ---------- actions + status ---------- */
.form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__status { margin: 0; font-size: .9rem; font-weight: 600; color: var(--green-700, #2f5233); }
.form__status.is-error { color: #9d3f27; }

.btn--lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: .5rem .85rem; font-size: .8rem; }

/* ---------- fallback when no endpoint ---------- */
.form__fallback {
  border: 1px dashed #c9a985;
  background: rgba(246, 236, 224, .7);
  border-radius: var(--radius-sm, 9px);
  padding: 1rem 1.1rem;
}
.form__fallback-title { margin: 0 0 .35rem; font-weight: 700; color: #7a4526; font-size: .95rem; }
.form__fallback p { margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-600, #5c5147); }
.form__fallback-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.form__note { font-size: .82rem; margin: .7rem 0 0 !important; }

.btn--outline {
  background: transparent;
  color: var(--pine, #24402c);
  border: 1px solid var(--green-400, #6f9a72);
  border-radius: var(--radius-sm, 9px);
  padding: .6rem 1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease, ease), color .2s var(--ease, ease);
}
.btn--outline:hover { background: var(--green-600, #3d6640); color: var(--cream-100, #f7f1e6); }
.btn--quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-400, #7b6f63);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.btn--quiet:hover { color: #9d3f27; }

/* ---------- owner panel ---------- */
.panel {
  position: sticky;
  top: 92px;
  background: var(--surface, #fbf6ee);
  border: 1px solid var(--line, #e3d8c6);
  border-left: 4px solid var(--green-500, #4f7a52);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(40, 30, 20, .08));
  padding: 1.15rem 1.25rem;
}
@media (max-width: 900px) { .panel { position: static; } }
.panel h3 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--pine, #24402c); }
.panel__sub { margin: 0 0 .8rem; font-size: .82rem; line-height: 1.5; color: var(--ink-400, #7b6f63); }
.panel__count { margin: 0 0 .9rem; font-size: .92rem; color: var(--ink-600, #5c5147); }
.panel__count strong { font-size: 1.5rem; color: var(--green-700, #2f5233); }
.panel__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.panel__list { display: flex; flex-direction: column; gap: .6rem; max-height: 320px; overflow-y: auto; }
.panel__empty { font-size: .85rem; color: var(--ink-400, #7b6f63); font-style: italic; }
.lead {
  border: 1px solid var(--line, #e3d8c6);
  border-radius: var(--radius-sm, 9px);
  padding: .6rem .7rem;
  background: #fff;
  font-size: .82rem;
}
.lead__name { font-weight: 700; color: var(--ink-900, #241d16); }
.lead__mail { color: var(--green-700, #2f5233); word-break: break-all; }
.lead__meta { color: var(--ink-400, #7b6f63); margin-top: .2rem; }
.panel__foot { margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-400, #7b6f63); border-top: 1px dashed var(--line, #e3d8c6); padding-top: .8rem; }