/* Global search: the navbar trigger and the ⌘K palette (src/assets/js/global-search.js).
 *
 * Loaded by partials/navbar.ejs on every page, standalone pages included, so
 * every value is a --tt-* token with its literal as the fallback (a standalone
 * page may not load terminal-tokens.css). Surfaces follow DESIGN.md: panel,
 * raised for the active row, one hairline, Lifted shadow because the dialog
 * floats, no glow, no entrance animation. Wallet marks are wallet violet;
 * the only accent is the caret and the focus ring. */

:root {
    --cls-panel: var(--tt-panel-solid, #121111);
    --cls-raised: var(--tt-raised, #1A1818);
    --cls-sunk: var(--tt-input-bg, #0F0E0E);
    --cls-line: rgba(244, 241, 236, 0.09);
    --cls-edge: rgba(244, 241, 236, 0.14);
    --cls-text: var(--tt-text, #F4F1EC);
    --cls-muted: var(--tt-text-muted, #A8A29B);
    --cls-dim: var(--tt-text-dim-text, #8A847C);
    --cls-accent: var(--tt-accent, #EE5A2C);
    --cls-up: var(--tt-up, #37D98A);
    --cls-down: var(--tt-down-text, #FF7E8E);
    --cls-violet: #A78BFA;
    --cls-mono: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
    --cls-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cls-display: var(--tt-display, 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif);
    --cls-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Triggers in the bar ─────────────────────────────────────────────── */
.cl-navbar .cl-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    min-width: 212px;
    padding: 0 6px 0 10px;
    margin-right: 6px;
    border: 1px solid var(--cls-edge);
    border-radius: 6px;
    background: var(--cls-sunk);
    color: var(--cls-dim);
    font-family: var(--cls-sans);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--cls-fast), color var(--cls-fast);
}
.cl-navbar .cl-search-trigger i { font-size: 15px; color: var(--cls-muted); }
.cl-navbar .cl-search-trigger .cl-search-trigger-text { flex: 1; text-align: left; }
.cl-navbar .cl-search-trigger:hover { border-color: rgba(244, 241, 236, 0.24); color: var(--cls-muted); }
.cl-search-kbd {
    font-family: var(--cls-mono);
    font-size: 10.5px;
    color: var(--cls-dim);
    padding: 3px 6px;
    border: 1px solid var(--cls-line);
    border-radius: 4px;
    background: rgba(244, 241, 236, 0.03);
}
/* A narrow desktop bar keeps the key hint and drops the word. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .cl-navbar .cl-search-trigger { min-width: 0; }
    .cl-navbar .cl-search-trigger .cl-search-trigger-text { display: none; }
}

.cl-navbar .cl-search-mob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cls-text);
    font-size: 1.25rem;
    cursor: pointer;
}
.cl-navbar .cl-search-mob ~ .cl-nav-mobile-signup { margin-left: 4px; }
@media (min-width: 992px) { .cl-navbar .cl-search-mob { display: none; } }

/* ── The palette ─────────────────────────────────────────────────────── */
html.cls-locked, html.cls-locked body { overflow: hidden; }
.cls-root[hidden] { display: none !important; }
.cls-root {
    position: fixed;
    inset: 0;
    z-index: 10050; /* above the ask dock (9999): this is a modal */
    font-family: var(--cls-sans);
    color: var(--cls-text);
}
.cls-scrim { position: absolute; inset: 0; background: rgba(7, 7, 7, 0.66); }
.cls-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100% - 32px));
    max-height: min(560px, 76vh);
    margin: 10vh auto 0;
    background: var(--cls-panel);
    border: 1px solid var(--cls-edge);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.cls-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--cls-line);
    flex: none;
}
.cls-bar-icon { font-size: 18px; color: var(--cls-muted); }
.cls-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cls-text);
    caret-color: var(--cls-accent);
    font-family: var(--cls-sans);
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}
.cls-input::placeholder { color: var(--cls-dim); }
.cls-input:focus, .cls-input:focus-visible { outline: none !important; box-shadow: none; }
.cls-clear, .cls-esc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--cls-dim);
    cursor: pointer;
    font-family: var(--cls-sans);
}
.cls-clear { width: 32px; height: 32px; font-size: 17px; }
.cls-clear:hover { color: var(--cls-muted); }
.cls-esc { height: 24px; padding: 0; }
.cls-esc-key {
    font-family: var(--cls-mono);
    font-size: 10.5px;
    padding: 3px 6px;
    border: 1px solid var(--cls-line);
    border-radius: 4px;
}
.cls-esc-word { display: none; font-size: 14px; color: var(--cls-muted); }

.cls-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 6px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 241, 236, 0.16) transparent;
}
.cls-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cls-dim);
}
.cls-clear-recent {
    border: 0;
    background: transparent;
    color: var(--cls-muted);
    font-family: var(--cls-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 4px;
    cursor: pointer;
}
.cls-clear-recent:hover { color: var(--cls-text); }

.cls-item { position: relative; }
.cls-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    grid-template-areas: "mark main chips end";
    align-items: center;
    column-gap: 12px;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--cls-text) !important;
    text-decoration: none !important;
    transition: background var(--cls-fast);
}
.cls-item.has-aside .cls-row { padding-right: 44px; }
.cls-row.is-active { background: var(--cls-raised); }
.cls-row:focus-visible { outline-offset: -2px; }
.cls-mark { grid-area: mark; }
.cls-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cls-chips { grid-area: chips; display: flex; gap: 4px; align-items: center; justify-content: flex-end; min-width: 0; }
.cls-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 64px; }
.cls-chips:empty { display: none; }

.cls-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cls-sub {
    font-size: 12px;
    color: var(--cls-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cls-mono-text { font-family: var(--cls-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.cls-title.cls-mono-text { font-size: 13px; font-weight: 700; }

.cls-num {
    font-family: var(--cls-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cls-text);
}
.cls-row--wallet .cls-num { font-weight: 800; }
.cls-cap { font-size: 10px; color: var(--cls-dim); letter-spacing: 0.04em; }
.cls-chg {
    font-family: var(--cls-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
}
.cls-chg.is-up { color: var(--cls-up); }
.cls-chg.is-down { color: var(--cls-down); }
.cls-go { color: var(--cls-dim); font-size: 15px; opacity: 0; transition: opacity var(--cls-fast); }
.cls-row.is-active .cls-go { opacity: 1; }

/* Marks: coin = round monogram, stock or index = square monogram,
   wallet = violet face drawn from its address, page = its icon. */
.cls-mark {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.cls-mono {
    border-radius: 999px;
    background: var(--cls-raised);
    border: 1px solid var(--cls-edge);
    font-family: var(--cls-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cls-text);
}
.cls-mono--3 { font-size: 10px; letter-spacing: -0.04em; }
.cls-mono--sq { border-radius: 6px; }
/* Listed only on the venue, no page of ours: the same mark, drawn open. */
.cls-mono--loose { background: transparent; border-style: dashed; border-color: rgba(244, 241, 236, 0.22); color: var(--cls-muted); }
.cls-row.is-active .cls-mono { background: #221F1E; }
.cls-ident {
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.28);
    overflow: hidden;
}
.cls-ident svg { width: 100%; height: 100%; fill: var(--cls-violet); }
.cls-pageicon { color: var(--cls-muted); font-size: 16px; }

.cls-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(244, 241, 236, 0.055);
    color: var(--cls-muted);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cls-chip--hl::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--cls-violet);
    flex: none;
}

.cls-forget {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cls-dim);
    font-size: 16px;
    cursor: pointer;
}
.cls-forget:hover { color: var(--cls-text); background: rgba(244, 241, 236, 0.06); }
.cls-item.has-aside .cls-end { display: none; }

.cls-hint { padding: 18px 12px; font-size: 13px; color: var(--cls-muted); line-height: 1.5; }
.cls-hint b { color: var(--cls-text); font-weight: 700; }

.cls-foot {
    display: flex;
    gap: 16px;
    flex: none;
    padding: 9px 16px;
    border-top: 1px solid var(--cls-line);
    font-size: 10.5px;
    color: var(--cls-dim);
}
.cls-foot kbd i { font-size: 11px; line-height: 1; vertical-align: -1px; }
.cls-foot kbd {
    display: inline-block;
    min-width: 18px;
    margin-right: 3px;
    padding: 1px 4px;
    border: 1px solid var(--cls-line);
    border-radius: 4px;
    background: transparent;
    color: var(--cls-muted);
    font-family: var(--cls-mono);
    font-size: 10.5px;
    text-align: center;
    box-shadow: none;
}
.cls-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Phone: a full-screen sheet ──────────────────────────────────────── */
@media (max-width: 639.98px) {
    .cls-scrim { background: var(--cls-panel); }
    .cls-dialog {
        width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .cls-bar { height: 58px; padding: 0 6px 0 16px; }
    .cls-esc { height: 44px; padding: 0 10px; }
    .cls-esc-key { display: none; }
    .cls-esc-word { display: inline; }
    .cls-foot { display: none; }
    .cls-list { padding: 4px 4px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .cls-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas: "mark main end" "mark chips end";
        row-gap: 4px;
        min-height: 56px;
    }
    .cls-mark { width: 32px; height: 32px; }
    .cls-chips { justify-content: flex-start; flex-wrap: wrap; }
    .cls-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cls-row, .cls-go, .cl-navbar .cl-search-trigger { transition: none; }
}