/* ======================================================================
   Whale feed filter bar — the control the page is for.

   It rides at the top of the viewport while the feed scrolls, so the answer
   to "show me SOL" is never more than a glance away. Colour here is state,
   never decoration: an accent-filled chip means ON, a dimmed dot means a kind
   of move is excluded, buys are mint and sells are red because that is what
   they are everywhere else on this page.

   Tokens: public/css/terminal-tokens.css.
   ====================================================================== */

/* The four markets a big move can trade in, and the one colour each wears
   wherever it appears. Declared here because the filter bar is where a reader
   learns the vocabulary; feed-row.css reads the SAME variables for the tag on
   every row, so a chip and its rows can never drift apart.

   NOT --tt-down and NOT --tt-up. Those two hues mean SIDE on this page: they
   colour the buy/sell badge and the size figure on the very same row. While
   one type wore the sell red, a red row could be a sell, a forced close, or
   both, and colour stopped meaning one thing. Change them HERE only. */
:root {
    --cw-t-spot: var(--tt-sky, #2FB1E6);
    --cw-t-perp: var(--tt-gold, #F7C11E);
    --cw-t-liquidation: #FF8A5C;
    --cw-t-option: #B695E8;

    /* The SOURCE colours, a separate idea: they paint a row's left edge and
       its venue chip, which say where a move happened, not what it traded. */
    --cw-k-trade: var(--tt-sky, #2FB1E6);
    --cw-k-option: #B695E8;
    --cw-k-liquidation: #FF8A5C;
    --cw-k-onchain: #3BD6C6;
    --cw-k-hl: var(--tt-gold, #F7C11E);
}

.cwfb {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 11px 13px;
    margin: 0 0 16px;
    border: 1px solid var(--tt-border, rgba(255,246,234,0.12));
    border-radius: 14px;
    background: linear-gradient(180deg, #123E60 0%, #0E3454 100%);
    box-shadow: inset 0 1px 0 rgba(255,246,234,0.05);
    transition: border-radius 0.18s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)),
                box-shadow 0.18s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)),
                padding 0.18s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1));
}

/* The one authored moment: the bar tightens and lifts off the feed the
   instant it starts travelling, so "this is pinned" needs no label. */
.cwfb.is-stuck {
    border-top-color: transparent;
    border-radius: 0 0 14px 14px;
    padding-top: 9px;
    padding-bottom: 9px;
    box-shadow: 0 16px 30px -12px rgba(4,16,29,0.75), inset 0 1px 0 rgba(255,246,234,0.05);
}

.cwfb-coinrow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── Coins: the loudest thing in the bar, because picking one is the job ── */
.cwfb-coins {
    display: flex;
    align-items: center;
    gap: 7px;
    /* Picking coins is the job, so the rail takes the row's spare width before
       anything else does. It is also the one control with no ceiling, so it
       scrolls, and the fade on its right edge says there is more: a rail that
       simply stopped mid-chip read as a broken row rather than a scroll. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,246,234,0.22) transparent;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
}
.cwfb-coins::-webkit-scrollbar { height: 5px; }
.cwfb-coins::-webkit-scrollbar-track { background: transparent; }
.cwfb-coins::-webkit-scrollbar-thumb { background: rgba(255,246,234,0.2); border-radius: 999px; }
.cwfb-coins > * { flex: none; }

.cwfb-coin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(255,246,234,0.18);
    background: rgba(255,246,234,0.045);
    color: var(--tt-text, #FFF6EA);
    font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s var(--tt-ease-out, ease-out),
                border-color 0.14s var(--tt-ease-out, ease-out),
                color 0.14s var(--tt-ease-out, ease-out),
                transform 0.14s var(--tt-ease-out, ease-out);
}
.cwfb-coin:hover { border-color: rgba(238,90,44,0.55); background: rgba(238,90,44,0.1); }
.cwfb-coin.is-on {
    background: var(--tt-accent, #EE5A2C);
    border-color: var(--tt-accent, #EE5A2C);
    /* Deep warm ink, not cream: cream on #EE5A2C measures 3.2:1 and this is
       14px text. This ink measures 5.4:1 and matches the house's other
       accent-filled controls. */
    color: #180A03;
    box-shadow: 0 3px 12px -4px rgba(238,90,44,0.7);
}
.cwfb-coin.is-on:hover { background: #F2683C; border-color: #F2683C; }
.cwfb-coin:active { transform: translateY(1px); }
.cwfb-coin-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-right: -5px;
    border: 0;
    border-radius: 50%;
    background: rgba(24,10,3,0.22);
    color: inherit;
    font-style: normal;
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}
.cwfb-coin-x:hover { opacity: 1; background: rgba(24,10,3,0.4); }

/* ── A picked coin, and whether it is also SAVED ──
   Two different ideas share one pill, so the pill holds two controls. Picking
   a coin filters what is on screen and is free to everyone; saving one puts it
   on the account that feeds alerts and the morning note, and that list has a
   size. The star says which of the picked coins is on that list, so a reader
   can see the difference instead of being told about it. */
.cwfb-chip {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,246,234,0.18);
    background: rgba(255,246,234,0.045);
    color: var(--tt-text, #FFF6EA);
    overflow: hidden;
    transition: background 0.14s var(--tt-ease-out, ease-out),
                border-color 0.14s var(--tt-ease-out, ease-out);
}
.cwfb-chip.is-on {
    background: var(--tt-accent, #EE5A2C);
    border-color: var(--tt-accent, #EE5A2C);
    color: #180A03;
    box-shadow: 0 3px 12px -4px rgba(238,90,44,0.7);
}
.cwfb-chip:hover { border-color: rgba(238,90,44,0.55); }
.cwfb-chip.is-on:hover { background: #F2683C; border-color: #F2683C; }
/* Inside the pill the two controls carry no chrome of their own: one object,
   two targets, no second border drawn through the middle of it. */
.cwfb-chip .cwfb-coin {
    border: 0; background: none; box-shadow: none; height: 100%;
    padding: 0 11px 0 3px; color: inherit;
}
.cwfb-chip .cwfb-coin:hover { background: rgba(24,10,3,0.12); }
.cwfb-chip .cwfb-coin:active { transform: none; }
.cwfb-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 25px; height: 100%; flex: none;
    border: 0; background: none; color: inherit;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    opacity: 0.42;
    transition: opacity 0.14s, background 0.14s;
}
.cwfb-star:hover { opacity: 1; background: rgba(24,10,3,0.16); }
.cwfb-star.is-saved { opacity: 1; color: var(--tt-gold, #F7C11E); }
.cwfb-chip.is-on .cwfb-star.is-saved { color: #3A1200; }
.cwfb-star:focus-visible, .cwfb-chip .cwfb-coin:focus-visible {
    outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: -2px;
}

/* ── Add a coin: a real search field, always open ── */
.cwfb-add {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 176px;
}
.cwfb-add > i {
    position: absolute;
    left: 11px;
    font-size: 0.95rem;
    color: var(--tt-text-dim-text, #93AEC4);
    pointer-events: none;
}
.cwfb-add-input {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,246,234,0.16);
    background: rgba(7,30,51,0.72);
    color: var(--tt-text, #FFF6EA);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.84rem;
    font-weight: 600;
    transition: border-color 0.14s, background 0.14s;
}
.cwfb-add-input::placeholder { color: var(--tt-text-dim-text, #93AEC4); font-weight: 500; }
.cwfb-add-input:hover { border-color: rgba(238,90,44,0.42); }
.cwfb-add-input:focus {
    outline: none;
    border-color: var(--tt-accent, #EE5A2C);
    background: rgba(7,30,51,0.95);
    box-shadow: 0 0 0 3px rgba(238,90,44,0.18);
}

/* ── The coin suggestions ──
   Ours, not the browser's, so it wears the bar's own materials: the same
   panel, the same border, the same accent on the row in hand. It hangs off
   .cwfb-add (position: relative) directly under the box, and sits above the
   answer strip below the bar. */
.cwfb-sug {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 45;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 244px;
    overflow-y: auto;
    border: 1px solid var(--tt-border, rgba(255,246,234,0.12));
    border-radius: 12px;
    background: linear-gradient(180deg, #123E60 0%, #0B2E4C 100%);
    box-shadow: 0 18px 36px -10px rgba(4,16,29,0.75);
    scrollbar-width: thin;
}
.cwfb-sug-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--tt-display, system-ui, sans-serif);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--tt-text, #FFF6EA);
}
/* One element around the whole symbol, so the row's gap cannot open between
   the marked part and the rest of the name. */
.cwfb-sug-sym { white-space: nowrap; }
/* The typed part, tinted inside the name. */
.cwfb-sug-item b { color: var(--tt-accent-text, #FF8A5C); font-weight: 800; }
.cwfb-sug-item:hover { background: rgba(238,90,44,0.14); }
.cwfb-sug-item.is-on {
    background: var(--tt-accent, #EE5A2C);
    color: #FFF6EA;
    box-shadow: inset 0 0 0 1px rgba(255,246,234,0.22);
}
.cwfb-sug-item.is-on b { color: #FFF6EA; }

/* ── Why a coin did not stick ──
   One line, under the coins, in the colour of a refusal rather than an error
   banner: the pick failed, the page did not. Hidden until there is a reason. */
.cwfb-msg {
    margin: 8px 0 0;
    padding: 0 2px;
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tt-down, #FA5772);
}
.cwfb-msg-link {
    color: var(--tt-accent, #EE5A2C);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}
.cwfb-msg-link:hover { color: var(--tt-text, #FFF6EA); }

/* ── The scope chip every panel under the feed wears ──
   Two or three words next to a panel heading, saying which coins its rows are
   about. One component so seven panels cannot drift into seven sentences. */
.cw-scope {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(238,90,44,0.16);
    border: 1px solid rgba(238,90,44,0.42);
    color: var(--tt-accent, #EE5A2C);
    font-family: var(--tt-mono, ui-monospace, monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
    /* .cw-beat-head is space-between: without this the chip drifts to the
       middle instead of sitting against the heading it qualifies. */
    margin-right: auto;
}

/* ── Coins the History tab draws, when several are picked ──
   Not a coin picker: it offers only what the bar already picked, because one
   chart draws one coin at a time. */
.cw-scope-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cw-scope-chips:not(:empty) { margin-bottom: 10px; }

/* ── Quick actions on the picked coin ── */
.cwfb-quick { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.cwfb-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,246,234,0.16);
    background: rgba(7,30,51,0.6);
    color: var(--tt-text-muted, #A9C2D6);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.cwfb-quick-btn i { font-size: 1rem; }
.cwfb-quick-btn:hover:not(:disabled) { color: var(--tt-text, #FFF6EA); border-color: rgba(238,90,44,0.5); background: rgba(238,90,44,0.12); }
.cwfb-quick-btn:disabled { opacity: 0.38; cursor: default; }
.cwfb-quick-btn.is-armed { color: var(--tt-gold, #F7C11E); border-color: rgba(247,193,30,0.5); background: rgba(247,193,30,0.12); }

/* ── Live state, count ── */
.cwfb-status { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-left: 2px; }

/* ── Row 2: what counts as a move ── */
.cwfb-facets {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(255,246,234,0.08);
}
.cwfb-sheethead { display: none; }

.cwfb-types { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cwfb-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 31px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,246,234,0.14);
    background: transparent;
    color: var(--tt-text-dim-text, #93AEC4);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.775rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.cwfb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cwfb-kind, #93AEC4);
    opacity: 0.28;
    transition: opacity 0.14s, box-shadow 0.14s;
}
.cwfb-type.is-on {
    color: var(--tt-text, #FFF6EA);
    border-color: color-mix(in srgb, var(--cwfb-kind, #93AEC4) 55%, transparent);
    background: color-mix(in srgb, var(--cwfb-kind, #93AEC4) 14%, transparent);
}
.cwfb-type.is-on .cwfb-dot { opacity: 1; box-shadow: 0 0 8px -1px var(--cwfb-kind, #93AEC4); }
.cwfb-type:hover { color: var(--tt-text, #FFF6EA); }

/* The four types, and the dot each one wears on its own rows. */
.cwfb-type[data-type="spot"]        { --cwfb-kind: var(--cw-t-spot); }
.cwfb-type[data-type="perp"]        { --cwfb-kind: var(--cw-t-perp); }
.cwfb-type[data-type="liquidation"] { --cwfb-kind: var(--cw-t-liquidation); }
.cwfb-type[data-type="option"]      { --cwfb-kind: var(--cw-t-option); }

/* ── Segmented controls: one inset track, one lit segment ── */
.cwfb-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(4,20,36,0.55);
    border: 1px solid rgba(255,246,234,0.08);
}
.cwfb-segbtn {
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tt-text-dim-text, #93AEC4);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.755rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s, background 0.14s;
}
.cwfb-seg-num .cwfb-segbtn { font-family: var(--tt-mono, ui-monospace, monospace); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.cwfb-segbtn:hover { color: var(--tt-text, #FFF6EA); }
.cwfb-segbtn.is-on { background: #1C5079; color: var(--tt-text, #FFF6EA); box-shadow: inset 0 1px 0 rgba(255,246,234,0.09); }
.cwfb-segbtn.is-buy.is-on { background: var(--tt-up-soft, rgba(55,217,138,0.13)); color: var(--tt-up, #37D98A); box-shadow: inset 0 0 0 1px rgba(55,217,138,0.4); }
.cwfb-segbtn.is-sell.is-on { background: var(--tt-down-soft, rgba(250,87,114,0.13)); color: var(--tt-down-text, #FF7E8E); box-shadow: inset 0 0 0 1px rgba(250,87,114,0.4); }

/* ── Where it happened ── */
.cwfb-menu { position: relative; display: inline-flex; align-items: center; }
.cwfb-select {
    height: 32px;
    padding: 0 28px 0 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,246,234,0.14);
    background: rgba(4,20,36,0.55);
    color: var(--tt-text-muted, #A9C2D6);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.775rem;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    max-width: 170px;
    transition: color 0.14s, border-color 0.14s;
}
.cwfb-select:hover { color: var(--tt-text, #FFF6EA); border-color: rgba(238,90,44,0.42); }
.cwfb-select.is-on { color: var(--tt-text, #FFF6EA); border-color: rgba(238,90,44,0.6); background: rgba(238,90,44,0.12); }
.cwfb-menu-caret { position: absolute; right: 9px; font-size: 0.95rem; color: var(--tt-text-dim-text, #93AEC4); pointer-events: none; }

.cwfb-tail { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cwfb-clear {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(238,90,44,0.45);
    background: rgba(238,90,44,0.12);
    color: var(--tt-accent-text, #FF8A5C);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.cwfb-clear:hover { background: rgba(238,90,44,0.22); color: var(--tt-text, #FFF6EA); }
.cwfb-facets .cwfb-sound { height: 32px; font-size: 0.775rem; }
/* The alert button keeps its gold identity but stops out-shouting the coins:
   filled, it was the loudest object in a bar whose whole point is that the
   coin chips read first. */
.cwfb .cw-alertbar-btn {
    flex: none;
    height: 36px;
    background: rgba(247,193,30,0.13);
    border: 1px solid rgba(247,193,30,0.5);
    color: var(--tt-gold, #F7C11E);
    font-size: 0.775rem;
    box-shadow: none;
}
.cwfb .cw-alertbar-btn:hover { background: rgba(247,193,30,0.24); color: #FFDF7A; filter: none; }

/* The Filters button and its sheet exist on small screens only. */
.cwfb-sheetbtn { display: none; }
.cwfb-scrim { display: none; }

.cwfb button:focus-visible,
.cwfb select:focus-visible,
.cwfb-coin-x:focus-visible { outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: 2px; }

/* ── Under 760px: coins keep their own line, everything else is a sheet ── */
@media (max-width: 759.98px) {
    .cwfb { padding: 9px 10px; gap: 8px; border-radius: 12px; }
    .cwfb.is-stuck { border-radius: 0 0 12px 12px; }
    /* Two lines, placed rather than wrapped: what you type on top, the coins
       you picked below. Nothing gets a line of its own. */
    .cwfb-coinrow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-areas: "add quick alerts sheet" "coins coins coins coins" "status status status status";
        gap: 8px 7px;
        align-items: center;
    }
    .cwfb .cw-alertbar-btn { grid-area: alerts; height: 34px; padding: 0 10px; }
    .cwfb .cw-alertbar-btn > span:first-of-type { display: none; }
    /* Nothing to act on yet: an icon-only button that cannot be pressed is
       clutter in the row's prime slot. */
    .cwfb-quick-btn:disabled { display: none; }
    /* 132px is what "Add a coin" needs beside its glyph. Below it the
       placeholder truncated to "Add a", which is not a sentence. */
    .cwfb-add { grid-area: add; width: auto; min-width: 132px; }
    .cwfb-quick { grid-area: quick; margin-left: 0; }
    .cwfb-quick-btn span { display: none; }
    .cwfb-quick-btn { padding: 0 10px; }
    .cwfb-coins { grid-area: coins; min-width: 0; width: auto; }
    /* Its own line: whether the feed is running is a sentence, not a chip,
       and squeezed beside the coins it ran off the side of the phone. */
    .cwfb-status { grid-area: status; margin-left: 0; justify-self: start; flex-wrap: wrap; row-gap: 5px; }
    .cwfb-status .cw-live { white-space: normal; }
    .cwfb-status .cw-hero-count { font-size: 0.6rem; }
    .cw-history-chip { margin-left: 0; }
    .cwfb-sheetbtn {
        grid-area: sheet;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 13px;
        border-radius: 10px;
        border: 1px solid rgba(255,246,234,0.18);
        background: rgba(7,30,51,0.6);
        color: var(--tt-text, #FFF6EA);
        font-family: var(--tt-sans, system-ui, sans-serif);
        font-size: 0.78rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }
    .cwfb-sheetbtn i { font-size: 1rem; }
    .cwfb-sheetbtn b {
        background: var(--tt-accent, #EE5A2C);
        color: #180A03;
        font-size: 0.63rem;
        font-weight: 800;
        padding: 1px 6px;
        border-radius: 999px;
        min-width: 16px;
        text-align: center;
    }
    .cwfb-sheetbtn b:empty { display: none; }

    .cwfb-facets {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        max-height: 82vh;
        overflow-y: auto;
        padding: 14px 16px calc(56px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tt-border, rgba(255,246,234,0.12));
        border-radius: 18px 18px 0 0;
        background: linear-gradient(180deg, #123E60 0%, #0B2E4C 100%);
        box-shadow: 0 -18px 40px -12px rgba(4,16,29,0.8);
        transform: translateY(102%);
        visibility: hidden;
        transition: transform 0.24s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)), visibility 0.24s;
    }
    .cwfb-facets.is-open { transform: translateY(0); visibility: visible; }
    /* Two floating docks sit at the bottom of every page: the feedback
       launcher (#cl-fb-launcher, bottom-left) and the journey pill
       (#cl-checklist, bottom-right). Both land on top of the sheet and its
       scrim, which makes the brightest object on a modal something with no
       part in it. They come back the moment the sheet closes. */
    body.cw-sheet-open #cl-fb-launcher,
    body.cw-sheet-open #cl-checklist { display: none; }
    .cwfb-sheethead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: var(--tt-display, system-ui, sans-serif);
        font-size: 1rem;
        font-weight: 700;
        color: var(--tt-text, #FFF6EA);
    }
    .cwfb-sheetclose { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,246,234,0.08); color: var(--tt-text, #FFF6EA); font-size: 1.1rem; cursor: pointer; }
    .cwfb-facets > .cwfb-seg,
    .cwfb-facets > .cwfb-menu { align-self: flex-start; }
    .cwfb-tail { margin-left: 0; flex-wrap: wrap; }
    .cwfb-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(4,16,29,0.62);
        backdrop-filter: blur(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cwfb, .cwfb-facets, .cwfb-coin, .cwfb-type, .cwfb-dot { transition: none; }
    .cwfb-coin:active { transform: none; }
}

/* ======================================================================
   The answer strip — six readings on the coin the bar is pointed at.

   It is the same object as the bar: flush against it, same panel family,
   one shade darker so the controls stay the brighter half. Every reading is
   drawn before it is written (a split bar, a share meter, a row of outcome
   dots), and a reading we do not have is a dot, never a zero.
   ====================================================================== */

.cw-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: -16px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--tt-border, rgba(255,246,234,0.12));
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #0E3454 0%, #0B2C49 100%);
    overflow-x: auto;
    scrollbar-width: none;
}
.cw-strip::-webkit-scrollbar { display: none; }
.cw-strip > * { flex: none; }

/* Divider lines instead of six boxes: the strip is one reading in six parts. */
.cw-strip > * + * {
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px solid rgba(255,246,234,0.09);
}

.cw-strip-scope {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 92px;
}
.cw-strip-coin {
    font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tt-text, #FFF6EA);
    line-height: 1.05;
}
/* WHICH kind the numbers count. Reads under the coin, above the window, in the
   dim ramp this repo ships for small type (5.34:1), never the 3.49:1 one. */
.cw-strip-kind {
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--tt-text-dim-text, #93AEC4);
    line-height: 1.15;
}
.cw-strip-win {
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-text-dim, #6E8CA3);
}

/* ── The split, drawn ── */
.cw-strip-flow { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 210px; }
.cw-strip-bar {
    display: flex;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--tt-down, #FA5772);
}
.cw-strip-bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--tt-up, #37D98A);
    /* Scaled, not resized: the split moves every time the coin does, and a
       width transition relayouts the row on each frame. */
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.4s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1));
}
/* Nothing measured yet: a full mint bar would claim every dollar was a buy. */
.cw-strip-bar.is-empty { background: rgba(255,246,234,0.1); }
.cw-strip-bar.is-empty i { transform: scaleX(0) !important; }
.cw-strip-pair { display: flex; gap: 18px; }

.cw-strip-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    text-align: left;
}
.cw-strip-v {
    font-family: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--tt-text, #FFF6EA);
    font-variant-numeric: tabular-nums;
}
.cw-strip-l {
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tt-text-muted, #A9C2D6);
    /* A short label cut in half by the scroll edge reads as a rendering bug.
       It stays on one line; the fade at the edge is what says "keep going". */
    white-space: nowrap;
}
.cw-strip-hit .cw-strip-l { white-space: normal; }
.cw-strip-cell.is-buy .cw-strip-v { color: var(--tt-up, #37D98A); }
.cw-strip-cell.is-sell .cw-strip-v { color: var(--tt-down, #FA5772); }
/* Absent reads dim and small, so a dot can never be mistaken for a figure. */
.cw-strip-cell.is-absent .cw-strip-v { color: var(--tt-text-dim, #6E8CA3); }
.cw-strip-cell.is-absent .cw-strip-l { color: var(--tt-text-dim, #6E8CA3); }

/* ── How unusual: colour is the state, the number is the claim ── */
.cw-strip-mult { min-width: 92px; }
.cw-strip-mult .cw-strip-v { font-size: 1.34rem; }
.cw-strip-mult.is-hot .cw-strip-v { color: var(--tt-accent, #EE5A2C); }
.cw-strip-mult.is-quiet .cw-strip-v { color: var(--tt-text-muted, #A9C2D6); }

/* ── Where the money is: exchanges, on-chain, Hyperliquid ── */
.cw-strip-where { min-width: 146px; }
.cw-strip-where .cw-strip-v { font-family: var(--tt-sans, system-ui, sans-serif); font-size: 0.92rem; }
/* One segment per place with dollars in the window, widest first. A place
   with none has no segment: the bar draws what was measured and nothing else.
   The three colours are the SOURCE colours declared at the top of this file,
   the same ones that paint a row's left edge and its venue chip, so the meter
   and the rows it is made of cannot drift apart. */
.cw-strip-meter {
    display: flex;
    gap: 1px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,246,234,0.1);
    overflow: hidden;
}
.cw-strip-meter i {
    display: block;
    height: 100%;
    flex: none;
    background: var(--cw-k-trade, #2FB1E6);
    transition: width 0.4s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1));
}
.cw-strip-meter i[data-place="onchain"] { background: var(--cw-k-onchain, #3BD6C6); }
.cw-strip-meter i[data-place="hyperliquid"] { background: var(--cw-k-hl, #F7C11E); }

/* ── Tracked wallets: a count you can act on ── */
.cw-strip-wallets {
    align-items: flex-start;
    min-width: 104px;
    border-radius: 0;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    font: inherit;
    transition: color 0.15s ease;
}
.cw-strip-wallets:hover .cw-strip-v,
.cw-strip-wallets:hover .cw-strip-l { color: var(--tt-accent, #EE5A2C); }
/* A locked coin: the cells are dots and the Pro mark says why, so nobody
   reads a plan boundary as a broken read. */
.cw-strip .pro-tag { margin-left: 6px; vertical-align: 1px; }

.cw-strip-wallets .cw-strip-best {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(247,193,30,0.16);
    color: var(--tt-gold, #F7C11E);
    font-family: var(--tt-sans, system-ui, sans-serif);
    font-size: 0.6rem;
    font-weight: 700;
    vertical-align: 2px;
}

/* ── What happened after past moves like this ── */
.cw-strip-hit { max-width: 262px; }
.cw-strip-dots { display: flex; gap: 3px; align-items: center; }
.cw-strip-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,246,234,0.16);
}
.cw-strip-dots i.is-up { background: var(--tt-up, #37D98A); }
.cw-strip-hit .cw-strip-n { color: var(--tt-text, #FFF6EA); font-weight: 700; }

/* The one authored moment: a new coin's numbers arrive rather than swap. */
.cw-strip.is-fresh .cw-strip-v,
.cw-strip.is-fresh .cw-strip-l,
.cw-strip.is-fresh .cw-strip-dots { animation: cw-strip-in 0.34s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)) both; }
@keyframes cw-strip-in {
    from { opacity: 0; transform: translateY(4px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
}

.cw-strip button:focus-visible { outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: 2px; }

/* ── Phone: the strip WRAPS, it does not scroll off ─────────────────────
   Six readings in one horizontal scroller left the third cell cut through the
   middle of "x its normal" and three readings entirely off screen, with a 26px
   edge fade as the only sign there was more. An answer the reader cannot see
   is not an answer, so on a phone the strip becomes two columns and every
   reading is on screen at once. Flow keeps the full width because its bar is a
   proportion and a half-width proportion reads as a different number. */
@media (max-width: 759.98px) {
    .cw-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 14px;
        margin: -16px 0 14px;
        padding: 12px 12px 13px;
        border-radius: 0 0 12px 12px;
        overflow: visible;
    }
    /* The vertical rules were a one-line reading's divider. Rows separate the
       readings now, so a rule between wrapped cells would group the wrong two. */
    .cw-strip > * + * { padding-left: 0; margin-left: 0; border-left: 0; }
    .cw-strip > * { min-width: 0; }
    .cw-strip-flow { grid-column: 1 / -1; min-width: 0; }
    .cw-strip-pair { gap: 16px; }
    .cw-strip-v { font-size: 0.92rem; }
    .cw-strip-mult { min-width: 0; }
    .cw-strip-mult .cw-strip-v { font-size: 1.15rem; }
    .cw-strip-where { min-width: 0; }
    .cw-strip-hit { max-width: none; }
    .cw-strip-hit .cw-strip-l { white-space: normal; }
    .cw-strip-l { white-space: normal; }
}

/* ── Laptop and tablet: the strip WRAPS to two rows ─────────────────────
   Six readings on one line need more width than 1100px leaves, so the last one
   was cut through the middle of a word ("higher 24h la") with only a scroll
   edge as the sign there was more. Three columns, two rows, nothing clipped and
   nothing off screen. The phone rule below takes over at 760px with two. */
@media (min-width: 760px) and (max-width: 1100px) {
    .cw-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 18px;
        overflow: visible;
    }
    /* The vertical rules divided a ONE-LINE reading. Across wrapped rows they
       would group the wrong two cells, so the rows do the separating. */
    .cw-strip > * + * { padding-left: 0; margin-left: 0; border-left: 0; }
    .cw-strip > * { min-width: 0; }
    .cw-strip-flow { min-width: 0; }
    .cw-strip-mult, .cw-strip-where, .cw-strip-wallets { min-width: 0; }
    .cw-strip-hit { max-width: none; }
    /* Nothing may end mid-word: a label that runs long takes a second line. */
    .cw-strip-l { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .cw-strip.is-fresh .cw-strip-v,
    .cw-strip.is-fresh .cw-strip-l,
    .cw-strip.is-fresh .cw-strip-dots { animation: none; }
    .cw-strip-bar i, .cw-strip-meter i { transition: none; }
}

/* ── The chip beside the live badge ───────────────────────────────────────
   One tap out of whatever this reader's feed is missing: signing in for a
   feed that moves, or Pro for the history behind the 12 hour line. */
.cw-history-chip {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px; padding: 3px 9px;
    border: 1px solid rgba(247, 193, 30, 0.34);
    border-radius: 999px; background: rgba(247, 193, 30, 0.08);
    color: var(--tt-text, #FFF6EA);
    font: inherit; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cw-history-chip:hover { background: rgba(247, 193, 30, 0.16); color: var(--tt-text, #FFF6EA); }
.cw-history-chip i { font-size: 0.8rem; color: var(--tt-gold, #F7C11E); }
.cw-history-chip .pro-tag { margin-left: 2px; }