/* ---------------------------------------------------------------------------
   BSE (SENSEX / BANKEX) — launch banner and cross-exchange index affordances.

   Shared by OI Flow, Highlights and Outlook, because all three grew the same
   two indices at the same time and should introduce them identically. Uses the
   existing token set (screener.css :root) rather than a private palette, so the
   banner reads as part of the app instead of an ad slot bolted onto it.
   --------------------------------------------------------------------------- */

/* ---- launch banner -------------------------------------------------------- */
.bse-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 18px;
    padding: 16px 20px;
    border: 1px solid rgba(245, 182, 81, 0.28);
    border-radius: var(--radius, 18px);
    background:
        linear-gradient(
            135deg,
            rgba(245, 182, 81, 0.12) 0%,
            rgba(139, 92, 246, 0.1) 45%,
            rgba(22, 24, 40, 0.72) 100%
        );
    overflow: hidden;
}
/* A warm edge that ties the banner to the amber "new" accent without shouting. */
.bse-banner::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--amber, #f5b651), var(--violet, #8b5cf6));
}

.bse-banner-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 182, 81, 0.14);
    border: 1px solid rgba(245, 182, 81, 0.3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--amber, #f5b651);
}

.bse-banner-body {
    min-width: 0;
    flex: 1 1 auto;
}

.bse-banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--amber, #f5b651);
}
.bse-banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber, #f5b651);
    box-shadow: 0 0 0 0 rgba(245, 182, 81, 0.55);
    animation: bse-pulse 2.4s ease-out infinite;
}
@keyframes bse-pulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 182, 81, 0.5); }
    70% { box-shadow: 0 0 0 9px rgba(245, 182, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 182, 81, 0); }
}
/* Respect a reduced-motion preference — the dot still reads without the pulse. */
@media (prefers-reduced-motion: reduce) {
    .bse-banner-dot { animation: none; }
}

.bse-banner-title {
    margin: 0 0 4px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--txt, #e8eaf2);
}
.bse-banner-title strong {
    color: #ffd79a;
    font-weight: 700;
}
.bse-banner-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted, #8a8fa3);
}

.bse-banner-when {
    flex: none;
    text-align: center;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(10, 11, 20, 0.5);
    border: 1px solid var(--card-brd, rgba(255, 255, 255, 0.08));
}
.bse-banner-when-day {
    display: block;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--txt, #e8eaf2);
}
.bse-banner-when-mon {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber, #f5b651);
}
.bse-banner-when-note {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    color: var(--faint, #5a5f72);
}

@media (max-width: 720px) {
    .bse-banner {
        flex-wrap: wrap;
        gap: 14px;
        padding: 14px 16px;
    }
    .bse-banner-mark { width: 38px; height: 38px; }
    .bse-banner-body { flex-basis: calc(100% - 56px); }
    .bse-banner-when {
        flex: 1 1 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        text-align: left;
        padding: 8px 12px;
    }
    .bse-banner-when-day,
    .bse-banner-when-mon,
    .bse-banner-when-note { display: inline; margin: 0; font-size: 12px; }
    .bse-banner-when-day { font-size: 14px; }
}

/* ---- exchange affordances on index pickers -------------------------------- */
/* The pickers now span two exchanges, so a BSE entry says so. A hairline before
   the first BSE button does the grouping without a second row of chrome. */
.bse-sep {
    align-self: stretch;
    width: 1px;
    margin: 2px 4px;
    background: var(--card-brd, rgba(255, 255, 255, 0.08));
    flex: none;
}

.bse-tag {
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    vertical-align: 1px;
    background: rgba(139, 92, 246, 0.18);
    color: #c9b8ff;
}
/* Pre-launch, the same slot carries the countdown label instead. */
.bse-tag.soon {
    background: rgba(245, 182, 81, 0.16);
    color: var(--amber, #f5b651);
}

/* Pre-launch buttons stay visible — they are the advertisement — but read as
   not-yet-available rather than merely unselected, and don't respond to clicks. */
[data-bse-pending="1"] {
    opacity: 0.62;
    cursor: not-allowed !important;
}
[data-bse-pending="1"]:hover {
    color: var(--muted, #8a8fa3) !important;
}

/* ---- pre-launch placeholder panel ----------------------------------------- */
/* Shown where a chart or table would be if someone lands on a BSE index before
   launch (a stale deep link, say) — so the page explains itself instead of
   rendering an empty axis. */
.bse-pending-panel {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed rgba(245, 182, 81, 0.3);
    border-radius: 14px;
    background: rgba(245, 182, 81, 0.04);
}
.bse-pending-panel h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--txt, #e8eaf2);
}
.bse-pending-panel p {
    margin: 0;
    max-width: 46ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted, #8a8fa3);
}