/* The JSON-editor form card: the frame trade capture and the curve-spec editor put around a
   JsonComponent tree, and the controls only those pages render.

   This block used to live in Trades/Capture.razor.css, which is SCOPED css — it only ever
   applied to elements carrying Capture.razor's own `b-<hash>` attribute. Trade capture was the
   only page with a JsonComponent tree, so nobody noticed; CurveSpecDetail then reused the same
   `trade-form-card` markup contract and rendered with none of it, showing naked browser selects
   and stacked label/value rows (screenshots on !546). A markup contract that two pages share
   cannot have its styling owned by one of them — same reason trade-mode-switcher.css is already
   global.

   The tree inside the card is laid out by json-component.css's JsonSection / JsonField rules alone
   (docs/ux-shape.md entry 15); nothing here restyles a section or a field beyond taking the root's
   box away, because the card is already the box. Linked from App.razor above the MudBlazor
   watershed, the side of it these rules were written for. */

.trade-form-card {
    min-width: 0;
    margin-top: var(--cpd-space-sm);
    overflow: hidden;
    background: var(--cpd-surface-1);
    border: 1px solid var(--cpd-border-subtle);
    border-radius: var(--cpd-radius-lg);
}

/* The root is the one boxed surface of an editor (json-component.css's depth table); inside the
   card the card is that surface, so the root keeps its padding and loses its own box. */
.trade-form-card .json-section.depth-0 {
    background: transparent;
    border: none;
    border-radius: 0;
}

/* The root as one line of text (the capture command line) gets the root section's padding. */
.trade-form-card .json-field.is-text[data-depth="0"] {
    padding: var(--cpd-space-md) var(--cpd-space-lg);
}

.trade-form-card select option {
    background-color: var(--cpd-surface-raised);
    color: var(--cpd-text);
}

/* The "on" / "@" words between a trade's top-level fields read as a sentence in the text form;
   among labelled fields they are noise. */
.trade-form-card .json-separator {
    display: none;
}

/* ── NotionalInput: the notional box and the log slider beneath it ──
   The box itself is an ordinary `.form-input` (json-component.css `input.notional-box`); here the
   control stacks it above the slider, both the field's full width. */

.trade-form-card .notional-detail {
    flex-direction: column;
    align-items: stretch;
    gap: var(--cpd-space-xs);
    flex: 1;
    min-width: 0;
}

.trade-form-card .notional-slider-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trade-form-card .notional-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(var(--cpd-contrast-rgb), 0.10);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 0;
}

.trade-form-card .notional-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--token-notional);
    border: 2px solid var(--token-notional);
    box-shadow: 0 0 6px rgba(var(--token-notional-rgb), 0.35);
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.1s;
}

.trade-form-card .notional-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 12px rgba(var(--token-notional-rgb), 0.5);
    transform: scale(1.15);
}

.trade-form-card .notional-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.trade-form-card .notional-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--token-notional);
    border: 2px solid var(--token-notional);
    box-shadow: 0 0 6px rgba(var(--token-notional-rgb), 0.35);
    cursor: grab;
}

.trade-form-card .notional-slider::-moz-range-track {
    height: 6px;
    background: rgba(var(--cpd-contrast-rgb), 0.10);
    border-radius: 3px;
    border: none;
}

.trade-form-card .notional-slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

/* Notional slider tick labels (1K … 10B). 0.3 measured 2.7:1 in dark mode —
   a pre-existing shortfall, not something the light-mode work introduced, but
   the same 10px-caption problem and the same one-line fix. 0.35 clears 3:1 in
   dark and, scaled, ~3.6:1 in light. */
.trade-form-card .notional-slider-labels span {
    font-family: var(--cpd-font-mono);
    font-size: 10px;
    color: rgba(var(--cpd-contrast-rgb), calc(0.35 * var(--cpd-text-alpha-scale)));
    user-select: none;
}