/* The JSON-editor form card: every rule that styles a `.json-token` tree living inside a
   `.trade-form-card`.

   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` + `json-token` 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 scoped-css deep combinator is gone with the move: it compiled to a descendant combinator,
   which is what a plain global selector already means, and left in a global sheet it would be a
   parse error that silently drops the rule. Linked from App.razor above the MudBlazor watershed,
   the side of it these rules were written for. */

.trade-form-card {
    background: rgba(var(--cpd-contrast-rgb), 0.025);
    border: 1px solid rgba(var(--cpd-contrast-rgb), 0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 6px;
    padding: 6px 0;
    min-width: 0;
}

.trade-form-card .json-token {
    min-width: 0;
}

.trade-form-card .json-component-row {
    min-width: 0;
}

.trade-form-card > .json-component-row > .json-token,
.trade-form-card .json-component-row > .json-token.mode-full,
.trade-form-card .json-component-row > .json-token.mode-detailed,
.trade-form-card .json-component-row > .json-token.mode-compact {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 12px;
    border-radius: 0;
}

.trade-form-card .json-component-row > .json-token.mode-full:hover,
.trade-form-card .json-component-row > .json-token.mode-detailed:hover,
.trade-form-card .json-component-row > .json-token.mode-compact:hover {
    border: none;
    box-shadow: none;
}

.trade-form-card .json-component-row > .json-token > .token-label-row {
    border-bottom: 1px solid rgba(var(--cpd-contrast-rgb), 0.06);
    padding: 8px 8px 6px;
    margin: 0 -4px 6px;
}

.trade-form-card .json-component-row > .json-token > .token-label-row > .token-label {
    font-family: var(--cpd-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(var(--cpd-contrast-rgb), calc(0.45 * var(--cpd-text-alpha-scale)));
    opacity: 1;
}

.trade-form-card .json-token .form-input,
.trade-form-card .json-token .detail-spin,
.trade-form-card .json-token .detail-select,
.trade-form-card .json-token select {
    font-family: var(--cpd-font-mono);
    font-size: 16px;
    color-scheme: var(--cpd-color-scheme);
}

.trade-form-card .json-token .token-label-row .token-repr-summary {
    display: none;
}

.trade-form-card .json-token.mode-detailed .json-token.mode-compact > .token-label-row > .token-label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.trade-form-card .json-token .form-input:focus,
.trade-form-card .json-token .detail-spin:focus,
.trade-form-card .json-token .detail-select:focus,
.trade-form-card .json-token select:focus {
    outline: none;
    border-color: var(--token-color, var(--cpd-gold));
    box-shadow: 0 0 0 2px rgba(246, 212, 107, 0.10);
}

.trade-form-card .json-token.mode-detailed > .child-flow {
    padding: 10px 8px 12px;
    gap: 0.6rem;
    flex-wrap: wrap;
    overflow: visible;
}

.trade-form-card .json-token.mode-detailed > .child-flow > .json-token {
    flex: 0 1 auto;
    min-width: 0;
}

.trade-form-card .json-component-row > .json-token.mode-compact {
    padding: 14px 16px;
}

.trade-form-card .json-component-row > .json-token.mode-compact .repr-overlay-wrapper > .repr-overlay {
    padding: 0.65rem 0.9rem;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 1.4;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}


.trade-form-card .json-token.mode-full > .child-flow {
    flex-direction: column;
    gap: 0;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px;
    min-height: 52px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--cpd-contrast-rgb), 0.06);
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    background: transparent;
    position: relative;
    transition: background 0.1s;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token:last-child {
    border-bottom: none;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token:focus-within {
    background: rgba(var(--cpd-contrast-rgb), 0.02);
}


.trade-form-card .json-token.mode-full > .child-flow > .json-token::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--token-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token:focus-within::after {
    transform: scaleX(1);
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token:hover {
    box-shadow: none;
}


.trade-form-card .json-token.mode-full > .child-flow > .json-token > .token-label-row {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token > .token-label-row > .token-label {
    font-family: var(--cpd-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: var(--token-color, rgba(var(--cpd-contrast-rgb), calc(0.4 * var(--cpd-text-alpha-scale))));
    opacity: 0.7;
    flex-shrink: 0;
    /* A label COLUMN: every child row in a mode-full token uses this one rule, so they stay
       aligned with each other at any width - which is the reason it is a clamp on one shared
       selector rather than a per-row width. The clamp FLOOR is 90px rather than 75: 7vw is
       89.6px on a 1280px panel, and the longest labels here ("Adjustment Rule", "Basis
       Currency") need every pixel of that.

       These labels WRAP rather than truncate, deliberately. An earlier revision clipped them
       with an ellipsis to keep every row one line tall; in the browser that turned "FORWARD
       RATE INDEX" into "FORWARD RA...", which hides which field the row is. A label that
       becomes two short lines is still readable and still says what it names, so the extra row
       height is the cheaper cost. */
    width: clamp(90px, 7vw, 100px);
    transition: opacity 0.15s;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token:focus-within > .token-label-row > .token-label {
    opacity: 1;
}


.trade-form-card .json-token.mode-full > .child-flow > .json-token .property-detail-row {
    padding-top: 0;
    gap: 6px;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token .property-detail-row > * {
    max-width: 100%;
    min-width: 0;
}


.trade-form-card .json-token.mode-full > .child-flow > .json-token .form-input,
.trade-form-card .json-token.mode-full > .child-flow > .json-token .detail-spin,
.trade-form-card .json-token.mode-full > .child-flow > .json-token .detail-select {
    background: var(--token-bg, rgba(var(--cpd-contrast-rgb), 0.05));
    border: 1px solid var(--token-border, rgba(var(--cpd-contrast-rgb), 0.12));
    border-radius: 6px;
    font-family: var(--cpd-font-mono);
    font-size: 16px;
    color: var(--cpd-contrast);
    padding: 7px 12px;
    transition: border-color 0.15s, background 0.15s;
}

.trade-form-card .json-token.mode-full > .child-flow > .json-token .form-input:focus,
.trade-form-card .json-token.mode-full > .child-flow > .json-token .detail-spin:focus,
.trade-form-card .json-token.mode-full > .child-flow > .json-token .detail-select:focus {
    border-color: var(--token-color, rgba(var(--cpd-contrast-rgb), 0.22));
    box-shadow: 0 0 0 2px var(--token-bg, rgba(var(--cpd-contrast-rgb), 0.04));
    background: rgba(var(--cpd-contrast-rgb), 0.06);
}


.trade-form-card .json-token.mode-full [data-role="rate"] {
    min-height: 68px;
}

.trade-form-card .json-token.mode-full [data-role="rate"] .detail-spin {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.03em;
    width: clamp(68px, 6.25vw, 90px);
    max-width: 100%;
    text-align: right;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--token-color);
}

.trade-form-card .json-token.mode-full [data-role="rate"] .detail-suffix {
    font-family: var(--cpd-font-mono);
    font-size: 16px;
    font-weight: 300;
    color: var(--token-color);
    opacity: 0.6;
}


.trade-form-card .json-token.mode-full [data-role="notional"] {
    min-height: 76px;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 10px;
}

.trade-form-card .notional-detail {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.trade-form-card .notional-detail > .notional-readout,
.trade-form-card .notional-detail > .notional-edit-input {
    align-self: flex-end;
}

.trade-form-card .notional-slider-wrap {
    width: 85%;
    align-self: flex-end;
}

.trade-form-card .notional-readout {
    font-family: var(--cpd-font-mono);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--token-color);
    line-height: 1;
    user-select: none;
    cursor: text;
}

.trade-form-card .notional-readout:hover {
    opacity: 0.8;
}

.trade-form-card .notional-edit-input {
    font-family: var(--cpd-font-mono);
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--token-color);
    background: rgba(var(--cpd-contrast-rgb), 0.05);
    border: 1px solid var(--token-border);
    border-radius: 6px;
    padding: 4px 8px;
    width: clamp(135px, 12.5vw, 180px);
    text-align: right;
    outline: none;
}

.trade-form-card .notional-edit-input:focus {
    border-color: var(--token-color);
    box-shadow: 0 0 0 2px var(--token-bg);
}

.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(201, 148, 26, 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(201, 148, 26, 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(201, 148, 26, 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;
}

.trade-form-card .json-token.mode-full .detail-suffix {
    color: var(--token-color, rgba(var(--cpd-contrast-rgb), calc(0.5 * var(--cpd-text-alpha-scale))));
    opacity: 0.6;
    font-size: 0.8rem;
}


.trade-form-card .json-token.mode-full [data-role="type"] .token-control {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.trade-form-card .json-token.mode-full [data-role="type"] .token-control select {
    background: var(--token-bg, rgba(var(--cpd-contrast-rgb), 0.05));
    border: 1px solid var(--token-border, rgba(var(--cpd-contrast-rgb), 0.12));
    border-radius: 6px;
    padding: 7px 24px 7px 12px;
    color: var(--cpd-contrast);
    font-family: var(--cpd-font-mono);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%236b7487' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}


.trade-form-card .json-token.mode-full [data-role="position"] .property-detail-row {
    justify-content: flex-end;
}

.trade-form-card .json-token.mode-full [data-role="position"] .detail-select {
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 6px 28px 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
}

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


.trade-form-card .json-token.mode-full [data-role="instrument"] {
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
}

.trade-form-card .json-token.mode-full [data-role="instrument"] .child-flow {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
}

.trade-form-card .json-token.mode-full [data-role="instrument"] .input-field > label {
    font-size: 9px;
    opacity: 0.5;
    color: var(--cpd-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.trade-form-card .json-separator {
    display: none;
}