/* ======================================================================
   Hyperliquid lane — named-whale board, coin crowding, wallet-attributed
   tape and the per-wallet profile page.

   Everything here is a GRAPHIC first: a book is a bar, a long/short split is
   a split bar, distance to liquidation is a meter. Numbers are the only text
   that earns its place. Tokens come from terminal-tokens.css.
   ====================================================================== */

/* ── section shell ─────────────────────────────────────────────────── */
.hl-sec { margin: 8px 0 26px; }
.hl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hl-sec-title { font-size: 1.05rem; font-weight: 800; color: var(--tt-text, #FFF6EA); margin: 0; letter-spacing: -0.01em; }
.hl-sec-sub { font-size: 0.66rem; color: var(--tt-text-dim, #6E8CA3); margin: 0 0 12px; }
.hl-venue-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(47,177,230,0.12); border: 1px solid rgba(47,177,230,0.35);
    color: var(--tt-sky, #2FB1E6); font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
}
.hl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tt-up, #37D98A); animation: hl-pulse 2s ease-in-out infinite; }
@keyframes hl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hl-state { text-align: center; padding: 26px 12px; color: var(--tt-text-dim, #6E8CA3); font-size: 0.75rem; }

/* Container query: this grid lives inside the page's main column, which is
   narrower than the viewport once the rail is present. */
.hl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@container (min-width: 680px) { .hl-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

.hl-card { border-radius: 14px; padding: 14px 16px; }
.hl-card-title {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--tt-text-muted, #A9C2D6); margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hl-card-note { font-size: 0.58rem; font-weight: 600; color: var(--tt-text-dim, #6E8CA3); text-transform: none; letter-spacing: 0; }

/* ── wallet chip: the identity token, used everywhere ──────────────── */
.hl-wallet {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--tt-mono, monospace); font-size: 0.7rem; font-weight: 700;
    color: color-mix(in srgb, var(--tt-wallet, #A78BFA) 65%, white);
    background: color-mix(in srgb, var(--tt-wallet, #A78BFA) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tt-wallet, #A78BFA) 22%, transparent);
    padding: 1px 7px; border-radius: 6px; text-decoration: none; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
a.hl-wallet:hover { background: color-mix(in srgb, var(--tt-wallet, #A78BFA) 20%, transparent); border-color: color-mix(in srgb, var(--tt-wallet, #A78BFA) 50%, transparent); color: color-mix(in srgb, var(--tt-wallet, #A78BFA) 37%, white); }

/* ── crowding: one split bar per coin ──────────────────────────────── */
.hl-crowd { display: flex; flex-direction: column; gap: 9px; }
.hl-crowd-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 104px; gap: 10px; align-items: center; }
.hl-crowd-coin { font-family: var(--tt-mono, monospace); font-size: 0.74rem; font-weight: 800; color: var(--tt-text, #FFF6EA); }
.hl-split { position: relative; display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: rgba(7,30,51,0.7); }
.hl-split-long { background: var(--tt-up, #37D98A); }
.hl-split-short { background: var(--tt-down, #FA5772); }
/* The share is stated in the meta column, not overlaid on the bar: centred over
   a 11/89 split the label lands on the opposite colour and reads as a mislabel. */
.hl-crowd-meta { display: flex; flex-direction: column; gap: 1px; font-size: 0.58rem; color: var(--tt-text-dim, #6E8CA3); text-align: right; font-variant-numeric: tabular-nums; }
.hl-crowd-meta b { font-size: 0.66rem; font-weight: 800; }

/* ── board rows ────────────────────────────────────────────────────── */
.hl-board { display: flex; flex-direction: column; gap: 6px; }
.hl-row {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) 88px 76px;
    gap: 12px; align-items: center;
    background: rgba(7,30,51,0.4); border: 1px solid rgba(37,74,110,0.28);
    border-radius: 9px; padding: 8px 10px;
    text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
a.hl-row:hover { border-color: rgba(238,90,44,0.45); background: rgba(7,30,51,0.72); }
.hl-rank { font-family: var(--tt-mono, monospace); font-size: 0.62rem; font-weight: 800; color: var(--tt-text-dim, #6E8CA3); }
.hl-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Line 2: the split bar sizes itself to the space the pills leave. */
.hl-row-bottom { display: grid; grid-template-columns: minmax(64px, 1fr) auto; gap: 8px; align-items: center; }
.hl-book { font-family: var(--tt-mono, monospace); font-size: 0.78rem; font-weight: 800; color: var(--tt-text, #FFF6EA); font-variant-numeric: tabular-nums; }
.hl-pills { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hl-bookbar { height: 6px; border-radius: 3px; background: rgba(7,30,51,0.8); overflow: hidden; display: flex; }
.hl-bookbar span { display: block; height: 100%; }
.hl-num { font-family: var(--tt-mono, monospace); font-size: 0.76rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.hl-sub { font-size: 0.57rem; color: var(--tt-text-dim, #6E8CA3); text-align: right; font-variant-numeric: tabular-nums; }
.hl-up { color: var(--tt-up, #37D98A); }
.hl-down { color: var(--tt-down, #FA5772); }
.hl-flat { color: var(--tt-text-muted, #A9C2D6); }

/* Position pills: what the wallet is actually in, at a glance. */
.hl-pos-pill {
    font-size: 0.58rem; font-weight: 700; padding: 1px 6px; border-radius: 4px;
    font-family: var(--tt-mono, monospace); white-space: nowrap;
}
.hl-pos-long { background: var(--tt-up-soft, rgba(55,217,138,0.13)); color: var(--tt-up, #37D98A); }
.hl-pos-short { background: var(--tt-down-soft, rgba(250,87,114,0.13)); color: var(--tt-down, #FA5772); }

/* ── tape rows (wallet-attributed prints) ──────────────────────────── */
.hl-tape { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow-y: auto; }
/* Side is carried by the tinted surface + the colored USD figure (how a real
   tape reads), not by an accent tab on the card edge. Frame matches .wr-row. */
.hl-tape-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(7,30,51,0.4); border: 1px solid rgba(37,74,110,0.25);
    border-radius: 8px; padding: 7px 10px;
}
.hl-tape-row.is-buy { background: linear-gradient(90deg, rgba(55,217,138,0.10), rgba(7,30,51,0.4) 42%); }
.hl-tape-row.is-sell { background: linear-gradient(90deg, rgba(250,87,114,0.10), rgba(7,30,51,0.4) 42%); }
.hl-tape-new { animation: hl-flash 1.1s var(--tt-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); }
@keyframes hl-flash { from { background: rgba(238,90,44,0.18); } to { background: rgba(7,30,51,0.4); } }
.hl-tape-coin { font-family: var(--tt-mono, monospace); font-size: 0.72rem; font-weight: 800; color: var(--tt-text, #FFF6EA); }
.hl-tape-usd { font-family: var(--tt-mono, monospace); font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; }
.hl-tape-age { font-size: 0.57rem; color: var(--tt-text-dim, #6E8CA3); font-variant-numeric: tabular-nums; }
.hl-badge {
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
    padding: 1px 6px; border-radius: 4px; background: rgba(247,193,30,0.13); color: var(--tt-gold, #F7C11E);
}

/* ── locked rows (free tier) ───────────────────────────────────────── */
.hl-locked {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: rgba(238,90,44,0.07); border: 1px dashed rgba(238,90,44,0.35);
    border-radius: 9px; padding: 9px 12px; font-size: 0.7rem; color: var(--tt-text-muted, #A9C2D6);
}
.hl-locked b { color: var(--tt-text, #FFF6EA); }

/* ======================================================================
   Wallet profile page
   ====================================================================== */
.hlw-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(37,74,110,0.45);
}
.hlw-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlw-addr-full {
    font-family: var(--tt-mono, monospace); font-size: clamp(0.85rem, 0.7rem + 0.8vw, 1.15rem);
    font-weight: 800; color: var(--tt-text, #FFF6EA); word-break: break-all; letter-spacing: -0.01em;
}
.hlw-copy {
    background: rgba(7,30,51,0.6); border: 1px solid var(--tt-border, rgba(255,246,234,0.12)); color: var(--tt-text-muted, #A9C2D6);
    border-radius: 7px; height: 30px; min-width: 30px; padding: 0 9px; cursor: pointer; font-size: 0.9rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.hlw-copy:hover { color: var(--tt-text, #FFF6EA); border-color: rgba(238,90,44,0.45); }

/* Stat tiles: the numbers that decide whether this wallet is worth a look. */
.hlw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; margin-bottom: 18px; }
.hlw-stat { background: rgba(13,49,82,0.42); border: 1px solid rgba(37,74,110,0.35); border-radius: 12px; padding: 11px 13px; }
.hlw-stat-label { font-size: 0.57rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tt-text-dim, #6E8CA3); margin-bottom: 5px; }
.hlw-stat-value { font-family: var(--tt-mono, monospace); font-size: 1.05rem; font-weight: 800; color: var(--tt-text, #FFF6EA); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hlw-stat-sub { font-size: 0.57rem; color: var(--tt-text-dim, #6E8CA3); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* Bias bar: how the book leans, long vs short, in one strip. */
.hlw-bias { height: 22px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(7,30,51,0.7); }
.hlw-bias span { display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: #05121f; }

/* Positions */
.hlw-pos { display: flex; flex-direction: column; gap: 8px; }
.hlw-pos-row {
    background: rgba(7,30,51,0.42); border: 1px solid rgba(37,74,110,0.3);
    border-radius: 10px; padding: 10px 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; align-items: center;
}
/* Side reads from the LONG/SHORT pill and the signed PnL, with a faint surface
   wash for scanning. No edge tab. */
.hlw-pos-row.is-long { background: linear-gradient(90deg, rgba(55,217,138,0.09), rgba(7,30,51,0.42) 38%); }
.hlw-pos-row.is-short { background: linear-gradient(90deg, rgba(250,87,114,0.09), rgba(7,30,51,0.42) 38%); }
.hlw-pos-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.hlw-pos-coin { font-family: var(--tt-mono, monospace); font-size: 0.86rem; font-weight: 800; color: var(--tt-text, #FFF6EA); }
.hlw-pos-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.6rem; color: var(--tt-text-dim, #6E8CA3); font-variant-numeric: tabular-nums; }
.hlw-pos-meta b { color: var(--tt-text-muted, #A9C2D6); font-weight: 700; }
.hlw-lev { font-size: 0.56rem; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: rgba(247,193,30,0.13); color: var(--tt-gold, #F7C11E); font-family: var(--tt-mono, monospace); }

/* Liquidation meter: how much room the price has before this position dies.
   Filled = room used. Turns red as it runs out. */
.hlw-liq { margin-top: 8px; }
.hlw-liq-track { height: 6px; border-radius: 3px; background: rgba(7,30,51,0.8); overflow: hidden; }
.hlw-liq-fill { height: 100%; border-radius: 3px; background: var(--tt-up, #37D98A); }
.hlw-liq-fill.warn { background: var(--tt-gold, #F7C11E); }
.hlw-liq-fill.danger { background: var(--tt-down, #FA5772); }
.hlw-liq-label { font-size: 0.56rem; color: var(--tt-text-dim, #6E8CA3); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Fills table */
.hlw-fills { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
.hlw-fills th {
    text-align: left; font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tt-text-dim, #6E8CA3); padding: 0 8px 7px; border-bottom: 1px solid rgba(37,74,110,0.35);
}
.hlw-fills td { padding: 6px 8px; border-bottom: 1px solid rgba(37,74,110,0.16); font-variant-numeric: tabular-nums; color: var(--tt-text-muted, #A9C2D6); }
.hlw-fills td.num { text-align: right; font-family: var(--tt-mono, monospace); }
.hlw-fills tr:last-child td { border-bottom: none; }
.hlw-scroll { overflow-x: auto; }

/* Coin mix: where this wallet's volume actually goes. */
.hlw-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(7,30,51,0.7); }
.hlw-mix span { display: block; height: 100%; }
.hlw-mix-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 0.58rem; color: var(--tt-text-dim, #6E8CA3); }
.hlw-mix-key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

@media (max-width: 640px) {
    .hl-row { grid-template-columns: 18px minmax(0, 1fr) 72px; }
    .hl-row .hl-row-extra { display: none; }
    .hlw-pos-row { grid-template-columns: 1fr; }
    .hl-crowd-row { grid-template-columns: 46px minmax(0, 1fr) 56px; }
}

/* ── proven traders strip (crypto-whales Named lane) ─────────────── */
.hl-proven-strip { margin: 14px 0 18px; }
.hl-proven-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hl-proven-title { font-size: 0.78rem; font-weight: 700; color: var(--tt-text, #FFF6EA); display: inline-flex; align-items: center; gap: 6px; }
.hl-proven-title i { color: #F7C11E; }
.hl-proven-all { font-size: 0.72rem; font-weight: 700; color: #2FB1E6; text-decoration: none; }
.hl-proven-all:hover { text-decoration: underline; }
.hl-proven-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hl-proven-card { display: flex; flex-direction: column; gap: 4px; background: var(--tt-input-bg, rgba(13,49,82,0.5)); border: 1px solid var(--tt-border-soft, rgba(37,74,110,0.4)); border-radius: 10px; padding: 10px 12px; text-decoration: none; transition: border-color 0.15s; }
.hl-proven-card:hover { border-color: #2FB1E6; }
.hl-proven-addr { font: 600 0.68rem var(--tt-mono, monospace); color: #2FB1E6; display: inline-flex; align-items: center; gap: 4px; }
.hl-proven-pnl { font-size: 1.05rem; font-weight: 800; color: #37D98A; letter-spacing: -0.01em; }
.hl-proven-meta { font-size: 0.64rem; color: var(--tt-text-muted, #A9C2D6); }
.hl-proven-meta b.hl-up { color: #37D98A; }
.hl-proven-meta b.hl-down { color: #FA5772; }

/* Lane-level trade link (referral-ready) */
.hl-trade-btn { margin-left: auto; font-size: 0.68rem; font-weight: 700; color: #F7C11E; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(247,193,30,0.35); background: rgba(247,193,30,0.08); padding: 4px 10px; border-radius: 8px; transition: background 0.15s; }
.hl-trade-btn:hover { background: rgba(247,193,30,0.18); }