@charset "UTF-8";
/* assets/custom-search.css — inline widget, lives inside the JNews search popup */

/* ---- palette (light = default) ----------------------------------------- */
.cs-widget {
    --cs-bg: #ffffff;
    --cs-surface: #f4f4f5;
    --cs-fg: #0a0a0a;
    --cs-fg-muted: #6b7280;
    --cs-line: #e4e4e7;
    --cs-accent: #2563eb;        /* single modern accent — change in one place */
    --cs-up: #15803d;
    --cs-down: #dc2626;
    --cs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    width: 100%;
}

/* ---- dark = ONLY when body.jnews-dark-mode is present ------------------- */
.jnews-dark-mode .cs-widget {
    --cs-bg: #0f1115;
    --cs-surface: #1a1d23;
    --cs-fg: #f4f4f5;
    --cs-fg-muted: #9aa0aa;
    --cs-line: #2a2e36;
    --cs-accent: #3b82f6;
    --cs-up: #22c55e;
    --cs-down: #ef4444;
}

.cs-widget *,
.cs-widget *::before { box-sizing: border-box; border-radius: 0 !important; }

/* ---- host JNews popup tweaks (popup is an ancestor of .cs-widget) ------- */
.jeg_popup {
    border-radius: 10px !important;
    max-width: 800px !important;
}

/* ---- big, high-contrast search field (typeable immediately) ------------ */
.cs-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cs-bg);
}
.cs-icon::before { content: "⌕"; font-size: 24px; color: var(--cs-fg); }
.cs-busy .cs-icon::before { content: "…"; }
.cs-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cs-fg);
    font-size: 22px;
    font-weight: 600;
    caret-color: var(--cs-accent);
}
.cs-input::placeholder { color: var(--cs-fg-muted); font-weight: 400; }

/* ---- results (inline, flow under the input) ---------------------------- */
.cs-results {
    margin-top: 12px;
    background: var(--cs-bg);
    border: 2px solid var(--cs-line);
    max-height: 60vh;
    overflow-y: auto;
}
.cs-results:empty { display: none; }

.cs-section + .cs-section { border-top: 2px solid var(--cs-line); }
.cs-section-title {
    padding: 14px 18px 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--cs-fg-muted);
}

.cs-row {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--cs-fg);
    border-top: 1px solid var(--cs-line);
}
.cs-row:hover { background: var(--cs-surface); }

.cs-asset-head { display: flex; align-items: baseline; gap: 10px; }
.cs-symbol { font-family: var(--cs-mono); font-weight: 700; font-size: 15px; }
.cs-name { flex: 1; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-type { font-size: 10px; color: var(--cs-fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.cs-asset-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 5px; font-size: 13px; }
.cs-exchange { font-size: 11px; color: var(--cs-fg-muted); text-transform: uppercase; }
.cs-price { margin-left: auto; font-family: var(--cs-mono); font-weight: 600; }
.cs-change { font-family: var(--cs-mono); font-weight: 600; }
.cs-change--up { color: var(--cs-up); }
.cs-change--down { color: var(--cs-down); }

.cs-news-title { font-size: 15px; font-weight: 600; }
.cs-news-date { margin-top: 3px; font-size: 12px; color: var(--cs-fg-muted); }

.cs-more {
    display: block;
    padding: 14px 18px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffffff;
    background: var(--cs-accent);
    border-top: 2px solid var(--cs-line);
}
.cs-more:hover { filter: brightness(1.08); }

.cs-empty, .cs-loading { padding: 14px 18px; font-size: 14px; color: var(--cs-fg-muted); }

@media (max-width: 600px) {
    .cs-input { font-size: 18px; }
    .cs-icon::before { font-size: 20px; }
}