/* ---------------------------------------------------------------------------
   SymbolPicker — one control for "pick an index" and "find a stock".

   Shared by the option chain and OI Flow; the behaviour is in
   js/symbol-picker.js. Designed to the vernacular those pages already speak: a
   market terminal's symbol lookup. Monospace tickers in an aligned column, company
   names trailing in a lighter face, no ornament, keyboard first.

   Three decisions do most of the work:

   1. THE POPOVER IS EXACTLY THE BUTTON'S WIDTH. It was 380px hanging off the
      right of a 260px button, which reads as a panel that happened to land near
      a control rather than as one object opening. Same width, same left edge,
      same radius language — it now reads as the control unfolding.

   2. THE TICKERS ARE A COLUMN. A fixed-width monospace first field means every
      company name starts at the same x, so the list scans vertically like the
      data tables these pages are made of. This is the one thing here that could not be
      lifted from a generic dropdown, and it costs nothing.

   3. THE HINT BECAME THE PLACEHOLDER. "Type to search 208 F&O stocks" was a
      whole row at the bottom of the list saying what the empty input above it
      could say itself. One row removed, one thing said once.
--------------------------------------------------------------------------- */
.chain-control {
    position: relative;
}

.cmb-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.cmb {
    position: relative;
    width: 300px;
}

.cmb-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 0.58rem 0.75rem 0.58rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.15s,
        background 0.15s,
        box-shadow 0.15s;
}

.cmb-btn:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.34);
}

.cmb-btn:focus-visible,
.cmb-btn[aria-expanded="true"] {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

/* The label outgrows the button — "SAMVRDHNA MTHRSN INTL LTD" is not short.
   Truncating keeps the toolbar's geometry fixed while the label changes from
   "NIFTY" to a full company name; the ticker, which identifies it, leads. */
.cmb-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A drawn chevron rather than the "▾" glyph, which renders at a different
   weight and baseline in every font on every platform. */
.cmb-car {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.cmb-btn[aria-expanded="true"] .cmb-car {
    transform: rotate(225deg) translate(-2px, -2px);
    border-color: var(--violet);
}

/* ---- the popover ---- */
.cmb-pop {
    position: absolute;
    z-index: 60;
    top: calc(100% + 7px);
    left: 0;
    width: 100%;
    /* Nearly opaque, not glassy. This panel lands on top of the insights cards,
       and at 0.94 the PCR reading behind it showed through its own rows — a
       picker you have to read past is worse than one that isn't fashionable.
       The blur stays for the edge, where it does no harm. */
    background: rgba(13, 14, 21, 0.985);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
}

.cmb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

/* Drawn, not an emoji: 🔍 renders as a full-colour glyph that sits heavier than
   anything else in this panel and shifts baseline between platforms. */
.cmb-search-ico {
    flex: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--faint);
    border-radius: 50%;
    position: relative;
}

.cmb-search-ico::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 5px;
    height: 1.5px;
    background: var(--faint);
    transform: rotate(45deg);
}

.cmb-in {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--ink);
}

.cmb-in::placeholder {
    color: var(--faint);
}

.cmb-list {
    max-height: 336px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 6px;
}

.cmb-grp {
    padding: 11px 13px 5px;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--faint);
}

.cmb-none {
    padding: 26px 14px;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}

/* The rows. A 3px cursor rail on the left instead of a filled pill: the pill
   was a violet slab moving under the pointer, which is a lot of colour for
   "here". The rail says the same thing in a tenth of the ink. */
.cmb-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 13px 7px 10px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

@media (hover: hover) {
    .cmb-row:hover {
        background: rgba(255, 255, 255, 0.035);
    }
}

.cmb-row.sel {
    border-left-color: var(--violet);
    background: rgba(139, 92, 246, 0.09);
}

/* The signature: tickers in a fixed monospace column, so every company name
   starts at the same x and the list scans like the chain table below it. */
.cmb-sym {
    flex: none;
    width: 96px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--muted);
}

/* The chain currently on screen. The rail is the keyboard cursor, so this needs
   to be a different signal entirely rather than a second highlight. */
.cmb-row.cur .cmb-sym {
    color: var(--violet);
}

.cmb-tag {
    flex: none;
    align-self: center;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--faint);
}

/* ---- phones ----
   The popover stops being a popover. Anchoring a 380px panel to a control on a
   360px screen puts half of it off the edge, and an on-screen keyboard then
   covers what is left — so it becomes a sheet, inset 12px, with the list sized
   against the visible height.

   NOTE `position: fixed` here does NOT resolve against the viewport: `.controls`
   carries `backdrop-filter: blur(14px)`, and a filtered element is a containing
   block for fixed descendants. So these offsets are measured from the toolbar,
   which is why the sheet sits over the control rather than at the top of the
   screen — correct either way, and worth knowing before "fixing" it. If the
   backdrop-filter ever goes, this becomes a viewport sheet inset by the same
   12px, which is also fine. */
/* While the sheet is open the page header is lifted over the shared command
   bar (z-index 300). It has to be the header rather than the sheet: the header
   is a stacking context, so the sheet's own z-index cannot escape it. See
   openPop() in symbol-picker.js. */
.app-header.sp-open {
    z-index: 320;
}

@media (max-width: 640px) {
    .cmb-btn {
        width: 100%;
        min-width: 0;
    }

    .chain-control {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cmb {
        flex: 1;
        min-width: 0;
    }

    .cmb-pop {
        position: fixed;
        /* Measured from the header, which is this sheet's containing block —
           see the note above. When the header is stuck to the top that is the
           viewport top, so the sheet clears the command bar by its own height. */
        top: calc(var(--cb-h, 52px) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        border-radius: 16px;
    }

    .cmb-list {
        max-height: min(60vh, 420px);
    }

    .cmb-in {
        /* 16px or iOS zooms the whole page in on focus. */
        font-size: 16px;
    }
}