/* Custom styles beyond Tailwind. Colours are the brand tokens in brand.css. */

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.75rem;
    text-align: center;
}

.stat-label {
    font: 500 11px/1.2 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.stat-value {
    font: 800 1.6rem/1.1 var(--f-display);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

.badge-mod {
    display: inline-block;
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--surface-2);
    color: var(--muted);
    margin-right: 0.2rem;
    font-family: var(--f-mono);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.badge-purple { background: var(--entry-deep); color: var(--entry); }
.badge-blue { background: var(--entry-deep); color: var(--entry); }
.badge-yellow { background: var(--amber-deep); color: var(--amber); }
.badge-cyan { background: var(--surface-2); color: var(--fg); }
.badge-orange { background: var(--amber-deep); color: var(--amber); }
.badge-red { background: var(--stop-deep); color: var(--stop); }
.badge-green { background: var(--exit-deep); color: var(--exit); }

/* Filter sidebar */
.filter-group {
    margin-bottom: 0.75rem;
}

.filter-group label {
    display: block;
    font: 500 11px/1.2 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.filter-group select,
.filter-group input[type="number"],
.filter-group input[type="text"] {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.375rem 0.5rem;
    color: var(--fg);
    font-size: 0.875rem;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--entry);
}

/* Symbol multi-select chips */
.symbol-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.symbol-chips label {
    display: inline-block;
    margin: 0;
    cursor: pointer;
}

.symbol-chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.symbol-chips span {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-family: var(--f-mono);
}

.symbol-chips input:checked + span {
    background: var(--entry);
    border-color: var(--entry);
    color: #fff;
}

.symbol-chips input:focus-visible + span {
    outline: 2px solid var(--entry);
}

/* Time range slider */
#time-range-slider {
    accent-color: var(--entry);
    --handle-pct: 0%;
}
#time-range-slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: var(--entry);
    border-radius: 50%;
    border: 2px solid var(--surface);
    cursor: pointer;
}
#time-range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--entry);
    border-radius: 50%;
    border: 2px solid var(--surface);
    cursor: pointer;
}
/* Track: rule colour (older) | entry blue (selected window) */
#time-range-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--line) var(--handle-pct),
        var(--entry) var(--handle-pct));
}
#time-range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--line) var(--handle-pct),
        var(--entry) var(--handle-pct));
}
/* Remove Firefox's default left-to-thumb progress fill */
#time-range-slider::-moz-range-progress {
    background: transparent;
}

/* Table */
table th {
    cursor: pointer;
    user-select: none;
}

table th:hover {
    color: var(--entry);
}

/* ============================================================
   EXPLORER LOADING STATE
   #results-wrap gets .is-loading from explorer.js while a filter
   change is in flight (after a short delay, so fast responses
   never flash).
   ============================================================ */

.results-wrap {
    position: relative;
    --ld-accent: var(--entry);
    --ld-accent-2: var(--exit);
    --ld-up: var(--exit);
    --ld-down: var(--stop);
    --ld-pill-bg: color-mix(in srgb, var(--surface) 92%, transparent);
    --ld-pill-border: color-mix(in srgb, var(--entry) 35%, transparent);
    --ld-pill-text: var(--fg);
    --ld-sk: var(--surface);
    --ld-sk-shine: var(--surface-2);
}

/* Indeterminate progress line along the top of the table */
.results-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
    pointer-events: none;
}
.results-progress::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--ld-accent), var(--ld-accent-2), transparent);
    animation: ld-sweep 1.1s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.results-wrap.is-loading .results-progress { opacity: 1; }

@keyframes ld-sweep {
    from { left: -40%; }
    to   { left: 100%; }
}

/* Current rows dim and soften, so the old results stay as context */
.results-wrap table {
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.results-wrap.is-loading table {
    opacity: 0.35;
    filter: saturate(0.4) blur(1px);
    pointer-events: none;
}

/* Floating "Scanning patterns" pill with animated candles */
.results-loader {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5rem;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.results-wrap.is-loading .results-loader { opacity: 1; }

.results-loader-pill {
    position: sticky;
    top: 35vh;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.1rem 0.6rem 0.9rem;
    border-radius: 999px;
    background: var(--ld-pill-bg);
    border: 1px solid var(--ld-pill-border);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--glow);
    backdrop-filter: blur(6px);
    color: var(--ld-pill-text);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transform: translateY(6px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.results-wrap.is-loading .results-loader-pill { transform: none; }

.loader-text::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: ld-dots 1.2s steps(4, end) infinite;
}
@keyframes ld-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
}

.loader-candles {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}
.loader-candles i {
    position: relative;
    display: block;
    width: 4px;
    height: 12px;
    border-radius: 1px;
    background: var(--ld-up);
    animation: ld-candle 1.2s ease-in-out infinite;
}
/* Wicks */
.loader-candles i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px; bottom: -4px;
    width: 1px;
    transform: translateX(-50%);
    background: currentColor;
    opacity: 0.6;
    z-index: -1;
}
.loader-candles i:nth-child(1) { color: var(--ld-up);   background: var(--ld-up);   animation-delay: 0s; }
.loader-candles i:nth-child(2) { color: var(--ld-down); background: var(--ld-down); animation-delay: 0.12s; }
.loader-candles i:nth-child(3) { color: var(--ld-up);   background: var(--ld-up);   animation-delay: 0.24s; }
.loader-candles i:nth-child(4) { color: var(--ld-up);   background: var(--ld-up);   animation-delay: 0.36s; }
.loader-candles i:nth-child(5) { color: var(--ld-down); background: var(--ld-down); animation-delay: 0.48s; }

@keyframes ld-candle {
    0%, 100% { transform: translateY(3px) scaleY(0.45); }
    50%      { transform: translateY(-3px) scaleY(1.15); }
}

/* Skeleton rows for the first load, when there's nothing to dim */
.skeleton-row td { border: 0; }
.skeleton-row .sk {
    display: inline-block;
    height: 0.7rem;
    max-width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ld-sk) 0%, var(--ld-sk-shine) 50%, var(--ld-sk) 100%);
    background-size: 200% 100%;
    animation: ld-shimmer 1.4s ease-in-out infinite;
}
@keyframes ld-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* New results fade up in a short stagger */
#results-body.rows-enter tr {
    animation: ld-row-in 0.32s ease-out both;
    animation-delay: calc(var(--row-i, 0) * 18ms);
}
@keyframes ld-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .results-progress::before,
    .loader-candles i,
    .loader-text::after,
    .skeleton-row .sk,
    #results-body.rows-enter tr {
        animation: none !important;
    }
    .results-progress::before { left: 0; width: 100%; opacity: 0.6; }
    .results-wrap.is-loading table { filter: none; }
}