/* ═══════════════════════════════════════════════════════════════════════════ Command palette. Shape: bottom-anchored. The field sits exactly where the dock's magnifier was, and the results stack UPWARD out of it — so the surface opens under the cursor that summoned it, and the eye never travels to the top of the screen between one keystroke and the next. The dock fades out as it opens; the field takes its place rather than covering it. Colour budget: the accent lime #C6F83C is risk-rail semantics across the product, so in here it appears in exactly two places — the risk-gated dot and a remaining-room value. Selection is a NEUTRAL fill; a lime selection bar would spend the one colour that means "this is about your limits" on "this row is highlighted". Destructive commands take the loss token. Surfaces: the palette mounts on , OUTSIDE `.app`, so it cannot read the `--tm-*` scale (those tokens are scoped per `.app--mode-*` — see the header of terminal.css). It carries its own `--cpal-*` values, set to the same numbers, rather than reaching for tokens that resolve to nothing out here. Density: every height derives from --density-row. The View → Toggle density command flips [data-density] on ; nothing here hardcodes a row height. Numerals: contract codes, counts, sizes and room values render in --mono with tabular figures, so a re-rank never shifts a digit sideways. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* The density scale the app didn't have yet. Other surfaces can derive from the same token as they adopt it. */ --density-row: 44px; --density-gap: var(--space-2); /* The palette's own surface scale — the terminal's numbers, unscoped. */ --cpal-panel: rgba(17, 18, 20, 0.9); --cpal-field: rgba(24, 26, 28, 0.94); --cpal-line: rgba(255, 255, 255, 0.07); --cpal-hair: rgba(255, 255, 255, 0.05); --cpal-sel: rgba(255, 255, 255, 0.06); --cpal-tile: rgba(255, 255, 255, 0.07); --cpal-ease: cubic-bezier(0.32, 0.72, 0, 1); } :root[data-density='compact'] { --density-row: 34px; --density-gap: var(--space-1); } /* The dock steps aside for the field that lands on top of it. Set on by the palette itself, so the rule holds on every page that floats a dock. */ :root[data-cpal='open'] .tm-dock, :root[data-cpal='open'] .tm-dock * { pointer-events: none; } :root[data-cpal='open'] .tm-dock { opacity: 0; transform: translateY(8px); } .tm-dock { transition: opacity 160ms var(--cpal-ease), transform 160ms var(--cpal-ease); } .cpal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center; /* 22px — the dock's own offset from the bottom, so the field lands on it. */ padding: 8vh var(--space-4) 22px; /* Dark enough to be unambiguously modal, sheer enough that the trader can still read the position behind it. That legibility is the requirement. */ background: rgba(6, 8, 10, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 140ms var(--cpal-ease); } .cpal.is-open { opacity: 1; } .cpal[hidden] { display: none; } .cpal__dialog { width: min(700px, 100%); min-height: 0; display: flex; flex-direction: column; gap: 8px; /* Rises out of the dock rather than dropping onto it. */ transform: translateY(10px); transition: transform 180ms var(--cpal-ease); } .cpal.is-open .cpal__dialog { transform: none; } /* ── panel ── */ .cpal__panel { position: relative; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cpal-line); border-radius: 20px; background: var(--cpal-panel); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.045); } /* Brand chip — floats over the top-left, results dissolve beneath it. */ .cpal__chip { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12.5px; font-weight: 500; color: var(--text-1); pointer-events: none; } .cpal__chip-mark { border-radius: 7px; } /* ── field ── */ .cpal__field { display: flex; align-items: center; gap: var(--space-3); padding: 0 18px; border: 1px solid var(--cpal-line); border-radius: 16px; background: var(--cpal-field); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 180ms var(--cpal-ease); } .cpal__field:focus-within { border-color: rgba(255, 255, 255, 0.16); } .cpal__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cpal__input { flex: 1; min-width: 0; height: calc(var(--density-row) + var(--space-3)); border: 0; background: none; color: var(--text-0); font-family: var(--sans); font-size: 16.5px; letter-spacing: -0.01em; outline: none; } .cpal__input::placeholder { color: var(--text-3); } .cpal__hint, .cpal__keys kbd, .cpal__foot kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-11); line-height: 1; padding: 3px 6px; border: 1px solid var(--cpal-line); border-radius: var(--radius-sm); color: var(--text-2); background: rgba(255, 255, 255, 0.04); } /* ── list ── */ .cpal__list { flex: 1; min-height: 0; max-height: min(52vh, 470px); overflow-y: auto; /* Clears the floating chip; the mask fades whatever scrolls under it. */ padding: 52px var(--space-2) var(--space-2); scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent 0, #000 44px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px); } .cpal__list::-webkit-scrollbar { width: 0; } .cpal__group { padding: var(--space-3) 14px var(--space-1); font-size: 12.5px; color: var(--text-3); } .cpal__row { display: flex; align-items: center; gap: 12px; min-height: var(--density-row); padding: 0 12px; border-radius: 12px; cursor: pointer; /* No transition on the row: selection must land the instant the key does. */ } /* Neutral selection — never the risk colour. */ .cpal__row.is-active { background: var(--cpal-sel); box-shadow: inset 0 0 0 1px var(--cpal-hair); } /* ── row parts ── */ /* The leading mark. A row that names a THING wears the filled tile — the logo a futures contract doesn't have. A row that names an ACTION wears the bare glyph, so the two never read as the same kind of result. */ .cpal__avatar { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-3); } .cpal__avatar--tile { border-radius: 999px; background: var(--cpal-tile); color: var(--text-1); } .cpal__avatar svg { width: 16px; height: 16px; } .cpal__avatar--tile svg { width: 15px; height: 15px; } .cpal__row.is-active .cpal__avatar { color: var(--text-1); } .cpal__row.is-active .cpal__avatar--tile { color: var(--text-0); } .cpal__text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; } .cpal__title { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-14); color: var(--text-0); } /* The name beside the code — annotation, not a second title. */ .cpal__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-13); color: var(--text-2); } .cpal__row.is-destructive .cpal__title { color: var(--loss); } /* The risk dot: this command routes through the pre-trade check. The single sanctioned lime in the component, beside remaining room. Corner of the tile, so it costs no column. */ .cpal__risk { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: var(--radius-pill); background: #c6f83c; box-shadow: 0 0 0 2px var(--cpal-panel); } .cpal__detail { flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-12); color: var(--text-2); } /* The venue, right-aligned — where the row would trade, not what you type. */ .cpal__badge { flex: none; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.055); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-11); letter-spacing: 0.02em; color: var(--text-2); } .cpal__keys { flex: none; display: flex; gap: 3px; } .cpal__confirm { flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-11); letter-spacing: 0.04em; color: var(--loss); } .cpal__empty { padding: var(--space-5) var(--space-4); text-align: center; font-size: var(--text-14); color: var(--text-2); } /* ── status + foot ── */ .cpal__status { margin: 0; max-height: 0; overflow: hidden; padding: 0 18px; font-size: var(--text-13); color: var(--text-1); transition: max-height 120ms var(--cpal-ease), padding 120ms var(--cpal-ease); } .cpal__status.is-on { max-height: 60px; padding: var(--space-3) 18px; border-top: 1px solid var(--cpal-hair); } .cpal__status.is-err { color: var(--loss); } /* Remaining-room values are risk semantics — the second sanctioned lime. */ .cpal__detail--risk { color: #c6f83c; } .cpal__foot { display: flex; gap: var(--space-4); padding: 9px 18px; border-top: 1px solid var(--cpal-hair); font-size: var(--text-11); color: var(--text-3); } .cpal__foot span { display: inline-flex; align-items: center; gap: 5px; } .cpal__live, .cpal__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .cpal__trap { position: absolute; width: 1px; height: 1px; opacity: 0; } /* ── quality floor ── */ /* Rows and buttons take a ring. The input doesn't: it is focused the moment the palette opens, and a box drawn around the whole field reads as chrome rather than as focus. Its indicator is the caret plus the lit field border. */ .cpal :focus-visible:not(.cpal__input) { outline: 2px solid var(--text-1); outline-offset: 2px; } @media (max-width: 560px) { .cpal__list { max-height: 46vh; } .cpal__foot span:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { .cpal, .cpal__dialog, .cpal__field, .cpal__status, .tm-dock { transition: none; } .cpal__dialog { transform: none; } :root[data-cpal='open'] .tm-dock { transform: none; } }