/* Look up any wallet (views/partials/wallet-lookup.ejs).
   Tokens from terminal-tokens.css with literal fallbacks, so the box renders
   the same on a page that does not load them (the homepage). One accent
   control: the Look up button. The two doors are neutral panels whose only
   colour is the 5px venue key, the same chip pattern the feed uses. */

.wlk { --wlk-h: var(--tt-control-h, 32px); width: 100%; max-width: 640px; margin: 0; font-family: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif); }
.wlk--lg { --wlk-h: 44px; max-width: 720px; margin: 0 auto; }

.wlk-field {
    display: flex; align-items: center; gap: 8px; height: var(--wlk-h); box-sizing: border-box;
    padding: 0 4px 0 12px; margin: 0;
    background: var(--tt-input-bg, #0F0E0E);
    border: 1px solid var(--tt-border-strong, rgba(244,241,236,0.17));
    border-radius: var(--tt-r-lg, 10px);
}
/* The site's one focus ring, moved to the field (the same fix as the ask
   dock, ai-dock.css): on the bare input it drew a box inside the box. */
.wlk-field:focus-within { outline: 2px solid var(--tt-focus-ring, #EE5A2C); outline-offset: 2px; }
.wlk-icon { color: var(--tt-text-dim-text, #8A847C); font-size: 0.95rem; flex: 0 0 auto; }
.wlk-input {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: var(--tt-text, #F4F1EC); caret-color: var(--tt-accent, #EE5A2C);
    font-family: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 0.8rem; letter-spacing: 0;
}
.wlk--lg .wlk-input { font-size: 0.92rem; }
.wlk .wlk-input:focus-visible { outline: none !important; }
.wlk-input::placeholder { color: var(--tt-text-dim-text, #8A847C); font-family: var(--tt-sans, system-ui, sans-serif); }
.wlk-go {
    flex: 0 0 auto; height: calc(var(--wlk-h) - 8px); padding: 0 14px; border: 0; border-radius: 7px; cursor: pointer;
    background: var(--tt-accent, #EE5A2C); color: #180A03; font-weight: 800; font-size: 0.74rem;
    transition: background 120ms ease;
}
.wlk--lg .wlk-go { padding: 0 18px; font-size: 0.82rem; }
.wlk-go:hover, .wlk-go:focus-visible { background: #C8431E; }
.wlk-go:focus-visible { outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: 2px; }

.wlk-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wlk-picks[hidden] { display: none; }
.wlk-pick {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px;
    padding: 10px 12px; text-decoration: none; border-radius: var(--tt-r-lg, 10px);
    background: var(--tt-panel-solid, #121111); border: 1px solid var(--tt-border, rgba(244,241,236,0.10));
    transition: border-color 120ms ease, background 120ms ease;
}
.wlk-pick:hover, .wlk-pick:focus-visible { border-color: var(--tt-border-strong, rgba(244,241,236,0.17)); background: var(--tt-raised, #1A1818); }
.wlk-pick:focus-visible { outline: 2px solid var(--tt-accent, #EE5A2C); outline-offset: 2px; }
.wlk-pick-k { display: inline-flex; align-items: center; gap: 7px; color: var(--tt-text, #F4F1EC); font-weight: 700; font-size: 0.78rem; min-width: 0; }
.wlk-key { width: 5px; height: 5px; border-radius: 50%; background: var(--v, #7C766F); flex: 0 0 5px; }
.wlk-pick-v {
    grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right;
    font-family: var(--tt-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
    font-size: 0.86rem; font-weight: 800; color: var(--tt-text, #F4F1EC); white-space: nowrap;
}
.wlk-pick-v.is-reading { color: var(--tt-text-dim-text, #8A847C); font-weight: 600; font-size: 0.7rem; font-family: var(--tt-sans, system-ui, sans-serif); }
.wlk-pick-v.is-none { color: var(--tt-text-dim-text, #8A847C); font-weight: 600; font-size: 0.7rem; font-family: var(--tt-sans, system-ui, sans-serif); }
.wlk-pick-v.is-have { color: var(--tt-up, #37D98A); font-size: 0.7rem; font-family: var(--tt-sans, system-ui, sans-serif); }
.wlk-pick-l { grid-column: 1; color: var(--tt-text-dim-text, #8A847C); font-size: 0.68rem; padding-left: 12px; }
/* An address that never used Hyperliquid: the door stays (one string can be
   both), it just steps back. */
.wlk-pick.is-empty .wlk-pick-k { color: var(--tt-text-muted, #A8A29B); }
.wlk-err { margin-top: 6px; color: var(--tt-down-text, #FF7E8E); font-size: 0.72rem; }
.wlk-err[hidden] { display: none; }

/* In the "Who bought it" tab of /crypto-whales, under its one-line intro. */
.cw-wlk { margin: 4px 0 14px; }

@media (max-width: 560px) {
    .wlk-picks { grid-template-columns: 1fr; }
    .wlk-go { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .wlk-field, .wlk-go, .wlk-pick { transition: none; }
}