/* css/contact.css
 *
 * The feedback sheet. Its own file rather than a block in sheets.css: it wears
 * the note editor's chrome (`.taskedit` backdrop, `.pane.noteedit` panel) and
 * only adds the form inside it, so there is nothing here that another sheet
 * shares and nothing in sheets.css this needs to override.
 */

/* Narrower than the note editor's 720px. A note is prose that wants a long
   measure; this is a form, and a text field stretched to reading width makes
   the two short fields above it look like stray inputs floating in a panel. */
.contactsheet { width: min(480px, 100%); max-height: min(88vh, 760px); }

/* The note editor's body is sized for a document that fills it edge to edge.
   A form is read as a column of separate questions, and at that padding the
   fields ran into the panel's walls — every box the full width of the sheet
   with a hairline of ground either side, which is what made it look cramped
   rather than composed. The margin here is the form's own. */
.contactsheet .ne-body { padding: 20px 24px 24px; }

/* 20px between fields, not 16: at 16 the gap between one field's box and the
   next field's LABEL was the same as the gap between a label and its own box,
   so the pairs stopped reading as pairs. */
.contactsheet .cf { display: flex; flex-direction: column; gap: 20px; }
.contactsheet .cf.hidden { display: none; }
/* The lead is a sentence of prose above a stack of controls; without the extra
   space under it, it reads as the first field's caption. */
.contactsheet .cf-lead {
  margin: 0 0 2px; font-size: 0.9em; color: var(--text-2); line-height: 1.5;
}

/* One field: its label, its control, and the error line that appears under it.
   `position: relative` is for the character counter, which is positioned
   against the field rather than laid out in the flow — in the flow it pushed
   the error line down and the block grew by a row the moment anyone typed. */
.contactsheet .cf-field { display: flex; flex-direction: column; position: relative; }
.contactsheet .cf-lbl {
  font-size: 0.82em; font-weight: 500; color: var(--text-2); margin-bottom: 6px;
  /* The sheet's label rule is uppercase with letter-spacing (`.ne-cap`); these
     are sentence-case field labels and must not inherit that treatment — the
     captcha's label carries digits mid-sentence and reads as a serial number
     in caps. */
  text-transform: none; letter-spacing: normal;
}
/* Scoped through `.taskedit` rather than `.contactsheet` alone, and the same
   trick again in the Things block below. The captcha answer is an
   `input[type="text"]`, and both the base sheet and the Things re-skin style
   that type by name for the TASK editor — rules that reach this sheet too,
   because it shares the `.taskedit` backdrop. Left at one class they won on
   source order and the captcha alone came out as a grey filled box beside two
   hairline-boxed fields. */
.taskedit .contactsheet .cf-field input,
.taskedit .contactsheet .cf-field textarea {
  font: inherit; font-size: 0.95em; width: 100%; color: var(--text);
  padding: 9px 12px; border-radius: 10px; background: var(--chrome);
  border: 0; box-shadow: 0 0 0 .5px var(--sep); outline: none;
  transition: box-shadow .15s ease;
}
/* A box is sized by the answer it expects — that is most of what separates a
   composed form from a stretched one. An email is ~25 characters and the
   captcha's answer is two digits; at the sheet's full width both were wide
   blank slabs, and the whole column read as one undifferentiated stack.
   Only the message, the one long answer here, keeps the full measure. */
.taskedit .contactsheet .cf-field[data-field="email"] input { max-width: 340px; }
.taskedit .contactsheet .cf-field[data-field="captcha"] input {
  max-width: 110px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.taskedit .contactsheet .cf-field textarea {
  resize: vertical; min-height: 128px; line-height: 1.5;
}
.taskedit .contactsheet .cf-field input::placeholder,
.taskedit .contactsheet .cf-field textarea::placeholder { color: var(--text-3); }
.taskedit .contactsheet .cf-field input:focus,
.taskedit .contactsheet .cf-field textarea:focus {
  box-shadow: 0 0 0 .5px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Empty until there is something to say, and collapsed while empty so a valid
   form has no dead gap under each field. */
.contactsheet .cf-err {
  font-size: 0.8em; color: var(--danger); line-height: 1.4; margin-top: 5px;
}
.contactsheet .cf-err:empty { display: none; }

/* The counter sits on the label's line, right-aligned — beside "Сообщение"
   rather than under the box, where it competes with the error line for the
   same strip of space. */
.contactsheet .cf-count {
  position: absolute; top: 0; right: 0;
  font-size: 0.78em; color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* Off-screen rather than `display: none`: a bot that skips hidden inputs is
   exactly the bot this is meant to catch, and some fill anything they can find
   in the DOM regardless of how it is painted. */
.contactsheet .cf-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* The button is not a fourth field, so it does not sit on the field rhythm:
   a wider gap puts the act of sending on the other side of the questions
   being asked. Right-aligned and sized to its label, not stretched — a
   full-width slab is a mobile convention, and on a 480px sheet it reads as
   the form shouting. The rule that used to sit above it went with the
   stretch: with the button at content width the whitespace does the
   separating on its own. */
.contactsheet .cf-actions {
  display: flex; justify-content: flex-end; margin-top: 6px;
}
.contactsheet .cf-send {
  min-height: 40px; padding: 0 28px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 0.95em; font-weight: 550; border: 0;
  background: var(--accent); color: var(--accent-ink); box-shadow: none;
}
.contactsheet .cf-send:hover:not(:disabled) { filter: brightness(1.06); }
.contactsheet .cf-send:disabled { opacity: .5; cursor: default; }
.contactsheet .cf-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The status line carries "Отправляю…" and the send failure. `.msg` reserves
   18px for itself even when empty; here the gap under the button is already
   the form's own, so it collapses instead of adding a second one. */
.contactsheet #cfStatus { margin-top: 0; }
.contactsheet #cfStatus:empty { min-height: 0; }

/* Sent. Replaces the form rather than sitting above it — the message is gone
   and there is nothing left to edit, so leaving the fields on screen would
   invite a second copy of the same message. */
.contactsheet .cf-thanks {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 22px 12px 14px; outline: none;
}
.contactsheet .cf-thanks.hidden { display: none; }
.contactsheet .cf-check {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok); font-size: 1.5em; line-height: 1; margin-bottom: 4px;
}
.contactsheet .cf-thanks h3 {
  margin: 0; font-size: 1.15em; font-weight: 640; letter-spacing: -.01em;
}
.contactsheet .cf-thanks p { margin: 0; font-size: 0.9em; color: var(--text-2); line-height: 1.5; }

/* ---- Things style -------------------------------------------------------
   The re-skin flattens the app's surfaces: fields are hairline-boxed on the
   sheet's own ground rather than tinted plates, and the accent is spent on
   ticks and "today" instead of on buttons. The send button follows that rule
   here for the same reason the sidebar's selected row does — a blue slab is
   the one thing in this design that would look pasted in from elsewhere. */
:root[data-theme="things"] .taskedit .contactsheet .cf-field input,
:root[data-theme="things"] .taskedit .contactsheet .cf-field textarea {
  background: var(--canvas); box-shadow: 0 0 0 1px var(--sep);
  border-radius: 8px;
}
:root[data-theme="things"] .contactsheet .cf-send { border-radius: 8px; font-weight: 500; }

/* ---- the marked state, last ---------------------------------------------
   An invalid field gets the ring in danger red, and keeps it while focused:
   focus must not paint over the reason the field is marked.

   Both its position (after the Things block) and the `:root` on the front are
   about weight, not selection. The style block above is one class heavier than
   a plain `.cf-field.invalid` rule, so written plainly and placed with the
   other field rules the marked state lost to it twice over — the error text
   appeared and the field it pointed at stayed unmarked in the Ева style.
   `:root` levels the specificity; being last settles the tie. */
:root .taskedit .contactsheet .cf-field.invalid input,
:root .taskedit .contactsheet .cf-field.invalid textarea {
  box-shadow: 0 0 0 1.5px var(--danger);
}
:root .taskedit .contactsheet .cf-field.invalid input:focus,
:root .taskedit .contactsheet .cf-field.invalid textarea:focus {
  box-shadow: 0 0 0 1.5px var(--danger), 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}