/* ══════════════════════════════════════════════════════════════
   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: var(--cpd-space-xs) var(--cpd-space-sm);   /* matches .form-input */
    color: var(--token-color);
    font-family: var(--cpd-font-mono);
    font-size: var(--cpd-text-2);
    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);
}

/* ══════════════════════════════════════════════════════════════
   Assisted text box (TextReprInput given a TextAssist, docs/ux-shape.md §23)
   The overlay colours the typed text and stays visible while typing: it sits over the input with
   no background or border of its own, so the input's caret, selection and focus ring show through
   it, and the input's own text is never drawn.
   ══════════════════════════════════════════════════════════════ */

:root {
    --repr-template-color: var(--cpd-text-subtle);
    --repr-error-at-color: var(--cpd-error);
}

.repr-overlay-wrapper.repr-assist > .repr-overlay,
.repr-overlay-wrapper.repr-assist:focus-within > .repr-overlay {
    opacity: 1;
    background: transparent;
    border-color: transparent;
}

.repr-overlay-wrapper.repr-assist > .form-input {
    color: transparent !important;
    caret-color: var(--cpd-text);
}

/* Where the text stops reading: uncoloured, with a wavy underline. */
.repr-error-at {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--repr-error-at-color);
    text-decoration-skip-ink: none;
}

/* What is still to come after the typed text. */
.repr-template {
    color: var(--repr-template-color);
}

/* The suggestion list, under the input. */
.repr-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    z-index: 10;
    margin: 0;
    padding: var(--cpd-space-xs) 0;
    list-style: none;
    background: var(--cpd-surface-raised);
    border: 1px solid var(--cpd-border-strong);
    border-radius: var(--cpd-radius-sm);
    box-shadow: var(--cpd-shadow-soft);
    font-family: var(--cpd-font-mono);
    font-size: var(--cpd-text-2);
}

.repr-suggestions[hidden] {
    display: none;
}

.repr-suggestions > [role="option"] {
    padding: var(--cpd-space-xs) var(--cpd-space-sm);
    color: var(--cpd-text);
    white-space: pre;
    cursor: pointer;
}

.repr-suggestions > [role="option"]:hover,
.repr-suggestions > [role="option"][aria-selected="true"] {
    background: var(--cpd-surface-hover);
}

/* The hint and the read-back are one line each, so the lines under the box never grow. */
.repr-example.repr-hint,
.repr-example.repr-readback {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}