.
======================================================================== */
.inline-create-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.25rem 0.65rem;
font-size: var(--font-size-sm, 0.85rem);
line-height: 1.2;
/* Filled with the --primary / --primary-text PAIR so the label is
contrast-guaranteed on every site theme and on any surface (incl. the
darker inventory-receipt block). The old ghost style (color:--primary on
transparent) relied on --primary contrasting with whatever was behind it,
which fails on dark themes where --primary ≈ the background. */
color: var(--primary-text);
background: var(--primary);
border: 1px solid var(--primary);
border-radius: var(--radius-sm, 4px);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.inline-create-toggle:hover,
.inline-create-toggle:focus-visible {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-text);
outline: none;
}
.inline-create-toggle[aria-expanded="true"] {
background: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-text);
border-style: solid;
}
.inline-create-toggle__icon {
display: inline-block;
font-weight: 700;
font-size: 1.05em;
line-height: 1;
transform: translateY(-0.05em);
}
.inline-create-toggle[aria-expanded="true"] .inline-create-toggle__icon {
transform: rotate(45deg); /* + becomes × when expanded */
transition: transform 0.15s ease;
}
/* Target slot that receives the injected child form. Empty = invisible. */
.inline-create-target:empty {
display: none;
}
.inline-create-target {
margin-top: var(--spacing-xs, 0.5rem);
}
/* The injected child form uses .inline-create-form + standard fieldset styling.
Visually nest it slightly under the parent field so the relationship is clear. */
.inline-create-form {
margin-top: var(--spacing-xs, 0.5rem);
margin-left: var(--spacing-md, 1rem);
border-left: 3px solid var(--primary);
background: var(--bg-layer-lighten);
}
.inline-create-form__actions {
display: flex;
gap: var(--spacing-sm, 0.5rem);
margin-top: var(--spacing-sm, 0.75rem);
}
/* Fieldset */
fieldset {
border: 2px solid var(--border);
border-radius: var(--radius-md);
margin: var(--spacing-md) 0;
padding: var(--spacing-md);
background: var(--bg-layer-lighten);
/* Browsers ship fieldset with min-width:min-content — it REFUSES to
shrink below its widest child, so one wide control (an iOS date input,
a long select) pushed the whole fieldset past the viewport on phones
(the tabbed-dispatch block documents the same trap). Element-level
reset: fieldsets always fit their container; children wrap/shrink. */
min-width: 0;
}
fieldset legend {
padding: var(--spacing-xs) var(--spacing-md);
font-weight: 600;
color: var(--text-on-dark-accent);
background: var(--surface-base);
border: 2px solid var(--border);
border-radius: var(--radius-sm);
}
/* ========================================================================
BUTTONS
======================================================================== */
.button,
a.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
appearance: none;
background: var(--neutral);
color: var(--neutral-text);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-normal);
font-size: var(--font-size-md);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background: var(--neutral-hover);
transform: translateY(-1px);
}
/* Disabled state — applies to .button (incl. .primary/.danger) + raw buttons.
Faded + not-allowed so a blocked action (e.g. Complete Run held by a stock
shortfall) reads as inactive instead of clickable. */
.button:disabled,
.button[disabled],
button:disabled,
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.button.primary,
button.primary {
background: var(--primary);
color: var(--text-on-dark);
}
.button.primary:hover {
background: var(--primary-bright);
}
.button.secondary {
background: var(--secondary);
color: var(--text-on-dark);
}
.button.secondary:hover {
background: var(--secondary-bright);
}
.button.danger {
background: var(--error);
color: var(--text-on-dark);
}
.button.danger:hover {
background: var(--error-bright);
}
/* Caution actions (reset / start-over): the warning semantic pair. */
.button.warning {
background: var(--warning);
color: var(--warning-text);
}
.button.warning:hover {
background: var(--warning-bright);
}
.button.compact {
padding: 0.4rem 0.8rem;
font-size: var(--font-size-sm);
}
/* ────────────────────────────────────────────────────────────────────
Refresh button: re-fires the current selection on an auto_select
dropdown. Browsers do not fire `change` when the same option is
reselected, so this affordance gives the user an explicit way to
re-trigger the cascade. Auto-emitted by makeSmartNestedForm() for
auto_select + dispatch dropdowns; see framework-nested-forms.md
§2.4 and §2.7. Sits inline next to its