/* Reusable chain picker (window.ChainPicker) — TastyTrade-style sticky column
   header + docked active expiration + inline strike table.  Copied verbatim
   (and scoped under .chain-picker) from the Portfolio Simulator's "Pick from
   option chain" modal so the two look and behave identically. When the
   simulator migrates onto ChainPicker its inline <style> copy retires.

   Column-width plumbing: a single 15-column template shared by the sticky
   header bar, every expiration row, and the inline chain table.  The inline
   strike table is table-layout:fixed; width:100%, which scales EVERY column
   proportionally — so the header grid + expiration rows fill the same way via
   `fr` units in the SAME ratios as the --c-* rem widths.  KEEP THE fr NUMBERS
   IN SYNC with the --c-* rem values. (These :root vars are global; harmless
   where the markup isn't present.) */
:root {
    --c-pad: 3rem;
    --c-otm: 3.5rem;
    --c-delta: 3rem;
    --c-theta: 3rem;
    --c-oi: 3.5rem;
    --c-bid: 4rem;
    --c-ask: 4rem;
    --c-strike: 4.5rem;
    --chain-cols:
        3fr
        3.5fr 3fr 3fr 3.5fr 4fr 4fr
        4.5fr
        4fr 4fr 3.5fr 3fr 3fr 3.5fr
        3fr;
}

.chain-picker .chain-cols-grid {
    display: grid;
    grid-template-columns: var(--chain-cols);
    align-items: center;
}

/* Scroll container: sticky header bar + scrollable expiration list.  position
   relative is REQUIRED so the active row's scroll-into-position math is
   computed against THIS box, not an unrelated positioned ancestor. */
.chain-picker .cp-body {
    position: relative;
    /* Bounded scroll window — the chain scrolls inside itself and leaves room
       below for the order builder (and other host bottom sections) instead of
       filling the screen. */
    max-height: min(50vh, calc(100vh - 13rem));
    overflow-y: auto;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.chain-picker .chain-col-header {
    position: sticky; top: 0; z-index: 5;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    padding: 0.4rem 0;
}
.chain-picker .chain-col-header > span { padding: 0 0.25rem; }

/* Expiration list rows — share the 15-column grid template. */
.chain-picker .chain-exp-list { display: flex; flex-direction: column; }
.chain-picker .chain-exp-item { border-top: 1px solid var(--bs-border-color); }
.chain-picker .chain-exp-item:first-child { border-top: 0; }
.chain-picker .chain-exp-row {
    padding: 0.4rem 0;
    cursor: pointer;
    user-select: none;
}
.chain-picker .chain-exp-row:hover { background: rgba(var(--bs-emphasis-color-rgb), 0.06); }
.chain-picker .chain-exp-row.chain-exp-active {
    /* Sticks just below the column header bar so the active row stays parked
       at the top while the strikes scroll past it.  --chain-header-h is set in
       JS after the header renders.  Opaque background is critical — translucent
       blue would let the scrolling strikes show through. */
    position: sticky;
    top: var(--chain-header-h, 2rem);
    z-index: 4;
    background-color: var(--bs-body-bg);
    background-image: linear-gradient(rgba(13, 110, 253, 0.28), rgba(13, 110, 253, 0.28));
    font-weight: 600;
}
[data-bs-theme="dark"] .chain-picker .chain-exp-row.chain-exp-active {
    background-image: linear-gradient(rgba(70, 130, 200, 0.45), rgba(70, 130, 200, 0.45));
}
.chain-picker .chain-exp-row > span { padding: 0 0.25rem; }
.chain-picker .chain-exp-chevron { font-size: 1.25rem; line-height: 1; color: var(--bs-secondary-color); padding-left: 0.5rem !important; }
.chain-picker .chain-exp-label { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: hidden; }
.chain-picker .chain-exp-badge { font-size: 0.75rem; font-weight: 600; color: #d2691e; text-transform: uppercase; }
.chain-picker .chain-exp-dte { text-align: center; color: var(--bs-secondary-color); font-weight: 500; }
.chain-picker .chain-exp-active .chain-exp-dte { color: var(--bs-body-color); }
.chain-picker .chain-exp-calls, .chain-picker .chain-exp-puts { text-align: center; color: var(--bs-body-color); font-weight: 600; }
.chain-picker .chain-exp-ivx { white-space: nowrap; text-align: right; padding-right: 0.5rem; }

/* The expanded chain table for the active expiration (inline mode). */
.chain-picker .chain-exp-table { padding: 0; }
.chain-picker .chain-exp-table .chain-header { display: none; }
.chain-picker .chain-exp-table .chain-scroll,
.chain-picker .chain-exp-table .table-responsive { overflow-x: visible; }
.chain-picker .chain-table-inline { table-layout: fixed; width: 100%; margin-bottom: 0 !important; }
.chain-picker .chain-table-inline th:nth-child(1),  .chain-picker .chain-table-inline td:nth-child(1)  { width: var(--c-pad); }
.chain-picker .chain-table-inline th:nth-child(2),  .chain-picker .chain-table-inline td:nth-child(2)  { width: var(--c-otm); }
.chain-picker .chain-table-inline th:nth-child(3),  .chain-picker .chain-table-inline td:nth-child(3)  { width: var(--c-delta); }
.chain-picker .chain-table-inline th:nth-child(4),  .chain-picker .chain-table-inline td:nth-child(4)  { width: var(--c-theta); }
.chain-picker .chain-table-inline th:nth-child(5),  .chain-picker .chain-table-inline td:nth-child(5)  { width: var(--c-oi); }
.chain-picker .chain-table-inline th:nth-child(6),  .chain-picker .chain-table-inline td:nth-child(6)  { width: var(--c-bid); }
.chain-picker .chain-table-inline th:nth-child(7),  .chain-picker .chain-table-inline td:nth-child(7)  { width: var(--c-ask); }
.chain-picker .chain-table-inline th:nth-child(8),  .chain-picker .chain-table-inline td:nth-child(8)  { width: var(--c-strike); }
.chain-picker .chain-table-inline th:nth-child(9),  .chain-picker .chain-table-inline td:nth-child(9)  { width: var(--c-bid); }
.chain-picker .chain-table-inline th:nth-child(10), .chain-picker .chain-table-inline td:nth-child(10) { width: var(--c-ask); }
.chain-picker .chain-table-inline th:nth-child(11), .chain-picker .chain-table-inline td:nth-child(11) { width: var(--c-oi); }
.chain-picker .chain-table-inline th:nth-child(12), .chain-picker .chain-table-inline td:nth-child(12) { width: var(--c-theta); }
.chain-picker .chain-table-inline th:nth-child(13), .chain-picker .chain-table-inline td:nth-child(13) { width: var(--c-delta); }
.chain-picker .chain-table-inline th:nth-child(14), .chain-picker .chain-table-inline td:nth-child(14) { width: var(--c-otm); }
.chain-picker .chain-table-inline th:nth-child(15), .chain-picker .chain-table-inline td:nth-child(15) { width: var(--c-pad); }

/* Live-quote flash (Phase 2 polish): a price cell briefly tints green/red when
   its value ticks up/down, then fades — the standard trading-platform cue.
   Applied by chain_picker.js _liveApply on each live update. */
@keyframes cpFlashUp   { 0%,40% { background-color: rgba(40,167,69,.55);  } 100% { background-color: transparent; } }
@keyframes cpFlashDown { 0%,40% { background-color: rgba(220,53,69,.55); } 100% { background-color: transparent; } }
.chain-picker td.cp-flash-up   { animation: cpFlashUp   1.4s ease-out; }
.chain-picker td.cp-flash-down { animation: cpFlashDown 1.4s ease-out; }