/* web/components/forms/forms.css — [FORMS1 shared-forms-v1]
   Brand kit page 16 ("Forms"): label 6px above, hint/error 6px below,
   40px input on surface fill with border-2. Scoped under .frm-* but the
   classes are namespaced by prefix (no #view), because this component is
   SHARED across pages — like .pg-* (page_shell.css), not a view sheet. */

.frm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }

.frm-label { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--tb-text); }
.frm-label .frm-opt { color: var(--tb-text-muted); font-weight: 400; }

/* control takes the kit's input look: 40px, radius 9, surface, border-2 */
.frm-ctl {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 12px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tb-text);
  background: var(--tb-surface);
  border: 1px solid var(--tb-border-strong);
  border-radius: 9px;
  outline: none;
  transition: border-color 120ms ease-out;
}
.frm-ctl::placeholder { color: var(--tb-placeholder); }
.frm-ctl:hover { border-color: var(--tb-border-hover); }
.frm-ctl:focus { border-color: var(--tb-accent); box-shadow: 0 0 0 2px var(--tb-accent-soft); }

/* textarea: min 3 rows, grows to 8 */
textarea.frm-ctl { min-height: 42px; padding: 10px 12px; resize: vertical; }
textarea.frm-ctl:focus { box-shadow: 0 0 0 2px var(--tb-accent-soft); }

/* select: box + chevron */
select.frm-ctl { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868C99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }

/* search: icon inside, left */
input.frm-ctl[type='search'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868C99' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; background-size: 16px;
  padding-left: 34px;
}

.frm-hint { font-size: 12px; line-height: 1.4; color: var(--tb-text-muted); }

.frm-error { font-size: 12px; line-height: 1.4; color: var(--tb-danger); font-weight: 500; }
.frm-error span::before { content: '\26A0\00A0'; }   /* warning glyph + nbsp */

.frm-ctl.has-error { border-color: var(--tb-danger); }
.frm-ctl.has-error:focus { border-color: var(--tb-danger); box-shadow: 0 0 0 2px var(--tb-danger-soft); }

/* content cap for form-column surfaces (kit: forms max 640px) */
.frm-form { max-width: 640px; }

@media (prefers-reduced-motion: reduce) {
  .frm-ctl { transition: none; }
}