/*
   issuance.market — /market/issuance/next

   Every selector is namespaced imx- so nothing here can reach the current Issuance page.
   Delete this file and the four components and the surface is gone without residue.

   The band at the top is dark and the working surface below is light. That split is the point:
   state and control belong to the market, the tape belongs to the reader.
*/

:root {
    --imx-ink-900: #0B1220;
    --imx-ink-800: #0F1C36;
    --imx-ink-700: #112B55;
    --imx-line-dark: #1E2E4D;

    --imx-paper: #F6F8FB;
    --imx-surface: #FFFFFF;
    --imx-line: #E3E9F2;
    --imx-line-soft: #EEF2F8;
    --imx-hair: #F3F6FA;

    --imx-text: #0F233E;
    --imx-text-dim: #64748B;
    --imx-text-faint: #94A3B8;

    --imx-accent: #86C2FF;
    --imx-blue: #2563EB;
    --imx-income: #15803D;
    --imx-income-soft: #DCFCE7;
    --imx-protect: #1D4ED8;
    --imx-protect-soft: #E0EBFD;

    --imx-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Page frame ─────────────────────────────────────────────────────────── */

/*
   The page owns the viewport explicitly rather than inheriting it.

   site.css locks the body only for .im-workspace-page, which /next does not render — so the body kept
   its own scroller alongside the tape's, and two competing vertical scroll contexts is what the
   "sticking" was. Opting in by class makes the ownership stated rather than accidental:

     body            no scroll
     top bar         sticky shell
     section nav     fixed in page
     command rail    fixed in page
     pulse rail      fixed in page
     tape body       the vertical scroller
     context panel   its own vertical scroller
*/
body:has(.imx-page) {
    overflow: hidden;
}

.imx-page {
    display: flex;
    flex-direction: column;
    /*
       The shared .im-footer lives in the layout, outside this element. With the body locked it would
       otherwise sit below the fold, so its height comes off the page. Both offsets are variables:
       override them rather than editing this rule if your shell measures differently.
    */
    height: calc(100dvh - var(--imx-shell-offset, 68px) - var(--imx-footer-height, 76px));
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: var(--imx-paper);
    box-sizing: border-box;
}

.imx-page .im-section-nav {
    flex: 0 0 auto;
}

/* ── Command rail ───────────────────────────────────────────────────────── */

.imx-rail {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--imx-ink-900) 0%, var(--imx-ink-800) 55%, var(--imx-ink-700) 100%);
    color: #E2E8F0;
    border-bottom: 1px solid var(--imx-line-dark);
}

.imx-rail-state {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.imx-rail-identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.imx-rail-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #F8FAFC;
    line-height: 1.1;
}

.imx-rail-sub {
    font-size: 11px;
    color: #8FA4C0;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.imx-rail-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--imx-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #A9BDD8;
    white-space: nowrap;
}

.imx-rail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #475569;
    flex: 0 0 auto;
}

.imx-rail-dot--live {
    background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: imx-pulse-dot 2.4s ease-out infinite;
}

@keyframes imx-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.imx-rail-sep { color: #3E5470; }

.imx-status--green { color: #4ADE80; }
.imx-status--amber { color: #FBBF24; }
.imx-status--red   { color: #F87171; }
.imx-status--grey  { color: #94A3B8; }

.imx-rail-spark {
    color: var(--imx-accent);
    line-height: 0;
    flex: 0 0 auto;
}

.imx-rail-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0 auto;
    padding: 0;
}

.imx-rail-stat {
    padding: 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
}

.imx-rail-stat dt {
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7E93B0;
    font-weight: 700;
    white-space: nowrap;
}

.imx-rail-stat dd {
    margin: 0;
    font-family: var(--imx-mono);
    font-size: 15px;
    font-weight: 600;
    color: #F1F5F9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.imx-rail-of {
    font-size: 11px;
    color: #7E93B0;
    font-weight: 400;
}

.imx-rail-window {
    font-size: 12px !important;
}

.imx-rail-stat--accrue dd {
    color: var(--imx-accent);
}

/* Controls */

.imx-rail-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    flex-wrap: wrap;
}

.imx-rail-views,
.imx-rail-filters,
.imx-rail-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
}

.imx-rail-spacer { flex: 1 1 auto; }

.imx-rail-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.11);
    margin: 0 4px;
}

.imx-rail-btn,
.imx-rail-toggle {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #C7D6EA;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 3px;
    padding: 5px 11px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.imx-rail-btn:hover:not(:disabled),
.imx-rail-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #F1F5F9;
}

.imx-rail-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.imx-rail-toggle--on {
    background: rgba(134, 194, 255, 0.16);
    border-color: rgba(134, 194, 255, 0.45);
    color: #DCEBFB;
}

/* On the state line now, so it is typed like the rest of it: no box, just a lit word. */
.imx-rail-follow {
    font: inherit;
    font-family: var(--imx-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7E93B0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.imx-rail-follow:hover { color: #C7D6EA; }

.imx-rail-follow--on { color: #6EE7A0; }

.imx-rail-follow--on .imx-rail-toggle-dot { background: #4ADE80; }

.imx-rail-viewpicker .imx-dd-trigger {
    background: rgba(134, 194, 255, 0.1);
    border-color: rgba(134, 194, 255, 0.28);
    color: #E4EFFB;
    font-weight: 700;
}

/* Prototype instrumentation, held visually below the shipped controls. */
.imx-rail-proto {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 3px;
    overflow: hidden;
}

.imx-rail-chip {
    font: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #7E93B0;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    padding: 5px 9px;
    cursor: pointer;
    white-space: nowrap;
}

.imx-rail-chip:last-child { border-right: 0; }
.imx-rail-chip:hover { background: rgba(255, 255, 255, 0.06); color: #C7D6EA; }
.imx-rail-chip--on { color: #C7D6EA; background: rgba(255, 255, 255, 0.05); }

.imx-rail-toggle-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748B;
}

.imx-rail-toggle--on .imx-rail-toggle-dot {
    background: #4ADE80;
}

.imx-rail-search {
    font: inherit;
    font-size: 11.5px;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 3px;
    padding: 5px 10px;
    width: 220px;
}

.imx-rail-search::placeholder { color: #6B819E; }

.imx-rail-search:focus-visible,
.imx-rail-btn:focus-visible,
.imx-rail-toggle:focus-visible {
    outline: 2px solid var(--imx-accent);
    outline-offset: 1px;
}

/* ── Dropdown ───────────────────────────────────────────────────────────── */

.imx-dd { position: relative; }

.imx-dd-trigger {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: #C7D6EA;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 3px;
    padding: 5px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
}

.imx-dd-trigger--active {
    background: rgba(134, 194, 255, 0.16);
    border-color: rgba(134, 194, 255, 0.45);
    color: #EAF3FE;
}

.imx-dd-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imx-dd-count {
    font-family: var(--imx-mono);
    font-size: 10px;
    background: rgba(134, 194, 255, 0.3);
    border-radius: 2px;
    padding: 0 4px;
}

.imx-dd-caret { font-size: 9px; opacity: 0.7; }

.imx-dd-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.imx-dd-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 41;
    width: 272px;
    background: var(--imx-surface);
    border: 1px solid var(--imx-line);
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(11, 18, 32, 0.24);
    padding: 8px;
    color: var(--imx-text);
}

.imx-dd-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--imx-text-dim);
    padding: 2px 4px 8px;
}

.imx-dd-clear {
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--imx-blue);
    background: none;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
}

.imx-dd-clear:disabled { color: var(--imx-text-faint); cursor: not-allowed; }

.imx-dd-search {
    font: inherit;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--imx-line);
    border-radius: 3px;
    padding: 5px 8px;
    margin-bottom: 6px;
}

.imx-dd-list { max-height: 290px; overflow-y: auto; }

.imx-dd-option {
    font: inherit;
    font-size: 12.5px;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 5px 6px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 6px;
    border-radius: 3px;
    color: var(--imx-text);
}

.imx-dd-option:hover { background: var(--imx-line-soft); }

.imx-dd-option--locked { opacity: 0.55; cursor: not-allowed; }

.imx-dd-check { color: var(--imx-blue); font-weight: 800; }

.imx-dd-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imx-dd-num {
    font-family: var(--imx-mono);
    font-size: 10.5px;
    color: var(--imx-text-faint);
    font-variant-numeric: tabular-nums;
}

.imx-dd-lock {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--imx-blue);
}

.imx-dd-empty {
    font-size: 12px;
    color: var(--imx-text-dim);
    padding: 10px 6px;
}

/* ── Pulse rail ─────────────────────────────────────────────────────────── */

.imx-pulse {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    padding: 0 16px;
    background: #08101E;
    border-bottom: 1px solid var(--imx-line-dark);
    overflow: hidden;
}

.imx-pulse-lede {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 14px;
}

.imx-pulse-kicker {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #7E93B0;
}

.imx-pulse-clock {
    font-family: var(--imx-mono);
    font-size: 10.5px;
    color: var(--imx-accent);
    white-space: nowrap;
}

.imx-pulse-track {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
}

.imx-pulse-track::-webkit-scrollbar { height: 4px; }
.imx-pulse-track::-webkit-scrollbar-thumb { background: #1E2E4D; border-radius: 2px; }

.imx-pulse-cell {
    font: inherit;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 3px;
    padding: 3px 8px 4px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 2px;
    align-items: center;
    gap: 0 7px;
    flex: 0 0 auto;
    transition: background 120ms ease, border-color 120ms ease;
}

.imx-pulse-cell:hover { background: rgba(255, 255, 255, 0.09); }

.imx-pulse-cell--on {
    background: rgba(134, 194, 255, 0.18);
    border-color: rgba(134, 194, 255, 0.5);
}

.imx-pulse-cell--hot { border-color: rgba(74, 222, 128, 0.55); }

.imx-pulse-ticker {
    font-size: 11px;
    font-weight: 700;
    color: #DCE7F5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.imx-pulse-count {
    font-family: var(--imx-mono);
    font-size: 11px;
    color: var(--imx-accent);
    font-variant-numeric: tabular-nums;
}

.imx-pulse-bar {
    grid-column: 1 / -1;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

.imx-pulse-bar-fill {
    display: block;
    height: 100%;
    background: var(--imx-accent);
    opacity: 0.8;
}

.imx-pulse-empty { font-size: 11.5px; color: #6B819E; }

.imx-pulse-clear {
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--imx-accent);
    background: none;
    border: 1px solid rgba(134, 194, 255, 0.4);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    flex: 0 0 auto;
}

/* ── Work area ──────────────────────────────────────────────────────────── */

.imx-work {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
}

.imx-work--split {
    grid-template-columns: minmax(0, 1fr) 360px;
}

/* ── Tape ───────────────────────────────────────────────────────────────── */

.imx-tape {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--imx-surface);
    border: 1px solid var(--imx-line);
    border-radius: 4px;
    overflow: hidden;

    /*
       Explicit widths, with a capped range on Underliers only. An unbounded 1fr there absorbed every
       pixel of slack on a wide viewport, which pushed the economic terms to the far edge and split
       the row into two halves.

       Width sits where the strings are long. Underliers carries the most now that it shows names
       rather than tickers — "Class A common stock of Alphabet Inc" against "GOOGL" — so it takes the
       flexible share, capped at 620px so it cannot run away and push the economics to the far edge
       the way an uncapped 1fr did. Income and Protection stay compact: a numeral and a 25px meter is
       all they carry. Leftover width accumulates after Stage, where the context panel takes it.
    */
    --imx-cols: 74px 236px 164px minmax(340px, 620px) 118px 132px 168px 168px 78px 100px;
}

.imx-tape-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--imx-line);
    flex: 0 0 auto;
}

.imx-tape-head-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.imx-tape-head-left .imx-tape-count + .imx-tape-count {
    color: var(--imx-text-dim);
}

.imx-tape-kicker {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--imx-text-dim);
}

.imx-tape-count {
    font-family: var(--imx-mono);
    font-size: 12px;
    color: var(--imx-text);
    font-variant-numeric: tabular-nums;
}

.imx-tape-today {
    color: var(--imx-text-faint);
    font-size: 11.5px;
}

/* Quiet by design: a standing note about data, not a warning about the market. */
.imx-tape-unplaced {
    color: #B0813C;
    font-size: 11.5px;
    cursor: help;
}

.imx-tape-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.imx-tape-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--imx-text-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
}

.imx-tape-follow:hover {
    background: #F5F8FC;
    border-color: var(--imx-line);
}

/* The verb appears on hover, so the resting state reads as status rather than as a button. */
.imx-tape-follow-action {
    color: var(--imx-blue);
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 120ms ease, max-width 120ms ease;
}

.imx-tape-follow:hover .imx-tape-follow-action {
    opacity: 1;
    max-width: 60px;
}

.imx-tape-follow:focus-visible {
    outline: 2px solid var(--imx-blue);
    outline-offset: 1px;
}

.imx-tape-follow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C3CEDC;
}

.imx-tape-follow--on { color: #15803D; }
.imx-tape-follow--on .imx-tape-follow-dot { background: #22C55E; }

.imx-tape-pending {
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--imx-blue);
    border: 0;
    border-radius: 3px;
    padding: 5px 12px;
    cursor: pointer;
    animation: imx-rise 220ms ease-out;
}

@keyframes imx-rise {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.imx-tape-cols,
.imx-row {
    display: grid;
    grid-template-columns: var(--imx-cols);
    justify-content: start;
    align-items: center;
    gap: 0 10px;
    padding: 0 12px;
    box-sizing: border-box;
}

.imx-tape-cols .imx-num { justify-self: end; }

.imx-tape-cols {
    height: 28px;
    flex: 0 0 auto;
    background: #FAFCFE;
    border-bottom: 1px solid var(--imx-line);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--imx-text-dim);
}

.imx-tape-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.imx-tape-anchor { height: 0; outline: none; }

.imx-row {
    height: 32px;
    font-size: 12.5px;
    color: var(--imx-text);
    border-bottom: 1px solid var(--imx-hair);
    cursor: pointer;
    position: relative;
}

/*
   Bands fall on fifteen-minute boundaries, computed from the row rather than its DOM position — an
   nth-child rule counts the virtualised window and drifts as the operator scrolls. No striping: it
   is the most templated device available, and it would give the arrival accent and the selection two
   different base colours to land against.
*/
/*
   A session boundary is a different thing from a quarter-hour gap and must not render as one. The day
   rule carries the app's accent blue at 2px; the fifteen-minute bands stay hairline grey, so the
   hierarchy is unambiguous at a glance.

   The label sits at the right edge rather than the left. On the left it landed on top of the
   timestamp beside it, which read as a rendering fault instead of a divider.
*/
.imx-row--day {
    box-shadow: inset 0 2px 0 var(--imx-blue);
}

.imx-row--day::after {
    content: var(--imx-day, '');
    position: absolute;
    top: -7px;
    right: 12px;
    padding: 0 8px;
    background: var(--imx-surface);
    color: var(--imx-blue);
    font-family: var(--imx-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 14px;
    pointer-events: none;
    z-index: 1;
}

.imx-row--day.imx-row--selected {
    box-shadow: inset 0 2px 0 var(--imx-blue), inset 2px 0 0 var(--imx-blue);
}

.imx-row--band {
    /*
       An inset shadow, not a border. A border adds a pixel to the row box, and Virtualize sizes its
       spacers from ItemSize — so a 33px row inside a 32px allocation overflows the scroll container
       and the excess escapes to the page as a second, outer scrollbar. Shadows never participate in
       layout.
    */
    box-shadow: inset 0 1px 0 #DCE4EF;
}

.imx-row--band.imx-row--selected {
    box-shadow: inset 0 1px 0 #DCE4EF, inset 2px 0 0 var(--imx-blue);
}

.imx-tape--comfortable .imx-row { height: 44px; }

.imx-row:hover { background: #F7FAFE; }

.imx-row--selected {
    background: #EFF6FF;
    box-shadow: inset 2px 0 0 var(--imx-blue);
}

.imx-row--traded .imx-cell-time { color: var(--imx-text-faint); }

.imx-row--new,
.imx-row--new.imx-row--band,
.imx-row--new.imx-row--day {
    box-shadow: inset 3px 0 0 #16A34A;
}

/*
   The key lives for 2200ms in TrackArrivals, so the animation runs for 2200ms. The first pass faded
   in 600ms and died a second and a half before the state did, which is why the flash read as a blink.
*/
.imx-row--new::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(22, 163, 74, 0.30) 0%,
        rgba(22, 163, 74, 0.09) 45%,
        rgba(22, 163, 74, 0) 80%);
    animation: imx-wipe 2200ms cubic-bezier(.16, .8, .3, 1) forwards;
}

@keyframes imx-wipe {
    0%   { opacity: 0; transform: translateX(-8px); }
    8%   { opacity: 1; transform: none; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

.imx-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imx-num {
    text-align: right;
    align-items: flex-end;
}

.imx-tape-cols span:nth-child(5),
.imx-tape-cols span:nth-child(6) {
    padding-right: 32px;
}

.imx-mono {
    font-family: var(--imx-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: -0.01em;
}

/*
   The timestamp column does two jobs: it reads the time, and it reports liveness. Pale blue at rest,
   green for the arrival window, then back. That is one element carrying the state rather than a
   badge that would add width and shift the row.
*/
.imx-time {
    color: #5B8BC4;
    font-size: 11.5px;
    letter-spacing: -0.02em;
}

.imx-row--new .imx-time {
    color: #15803D;
    font-weight: 600;
}

/*
   Hierarchy does the filtering before attention has to. The underlier is what a structurer scans
   for, so it carries the row; the issuer steps back to a cooler grey at medium weight.

   Block, not flex. text-overflow: ellipsis does not apply to text inside a flex container, so these
   two columns were cutting off mid-word with no signal — the row is a grid with align-items: center,
   so a block child still centres vertically.
*/
.imx-cell-issuer,
.imx-cell-underliers {
    display: block;
    line-height: 32px;
}

.imx-tape--comfortable .imx-cell-issuer,
.imx-tape--comfortable .imx-cell-underliers {
    line-height: 44px;
}

.imx-cell-issuer {
    font-weight: 500;
    color: #3D5170;
}

.imx-cell-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imx-cell-secondary {
    font-size: 10.5px;
    color: var(--imx-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imx-cell-underliers {
    color: #0B1B31;
    font-weight: 550;
    letter-spacing: -0.005em;
}



.imx-cell-structure { color: #33465F; }

/*
   These carry the payoff — "139% Participation", "Capped at 27%". They were lighter than the
   structure column beside them, which inverted the hierarchy: the terms mattered more than the label.
*/
.imx-dim {
    color: #33465F;
    font-size: 12px;
}

.imx-val { color: var(--imx-text); font-weight: 600; }
.imx-val--income { color: #14663A; }
.imx-val--none { color: var(--imx-text-faint); font-weight: 400; }

/*
   A detached micro-meter, not a bar under the number. Segments are scaled within protection kind by
   IssuanceMeterScale, so length reads as strength within kind and never across kinds.
*/
.imx-cell-metric {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.imx-meter {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
    flex: 0 0 auto;
    width: 25px;
}

/* Tall and narrow reads as an instrument; short and wide reads as a progress bar. */
.imx-meter i {
    display: block;
    width: 4px;
    height: 10px;
    border-radius: 0.5px;
}

/*
   The numeral still wins first glance on weight and position. It does not need the meter dimmed to
   near-invisible to do that — at 0.55 the encoding was there and unreadable, which is the worst of
   both. Full strength, and the hierarchy holds.
*/
.imx-meter--income i { background: #22A05F; }
.imx-meter--protection i { background: #5B90D4; }

.imx-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 2px;
    white-space: nowrap;
}

.imx-chip--income { background: var(--imx-income-soft); color: var(--imx-income); }
.imx-chip--protection { background: var(--imx-protect-soft); color: var(--imx-protect); }
.imx-chip--muted { background: #F1F5F9; color: var(--imx-text-faint); font-weight: 400; }

/*
   Only one state is filled.

   The legacy grid filled both, which is what made the column a checkerboard. Filling only In Market
   means roughly a third of rows carry weight and the other two thirds stay silent — the eye gets one
   thing to land on per row instead of fifty competing blocks.

   The hue is deliberately not green. Green already means income on this page, and a green stage label
   sitting in the same row as a green coupon gave the eye two things it could not tell apart by colour.
   Blue is a fourth job for blue here, but a filled chip is a different object class from the thin
   protection meters and the mono time rail, and Stage sits isolated at the right edge. If it reads as
   noisy against the meters, swap the two In Market values below for amber — #FDF0DC and #92610F.
*/
.imx-stage {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 2px 9px;
    border-radius: 2px;
}

.imx-stage--market {
    background: #E4EEFB;
    color: #1D4ED8;
}

/* Plain text, no fill, no marker. Most of the tape is Traded and most of the tape should be quiet. */
.imx-stage--traded {
    background: transparent;
    color: #8C9AAE;
    font-weight: 500;
    padding-left: 0;
}

.imx-tape-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 64px 20px;
    color: var(--imx-text-dim);
    font-size: 13px;
}

.imx-tape-state-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--imx-text);
}

.imx-tape-state-body { max-width: 46ch; text-align: center; }

/* ── Context panel ──────────────────────────────────────────────────────── */

.imx-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--imx-surface);
    border: 1px solid var(--imx-line);
    border-radius: 4px;
    overflow: hidden;
}

.imx-panel--pinned { border-color: var(--imx-blue); }

.imx-panel-idle {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 20px;
    color: var(--imx-text-dim);
    font-size: 12.5px;
    line-height: 1.6;
}

.imx-panel-idle-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--imx-text);
}

.imx-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--imx-ink-900) 0%, var(--imx-ink-800) 100%);
    color: #F1F5F9;
    flex: 0 0 auto;
}

.imx-panel-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.imx-panel-kicker {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--imx-accent);
}

.imx-panel-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.imx-panel-sub { font-size: 11.5px; color: #94A9C6; }

.imx-panel-head-actions { display: flex; gap: 5px; flex: 0 0 auto; }

.imx-panel-icon {
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    color: #C7D6EA;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
}

.imx-panel-icon--on {
    background: rgba(134, 194, 255, 0.22);
    border-color: rgba(134, 194, 255, 0.5);
    color: #EAF3FE;
}

.imx-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.imx-panel-block {
    padding: 14px;
    border-bottom: 1px solid var(--imx-line-soft);
}

.imx-panel-h {
    margin: 0 0 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--imx-text-dim);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.imx-panel-hnote {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--imx-text-faint);
}

.imx-panel-terms { margin: 0; display: flex; flex-direction: column; gap: 0; }

.imx-panel-terms > div {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--imx-line-soft);
    align-items: baseline;
}

.imx-panel-terms > div:last-child { border-bottom: 0; }

.imx-panel-terms dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--imx-text-faint);
}

.imx-panel-terms dd {
    margin: 0;
    font-size: 12.5px;
    color: var(--imx-text);
    word-break: break-word;
}

/*
   Full underlier names run long — a ten-name basket of rolling strategy indices is a paragraph. The
   tape truncates with the full text on hover; the panel is where it gets read, so it wraps.
*/
.imx-panel-underliers {
    line-height: 1.45;
}

.imx-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.imx-panel-btn {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--imx-text);
    background: #F7FAFE;
    border: 1px solid var(--imx-line);
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    text-decoration: none;
}

.imx-panel-btn:hover { background: #EFF6FF; border-color: #C7DBF6; }

.imx-panel-list { list-style: none; margin: 0; padding: 0; }

.imx-panel-rowlink {
    font: inherit;
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--imx-line-soft);
    padding: 6px 2px;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    color: var(--imx-text);
}

.imx-panel-rowlink:hover { background: #F7FAFE; }

.imx-panel-rowtime { font-size: 11px; color: var(--imx-text-faint); flex: 0 0 auto; }

.imx-panel-rowmain {
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imx-panel-rowval { font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.imx-panel-rowdim { font-size: 11px; color: var(--imx-text-dim); flex: 0 0 auto; }

.imx-panel-none { margin: 0; font-size: 12px; color: var(--imx-text-dim); line-height: 1.55; }

/* ── Compare link, boot and denied states ───────────────────────────────── */

.imx-boot {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #F8FAFC;
}

.imx-boot-title { font-size: 15px; font-weight: 700; }

.imx-denied {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--imx-paper);
    padding: 40px 16px;
}

.imx-denied-card {
    width: 100%;
    max-width: 600px;
    background: var(--imx-surface);
    border: 1px solid var(--imx-line);
    box-shadow: 0 18px 40px rgba(15, 35, 62, 0.08);
    padding: 32px;
    color: var(--imx-text);
}

.imx-denied-kicker {
    display: block;
    color: var(--imx-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.imx-denied-card h1 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.imx-denied-card p {
    margin: 0 0 22px;
    color: #475569;
    font-size: 14.5px;
    line-height: 1.6;
}

/* ── Narrow viewports ───────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .imx-work--split { grid-template-columns: minmax(0, 1fr) 320px; }
    .imx-rail-search { width: 160px; }
}

@media (max-width: 1024px) {
    .imx-work--split { grid-template-columns: 1fr; }
    .imx-rail-stats { width: 100%; margin-left: 0; overflow-x: auto; }
    .imx-rail-state { flex-wrap: wrap; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .imx-rail-dot--live,
    .imx-tape-pending {
        animation: none;
    }

    /* The accent still has to be visible; it holds steady instead of moving. */
    .imx-row--new::before {
        animation: none;
        opacity: 1;
    }
}


/* ── Save view dialog ───────────────────────────────────────────────────── */

.imx-dlg {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--imx-text);
}

.imx-dlg-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px 12px;
    background: linear-gradient(135deg, var(--imx-ink-900) 0%, var(--imx-ink-800) 100%);
    color: #F1F5F9;
}

.imx-dlg-kicker {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--imx-accent);
}

.imx-dlg-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.imx-dlg-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.imx-dlg-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--imx-text-dim);
}

.imx-dlg-input {
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--imx-line);
    border-radius: 3px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.imx-dlg-input:focus-visible {
    outline: 2px solid var(--imx-blue);
    outline-offset: 1px;
}

.imx-dlg-summary {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--imx-text-dim);
    line-height: 1.5;
}

.imx-dlg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--imx-text);
    margin-top: 4px;
    cursor: pointer;
}

.imx-dlg-error {
    margin: 2px 0 0;
    font-size: 12px;
    color: #B91C1C;
}

.imx-dlg-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--imx-line-soft);
}

.imx-dlg-spacer { flex: 1 1 auto; }

.imx-dlg-btn {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--imx-text);
    background: #F7FAFE;
    border: 1px solid var(--imx-line);
    border-radius: 3px;
    padding: 7px 14px;
    cursor: pointer;
}

.imx-dlg-btn:hover { background: #EFF6FF; border-color: #C7DBF6; }

.imx-dlg-btn--primary {
    background: var(--imx-blue);
    border-color: var(--imx-blue);
    color: #FFFFFF;
}

.imx-dlg-btn--primary:hover { background: #1D4ED8; border-color: #1D4ED8; }

.imx-dlg-btn--danger { color: #B91C1C; border-color: #F0D2D2; background: #FEF6F6; }
.imx-dlg-btn--danger:hover { background: #FDECEC; border-color: #E5B4B4; }