/**
 * FXA.A.3.css — Stylesheet for the FXA per-family control panels.
 *
 * Consumes the design-tokens layer; no hardcoded colors (Theme Parity
 * Charter). Single self-contained block so the panel renders visibly
 * regardless of theme.
 *
 * Selectors are the data-flagged classes emitted by
 * `effect-rack-renderer.js` + `effect-<family>-controls.js`:
 *
 *   .fxa-fx-mount             — sentinel div in shell HTML
 *   .fxa-fx-panel             — panel wrapper
 *   .fxa-fx-panel__title      — title bar (label + sub-note)
 *   .fxa-fx-panel__fields     — field stack
 *   .fxa-fx-panel__schema-fields  — schema-driven sub-stack
 *   .fxa-fx-field             — one control row
 *   .fxa-fx-field--mix        — slot-mix row (visually accented)
 *   .fxa-fx-panel__note       — footer note
 */

.fxa-fx-mount {
  display: block;
  margin-top: var(--neon-spacing-md);
}

.fxa-fx-panel {
  display: block;
  padding: var(--neon-spacing-md) var(--neon-spacing-md) var(--neon-spacing-sm);
  border: 1px solid var(--role-surface-border, var(--role-surface-card, transparent));
  border-radius: var(--neon-radius-md);
  background: var(--role-surface-card);
  color: var(--role-text-primary);
  box-sizing: border-box;
}

.fxa-fx-panel__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--neon-spacing-sm);
  padding: 0 0 var(--neon-spacing-sm);
  margin: 0 0 var(--neon-spacing-sm);
  border-bottom: 1px solid var(--role-surface-border, transparent);
}

.fxa-fx-panel__title > span {
  font-family: var(--tracker-font, inherit);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--role-text-primary);
  text-transform: uppercase;
}

.fxa-fx-panel__title > strong {
  font-family: var(--tracker-font, inherit);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--role-text-secondary, var(--muted, currentColor));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.fxa-fx-panel__fields,
.fxa-fx-panel__schema-fields {
  display: flex;
  flex-direction: column;
  gap: var(--neon-spacing-xs);
  width: 100%;
  min-width: 0;
}

/* Each .fxa-fx-field inherits the existing .field grid (label / control / readout).
   We only ensure full-width rendering here — the layout itself is owned by .field. */
.fxa-fx-panel .fxa-fx-field {
  width: 100%;
  min-width: 0;
  margin: 0;          /* override .field's default margin so our gap rules drive spacing */
}

/* Slot mix row sits visually first and slightly accented so the user
   can see "this is the wet send" at a glance. */
.fxa-fx-field--mix {
  padding: var(--neon-spacing-xs) 0;
  border-bottom: 1px dashed var(--role-surface-border, transparent);
  margin-bottom: var(--neon-spacing-xs) !important;
}

.fxa-fx-field--mix > span {
  font-weight: 900;
  color: var(--role-text-primary);
  letter-spacing: 0.04em;
}

.fxa-fx-panel__note {
  margin: var(--neon-spacing-sm) 0 0;
  padding-top: var(--neon-spacing-xs);
  font-family: var(--tracker-font, inherit);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--role-text-secondary, var(--muted, currentColor));
  border-top: 1px dotted var(--role-surface-border, transparent);
}