/* Field (Sendplane design system): a labelled control with an optional hint.
 * Labels are 12px at 650; controls are surface-primary with a border-default
 * edge; focus takes an accent border and the focus-field ring. Hints explain a
 * consequence or format. The imported .form-* classes share the recipe. */

.field, .form-group { min-width: 0; display: grid; gap: 7px; margin-bottom: 17px; color: var(--ink); font-size: 12px; font-weight: 650; }
.field:last-child, .form-group:last-child { margin-bottom: 0; }
.form-label { display: block; color: var(--ink); font-size: 12px; font-weight: 650; }
legend.form-label { margin-bottom: 7px; }

.field input, .field select, .field textarea,
.form-input, .form-select, .form-textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  color: var(--fg-primary);
  background: var(--surface-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.5;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field textarea, .form-textarea { min-height: 88px; resize: vertical; }
.form-input.mono { font-family: var(--font-mono); font-size: 12px; }
.field input::placeholder, .field textarea::placeholder,
.form-input::placeholder, .form-textarea::placeholder { color: var(--field-placeholder); }
.field input:focus, .field select:focus, .field textarea:focus,
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: var(--focus-field); outline: 0; }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled,
.field input:disabled, .field select:disabled, .field textarea:disabled { cursor: not-allowed; opacity: .6; }
.form-input[readonly], .form-textarea[readonly] { color: var(--fg-secondary); background: var(--surface-inset); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ink); }

.field small { color: var(--quiet); font-size: 11px; font-weight: 450; }
.form-hint { margin: 0; color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.5; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Validation: one message for the form, above its actions. */
.form-input.is-error, .form-textarea.is-error { border-color: var(--danger); }
.form-input.is-success, .form-textarea.is-success { border-color: var(--success); }
.form-error, .error-message { margin: 0; color: var(--danger); font-size: 12px; font-weight: 500; line-height: 1.5; }
.form-message { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }
.form-message-error { color: var(--danger); }

/* ThemePicker: Light, Dark or System. */
.theme-picker { min-width: 0; margin: 0; padding: 20px; border: 0; }
.theme-picker > legend { margin-bottom: 12px; color: var(--fg-primary); font-size: 12px; font-weight: 680; }
.theme-picker-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.theme-picker-options label { position: relative; min-width: 0; cursor: pointer; }
.theme-picker-options input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-picker-options label > span {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-callout);
  color: var(--fg-primary);
  background: var(--surface-primary);
}
.theme-picker-options label strong { font-size: 12px; }
.theme-picker-options label small { color: var(--fg-secondary); font-size: 10px; line-height: 1.35; }
.theme-picker-options input:checked + span { border-color: var(--accent); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-picker-options input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.theme-picker-compact { padding: 0; }
.theme-picker-compact > legend { margin: 0 0 7px 2px; color: var(--fg-tertiary); font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.theme-picker-compact .theme-picker-options { gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-inset); }
.theme-picker-compact .theme-picker-options label > span {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 0;
  border-radius: var(--radius-code);
  background: transparent;
  text-align: center;
}
.theme-picker-compact .theme-picker-options input:checked + span { color: var(--fg-primary); background: var(--surface-elevated); box-shadow: var(--shadow-segment); }

/* ChoiceList: checkable rows. */
.choice-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.choice-list legend { margin-bottom: 8px; }
.choice-list label { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--canvas); font-size: 12px; font-weight: 600; cursor: pointer; }

/* Imported form layouts. */
.form-section { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.form-section-label { margin-bottom: var(--space-3); color: var(--quiet); font-size: 10px; font-weight: 680; letter-spacing: .045em; text-transform: uppercase; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-skills-selected { min-height: 0; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-3); }
.form-skills-picker { max-height: 240px; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); }
.form-skill-category { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); }
.form-skill-category-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer; transition: background-color 120ms ease; }
.form-skill-category-header svg, .form-skill-category-icon svg { width: 14px; height: 14px; }
.form-skill-category-desc { padding: 0 var(--space-3) var(--space-2); color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-skill-category-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--space-3) var(--space-2); }
.form-skill-category-icon { display: flex; align-items: center; color: var(--quiet); }

.preset-grid { max-height: 360px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); overflow-y: auto; padding: var(--space-1); }
.preset-card { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-callout); background: var(--surface); cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.preset-card.selected { border-color: var(--accent); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.preset-card-icon { margin-bottom: var(--space-2); color: var(--quiet); }
.preset-card-name { margin-bottom: var(--space-1); color: var(--ink); font-size: 13px; font-weight: 650; }
.preset-card-desc { display: -webkit-box; margin-bottom: var(--space-2); overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.preset-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }

@media (hover: hover) and (pointer: fine) {
  .form-skill-category-header:hover { background: var(--soft); }
  .preset-card:hover { border-color: var(--border-strong); }
}

@media (max-width: 760px) {
  .field-grid, .form-row-2 { grid-template-columns: 1fr; }
  /* 16px keeps mobile browsers from zooming into a focused field. */
  .field input, .field select, .field textarea, .form-input, .form-select, .form-textarea { font-size: 16px; }
}