/* ref #4591: shared study-query chip vocabulary — SINGLE SOURCE OF TRUTH (Lane 0).
   Consumed by the finished/applied read views (Lane 1), the visual editor (Lane 2), and
   the text-field precedence rails (Lane 3). This file is GLOBAL (linked from App.razor,
   not a scoped .razor.css) on purpose: chip/rail spans are injected via MarkupString and
   Blazor CSS isolation never adds the scope attribute to injected markup, so scoped rules
   would not match. Do NOT redefine chip colors in any lane's .razor.css — extend here.

   Colors derive from Radzen semantic theme vars (--rz-info/warning/success/primary/danger)
   so they track the active light/dark theme automatically; hex values are fallbacks only. */

:root {
    --sq-field:    var(--rz-info, #0b5cab);
    --sq-operator: var(--rz-warning, #b35c00);
    --sq-value:    var(--rz-success, #0f7a45);
    --sq-item:     var(--rz-primary, #7a3e9d);
    --sq-not:      var(--rz-danger, #c0392b);
    --sq-and:      var(--rz-info, #0b5cab);
    --sq-or:       var(--rz-warning, #b35c00);

    /* text nudged toward the theme text color for contrast on the light tints */
    --sq-field-fg:    color-mix(in srgb, var(--sq-field)    84%, var(--rz-text-color, #1b1b1b));
    --sq-operator-fg: color-mix(in srgb, var(--sq-operator) 78%, var(--rz-text-color, #1b1b1b));
    --sq-value-fg:    color-mix(in srgb, var(--sq-value)    82%, var(--rz-text-color, #1b1b1b));
    --sq-item-fg:     color-mix(in srgb, var(--sq-item)     84%, var(--rz-text-color, #1b1b1b));
    --sq-not-fg:      var(--sq-not);

    --sq-chip-radius: .4rem;
    --sq-chip-tint: 14%;
}

/* ---- base chip ---------------------------------------------------------- */
.sq-chip {
    align-items: center;
    border-radius: var(--sq-chip-radius);
    display: inline-flex;
    font-weight: 600;
    gap: .25rem;
    line-height: 1.25;
    padding: .12rem .45rem;
    white-space: nowrap;
}

.sq-chip--field {
    background: color-mix(in srgb, var(--sq-field) var(--sq-chip-tint), transparent);
    color: var(--sq-field-fg);
}
.sq-chip--operator {
    background: color-mix(in srgb, var(--sq-operator) var(--sq-chip-tint), transparent);
    color: var(--sq-operator-fg);
    font-weight: 700;
}
.sq-chip--value {
    background: color-mix(in srgb, var(--sq-value) var(--sq-chip-tint), transparent);
    color: var(--sq-value-fg);
}
.sq-chip--item {
    background: color-mix(in srgb, var(--sq-item) var(--sq-chip-tint), transparent);
    color: var(--sq-item-fg);
    font-style: italic;
}
.sq-chip--not {
    background: color-mix(in srgb, var(--sq-not) var(--sq-chip-tint), transparent);
    color: var(--sq-not-fg);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- grouping rails: nested containers that make precedence visible ------ */
/* A boolean sub-expression renders inside a rail; the left border color + label
   encode AND vs OR, so `X AND Y OR Z` reads as an AND rail nested in an OR rail. */
.sq-rail {
    border-left: 2px solid var(--rz-base-300);
    border-radius: .25rem;
    padding-left: .55rem;
}
.sq-rail--and { border-left-color: var(--sq-and); }
.sq-rail--or  { border-left-color: var(--sq-or); }

.sq-rail__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sq-rail--and > .sq-rail__label { color: var(--sq-and); }
.sq-rail--or  > .sq-rail__label { color: var(--sq-or); }

/* Inline AND/OR connector token placed between chips/operands. */
.sq-conn {
    font-weight: 700;
    padding: 0 .2rem;
}
.sq-conn--and { color: var(--sq-and); }
.sq-conn--or  { color: var(--sq-or); }

/* ---- text-mirror grouping bands (Lane 3) -------------------------------- */
/* The query text-field highlight mirror must stay character-aligned with the
   textarea behind it, so precedence grouping in the TEXT FIELD must be shown
   with LAYOUT-NEUTRAL decoration only: background tint + inset underline.
   NEVER use border/padding here (that shifts glyph metrics and misaligns the
   mirror). Chip read-views use .sq-rail instead; the text mirror uses .sq-band. */
.sq-band { border-radius: .15rem; }
.sq-band--and {
    background: color-mix(in srgb, var(--sq-and) 9%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--sq-and) 55%, transparent);
}
.sq-band--or {
    background: color-mix(in srgb, var(--sq-or) 9%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--sq-or) 55%, transparent);
}

/* ---- text-mirror token colors (D2) -------------------------------------- */
/* These style the MarkupString-injected highlight spans in the text editor's
   aria-hidden mirror. They MUST be global: the spans carry no Blazor scope
   attribute, so scoped rules (even with a leading ::deep) never match them. */
.sq-hl--field { color: #0b5cab; }
.sq-hl--keyword { color: #7a3e9d; font-weight: 600; }
.sq-hl--operator { color: #b35c00; }
.sq-hl--literal { color: #0f7a45; }
.sq-hl--item { color: #0b5cab; font-style: italic; }
.sq-hl--punct { color: var(--rz-text-secondary-color); }
.sq-hl--error { color: var(--rz-danger); text-decoration: underline wavy; }
.sq-hl--default,
.sq-hl--ws { color: var(--rz-text-color); }

/* The editing textarea must be see-through so the colored highlight mirror shows through it.
   Global element+class selector (0,1,1) beats Bootstrap's `.form-control` (0,1,0), which was
   overriding the scoped `color: transparent` and leaving the text opaque (hiding all highlighting). */
textarea.study-query-text__input {
    background: transparent !important;
    background-color: transparent !important;
    color: transparent !important;
    caret-color: var(--rz-text-color) !important;
    -webkit-text-fill-color: transparent !important;
}
textarea.study-query-text__input::selection {
    background: color-mix(in srgb, var(--rz-primary) 28%, transparent);
    -webkit-text-fill-color: transparent !important;
}

/* ---- accessibility fallbacks (mirror the existing component conventions) - */
@media (prefers-contrast: more) {
    .sq-chip {
        background: transparent;
        border: 1px solid currentColor;
    }
    .sq-rail { border-left-width: 3px; }
    .sq-band--and,
    .sq-band--or {
        background: transparent;
        box-shadow: inset 0 -2px 0 currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sq-chip,
    .sq-rail,
    .sq-band { transition: none; }
}