/* ══════════════════════════════════════════════════════════════
   Repr semantic colour classes
   Maps ReprKind cases to json-component-colors.css variables.
   Used in .repr-overlay.
   ══════════════════════════════════════════════════════════════ */

/* ── Instrument family — teal ───────────────────────────────── */

.repr-instrument, .repr-tenor, .repr-rate-index,
.repr-index-name, .repr-currency, .repr-exchange,
.repr-fx-tenor, .repr-offset { color: var(--token-instrument); }

/* ── Individual role colours ────────────────────────────────── */

.repr-position     { color: var(--token-position); }
.repr-notional     { color: var(--token-notional); }
.repr-quote        { color: var(--token-rate); }
.repr-date         { color: var(--token-date); }
.repr-end-of-month { color: var(--token-end-of-month); }

/* ── Curve Capture compact line (Models/CurveCapture.fs) ────── */

.repr-curve-kind         { color: var(--token-generator); }
.repr-rate-construction  { color: var(--token-rate); }
.repr-curve-config       { color: var(--cpd-gold); }

/* ── Structural / separator ─────────────────────────────────── */

.repr-keyword, .repr-operator,
.repr-punctuation { color: var(--token-separator); }

/* ── Untagged narrative text ────────────────────────────────── */

.repr-plain { color: rgba(var(--cpd-contrast-rgb), calc(0.55 * var(--cpd-text-alpha-scale))); }

/* ── Trade wrapper — transparent, children carry their colour ── */

.repr-trade { }

/* ══════════════════════════════════════════════════════════════
   PropertyInput repr overlay
   Coloured HTML display layer over the text input.
   Visible at rest; fades out on focus via :focus-within.
   ══════════════════════════════════════════════════════════════ */

/* Wrapper replaces .form-input as the flex child in .property-input */
.repr-overlay-wrapper {
    position: relative;
    flex: 0 1 auto;
    min-width: 5rem;
    display: inline-flex;
    align-items: stretch;
}

.repr-overlay-wrapper > .form-input {
    flex: 1;
    width: 100%;
}

/* Coloured display layer — absolutely positioned over the input */
.repr-overlay-wrapper > .repr-overlay {
    position: absolute;
    inset: 0;
    padding: 0.35rem 0.6rem;       /* matches .form-input */
    color: var(--token-color);
    font-family: var(--cpd-font-mono);
    font-size: 0.85rem;
    letter-spacing: -0.02em;
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    background: var(--cpd-surface-2);
    border: 1px solid var(--cpd-border-strong);
    border-radius: var(--cpd-radius-sm);
    line-height: 1.4;
    z-index: 1;
    transition: opacity var(--cpd-transition-fast);
}

/* Hide overlay when the input has focus */
.repr-overlay-wrapper:focus-within > .repr-overlay {
    opacity: 0;
}

/* Hide real input text when the overlay is visible */
.repr-overlay-wrapper:has(> .repr-overlay):not(:focus-within) > .form-input {
    color: transparent !important;
    caret-color: var(--cpd-text);
}

/* In compact mode the input is a bare underlined field — strip the
   overlay's box so it blends in seamlessly. */
.json-token.mode-compact .repr-overlay-wrapper > .repr-overlay {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.1rem 0.2rem;          /* matches compact .form-input */
    font-size: 0.85rem;
}

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