/* "Screen the market" panel on /screener — the multi-criteria half.
   Builds on screener.css for the page shell and palette. */

.sc-panel {
    max-width: 1180px;
    margin: 0 auto 28px;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(22, 24, 40, 0.6);
}

.sc-head h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink, #e8eaf2);
}
.sc-head p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted, #8a8fa3);
}

/* ---- presets ---- */
.sc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.sc-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted, #8a8fa3);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.14s ease;
}
.sc-chip:hover {
    color: var(--ink, #e8eaf2);
    border-color: rgba(139, 92, 246, 0.45);
}
.sc-chip.on {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
}

/* ---- filters ---- */
/* Only the first row is shown until "More filters" is pressed: nineteen number
   boxes on arrival reads as a form to fill in, not a question to ask. */
.sc-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    /* Exactly one row. An in-between height slices the second row's inputs in
       half, which reads as a rendering bug rather than as "there is more". */
    max-height: 56px;
    overflow: hidden;
    transition: max-height 0.24s ease;
}
.sc-panel.sc-expanded .sc-filters {
    max-height: 1000px;
}
.sc-f {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sc-f > span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-f i {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: var(--muted, #8a8fa3);
    font-size: 9px;
    font-style: normal;
    line-height: 13px;
    text-align: center;
    cursor: help;
}
.sc-f input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(10, 11, 20, 0.6);
    color: var(--ink, #e8eaf2);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.sc-f input:focus {
    outline: none;
    border-color: #8b5cf6;
}

/* ---- action bar ---- */
.sc-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 6px;
    flex-wrap: wrap;
}
.sc-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink, #e8eaf2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.sc-btn:hover { border-color: rgba(139, 92, 246, 0.5); }
.sc-status {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--muted, #8a8fa3);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sc-status b { color: var(--ink, #e8eaf2); }
.sc-asof { color: var(--faint, #5a5f72); }
.sc-hint {
    flex-basis: 100%;
    font-size: 11.5px;
    color: var(--faint, #5a5f72);
    text-align: right;
}

/* ---- results ---- */
.sc-tablewrap {
    margin-top: 12px;
    /* Sized off the viewport, not a fixed pixel count: the point of a screen is
       to see as much of the shortlist as the screen allows. The subtraction is
       roughly the chrome above it (hero, tabs, presets, filters, action bar) so
       the table ends near the fold instead of guessing at 560px on every
       display from a laptop to a 4K panel. Floored so a short window still
       shows a usable number of rows. */
    max-height: clamp(320px, calc(100vh - 420px), 900px);
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sc-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: right;
    padding: 10px 12px;
    background-color: rgba(18, 20, 36, 0.97);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint, #5a5f72);
    white-space: nowrap;
}
.sc-table th:first-child { text-align: left; }
.sc-table th.sc-sortable { cursor: pointer; }
.sc-table th.sc-sortable:hover { color: var(--ink, #e8eaf2); }
.sc-table th.on { color: #8b5cf6; }
.sc-table th i { font-style: normal; margin-left: 3px; font-size: 8px; }

.sc-table td {
    padding: 9px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
    white-space: nowrap;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #e8eaf2);
}
.sc-table tbody tr { cursor: pointer; }
.sc-table tbody tr:hover td { background: rgba(139, 92, 246, 0.09); }

.sc-sym {
    text-align: left !important;
    font-family: inherit !important;
}
.sc-sym b {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #e8eaf2);
}
.sc-sym small {
    display: block;
    font-size: 11px;
    color: var(--faint, #5a5f72);
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-sym em {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(245, 182, 81, 0.13);
    color: #f5b651;
    font-size: 9.5px;
    font-style: normal;
    cursor: help;
}

.s-up { color: #16d195; }
.s-down { color: #ff5d6c; }
.s-spike { color: #f5b651; font-weight: 700; }

.sc-empty {
    margin: 22px 0 6px;
    text-align: center;
    font-size: 13px;
    color: var(--muted, #8a8fa3);
}

@media (max-width: 720px) {
    .sc-panel { padding: 18px 14px; }
    .sc-filters { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .sc-status { margin-left: 0; flex-basis: 100%; }
    .sc-hint { text-align: left; }
    /* Keep the identifying columns and the two that answer most screens. */
    .sc-table th:nth-child(4), .sc-table td:nth-child(4),
    .sc-table th:nth-child(7), .sc-table td:nth-child(7),
    .sc-table th:nth-child(9), .sc-table td:nth-child(9) { display: none; }
}

/* ---- Pane tabs ----
   Two ways to use the page. Sized and spaced like the rest of the app's
   segmented controls rather than as browser-chrome tabs. */
.sc-tabs {
    display: flex;
    gap: 10px;
    max-width: 1180px;
    margin: 0 auto 18px;
    padding: 0 2px;
}
.sc-tabs button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 13px 18px;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(22, 24, 40, 0.6);
    color: var(--muted, #8a8fa3);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
/* Title row: icon and label share a line. As bare children of a column flex
   container each became its own row, which stacked the emoji above the text. */
.sc-tabs button b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.sc-tabs button small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--faint, #5a5f72);
    letter-spacing: 0.01em;
}
.sc-tabs button:hover {
    color: var(--ink, #e8eaf2);
    border-color: rgba(139, 92, 246, 0.45);
}
.sc-tabs button.on {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
    border-color: transparent;
    color: #fff;
}
.sc-tabs button.on small { color: rgba(255, 255, 255, 0.78); }


#scStockPane[hidden], .sc-panel[hidden] { display: none; }

@media (max-width: 620px) {
    .sc-tabs { gap: 8px; }
    .sc-tabs button {
        padding: 11px 12px;
        font-size: 13px;
        border-radius: 12px;
    }
    .sc-tabs button small { font-size: 10.5px; }
    /* On a phone the chrome above the table is taller, and a table that runs
       past the fold is easier to read than one squeezed into a sliver. */
    .sc-tablewrap { max-height: clamp(280px, calc(100vh - 300px), 640px); }
}

/* --- F&O in the market screen ----------------------------------------------
   Two small additions, both about the same question: which of these names can
   I trade options on?

   The switch sits in the preset row but is not a preset — it narrows the
   universe *under* whichever preset is chosen — so a rule separates it and it
   carries the violet the rest of the site uses for the chain. */
.sc-chip-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.14);
    vertical-align: middle;
}
.sc-chip-fno.on {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
    color: #c4b5fd;
}
/* The row tag. Small, quiet, and never the widest thing in the cell — it
   annotates the symbol rather than competing with it. */
.sc-fno {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
    vertical-align: middle;
}
@media (max-width: 560px) {
    .sc-chip-sep {
        display: none;
    }
}