/* ── Shared form input ──────────────────────────────────────── */

.form-input {
    padding: 0.35rem 0.6rem;
    background: var(--cpd-surface-2);
    border: 1px solid var(--cpd-border-strong);
    border-radius: var(--cpd-radius-sm);
    color: var(--cpd-text);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--cpd-gold);
    background: var(--cpd-surface-3);
    box-shadow: 0 0 0 2px var(--cpd-gold-ring);
}

.form-input.monospace {
    font-family: var(--cpd-font-mono);
    letter-spacing: -0.02em;
}

.dark-dropdown option {
    background-color: var(--cpd-surface-raised);
    color: var(--cpd-text);
}

/* ── Child flow: flex-wrap layout for FullGUI children ─────── */

.child-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.child-flow > .json-token,
.child-flow > .chain-step,
.child-flow > .chain-connector,
.child-flow > .chain-add {
    flex: 1 1 100%;
}

/* ── Detail row (used by NotionalInput, PercentInput, DateInput) */

.property-detail-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.35rem;
}

.detail-spin {
    width: 6rem;
}

.detail-select {
    min-width: 5rem;
}

.detail-suffix {
    color: rgba(var(--cpd-contrast-rgb), calc(0.5 * var(--cpd-text-alpha-scale)));
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ── Inline field/row layout (small wrappers around a label+input) ── */

.input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 1 auto;
    min-width: fit-content;
}

.input-field > label {
    color: var(--cpd-text);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.step-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-end;
    min-width: 0;
}

.step-fields > .json-token {
    flex: 0 0 auto;
}

/* .btn-toggle-details is now a MudButton (CustomPeriodsInput/AccrualRuleInput/CurvePillarsInput
   footer + row actions) — Mud owns the button chrome; the class name is kept only as a stable
   hook, not a style target. */

.text-input-with-fallback {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.text-input-with-fallback > .repr-overlay-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* .btn-fallback-llm is now a MudButton (TextReprInput's LLM-fallback affordance) — Mud owns the
   button chrome, including its own disabled styling; the class name is kept only as a stable
   hook, not a style target. */

/* ── Chain layout (DateRuleInput) ─────────────────────────── */

.chain-step {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    flex: 1 1 100%;
}

.chain-step > :first-child {
    flex: 1;
}

.chain-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0;
}

/* .chain-plus is now a MudIcon, .chain-remove a MudIconButton, .chain-add a MudButton — Mud owns
   their chrome; the class names are kept only as stable hooks (chain-add is also a test selector,
   see DateRuleInputTests), not style targets. */