/* ==========================================================================
   Forms — inputs, selects, textareas, field layout. Control height lives in
   base.css; this file owns the field chrome and grouping. Values → tokens.css.
   ========================================================================== */

/* Text inputs / selects / textareas. Matches the retro .tbox control look. */
.form-control {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background-color: var(--surface-control);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font: var(--text-xs) var(--font-ui);
}

/* A labelled block of related fields. */
.form-section {
  border: 1px solid var(--border-muted);
  background-color: var(--surface-1);
  border-radius: var(--radius-sm);
}

/* One row / field within a form. */
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Helper text beneath a field. */
.form-text {
  display: block;
  font: var(--text-2xs) var(--font-ui);
  margin-top: var(--space-1);
}

/* Input + button clusters (Bootstrap-style input groups). */
.input-group,
.input-append {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.input-group-btn {
  display: inline-flex;
  align-items: center;
}

/* ---- ---- ---- ---- Legacy text box ---- ---- ---- ---- */

.tbox {
  background-color: var(--surface-control);
  border: 1px solid #5e5d63;
  color: var(--text-strong);
  font: var(--text-xs) var(--font-ui);
}

.tbox.chatbox {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* ---- ---- ---- ---- Marksmith editor toolbar ---- ---- ---- ---- */

/* Space out the clustered format buttons and give each a real hit target
   with a hover cue. Buttons are <md-bold>, <md-header>, … custom elements. */
.marksmith-action-bar {
  gap: var(--space-1);
}

.marksmith-action-bar > * {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.marksmith-action-bar > *:hover {
  background-color: var(--surface-3);
}

.marksmith-action-bar svg {
  width: 16px;
  height: 16px;
}