/* ============================================================================
   home-whales.css · code-drawn art for the whale-first homepage.
   Owns the whale row (partials/art-whale-row), the "More than whales" tile
   visuals (partials/art-tiles) and the alert card (partials/art-alert).
   Every class is prefixed .hw-. Tokens come from terminal-tokens.css and
   brand-character.css, each with a real fallback so a partial dropped into a
   page that loaded neither still looks right.
   Motion is small and optional: a row drifts in on insert, the live dot pulses.
   ========================================================================== */

/* ── shared ───────────────────────────────────────────────────────────────── */
.hw-buy  { --hw-tint: var(--tt-up, #37D98A); --hw-tint-soft: rgba(55,217,138,0.14); }
.hw-sell { --hw-tint: var(--tt-down, #FA5772); --hw-tint-soft: rgba(250,87,114,0.14); }

/* ── whale row ────────────────────────────────────────────────────────────── */
.hw-row {
    display: grid;
    /* glyph · coin · side · dollars · flow bar · where · age. The bar takes
       the free track: the middle of a row is where the eye lands, so it holds
       the one thing a number alone cannot show, this trade against the biggest
       one on screen. */
    grid-template-columns: var(--hw-glyph-col, 46px) minmax(46px, auto) 46px minmax(64px, auto) minmax(44px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid var(--tt-border-soft, rgba(255,246,234,0.07));
    background: rgba(13,49,82,0.55);
    font-family: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
    font-size: 0.9rem;
    color: var(--tt-text, #FFF6EA);
}
.hw-row--sm { --hw-glyph-col: 26px; }
.hw-row--md { --hw-glyph-col: 34px; }
.hw-row--lg { --hw-glyph-col: 42px; }
.hw-row--xl { --hw-glyph-col: 50px; background: linear-gradient(90deg, var(--hw-tint-soft, rgba(255,246,234,0.08)) 0%, rgba(13,49,82,0.55) 55%); }
.hw-row--hero { grid-template-columns: var(--hw-glyph-col, 40px) minmax(42px, auto) 44px minmax(56px, auto) minmax(36px, 1fr) auto; }
.hw-row + .hw-row { margin-top: 6px; }

.hw-glyph { display: block; color: var(--hw-tint, var(--tt-accent, #EE5A2C)); line-height: 0; }
.hw-glyph--sm { width: 22px; }
.hw-glyph--md { width: 30px; }
.hw-glyph--lg { width: 38px; }
.hw-glyph--xl { width: 46px; }

/* Whale, not fish: blunt head, small dorsal set back, tail RAISED with the
   fluke turned toward the viewer (two lobes spread left and right, about six
   times the width of the tail it hangs off), and the spout at EVERY size.
   The spout is the one cue no fish has, so it never gets hidden. */
.hw-whale-body, .hw-whale-fluke, .hw-whale-dorsal { fill: currentColor; }
.hw-whale-fin  { fill: currentColor; opacity: 0.5; }
.hw-whale-jaw  { fill: none; stroke: var(--tt-body-bg, #0A2A44); stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; }
.hw-whale-eye  { fill: var(--tt-body-bg, #0A2A44); }
.hw-whale-spout circle { fill: currentColor; opacity: 0.45; }

.hw-coin { font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 800; letter-spacing: -0.01em; }
.hw-side {
    justify-self: start;
    font-family: var(--tt-mono, ui-monospace, monospace);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    padding: 3px 7px; border-radius: 6px;
    color: var(--hw-tint, var(--tt-text, #FFF6EA));
    background: var(--hw-tint-soft, rgba(255,246,234,0.08));
}
.hw-usd { font-family: var(--tt-mono, ui-monospace, monospace); font-weight: 700; color: var(--hw-tint, var(--tt-text, #FFF6EA)); }
.hw-bar { height: 6px; border-radius: 100px; background: rgba(255,246,234,0.07); overflow: hidden; }
.hw-bar__fill { display: block; height: 100%; border-radius: 100px; background: var(--hw-tint, var(--tt-accent, #EE5A2C)); opacity: 0.8; }

.hw-where { color: var(--tt-text-muted, #A9C2D6); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-where .hw-fav { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; }
.hw-where i { color: var(--tt-sky, #2FB1E6); font-size: 0.9em; }
.hw-ago { font-family: var(--tt-mono, ui-monospace, monospace); font-size: 0.74rem; color: var(--tt-text-dim-text, #93AEC4); text-align: right; }

/* rows drift in on insert (live socket) and stagger on first paint */
@keyframes hw-drift-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
}
.hw-row.is-new { animation: hw-drift-in 0.5s var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1)) both; }
.hw-row.is-new { animation-delay: calc(var(--hw-i, 0) * 40ms); }

/* ── live dot (sonar) ─────────────────────────────────────────────────────── */
.hw-live { position: relative; display: inline-flex; width: 10px; height: 10px; flex: none; }
.hw-live__dot { position: absolute; inset: 2px; border-radius: 50%; background: var(--tt-up, #37D98A); }
.hw-live__ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(55,217,138,0.55);
    animation: hw-sonar 2.6s var(--tt-ease-out, ease-out) infinite;
}
@keyframes hw-sonar { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(3.4); opacity: 0; } }
/* not connected yet: grey and still, so nothing pulses over absent data */
.hw-live--off .hw-live__dot { background: var(--tt-text-dim, #7C93A6); }
.hw-live--off .hw-live__ring { animation: none; border-color: rgba(124,147,166,0.45); opacity: 0.5; }

/* ── tile art (120x72) ────────────────────────────────────────────────────── */
.hw-tileart { display: block; width: 120px; height: 72px; }
.hw-tileart svg { display: block; overflow: visible; }
/* the ocean behind each tile: one soft glow, keyed to the art's own weight */
.hw-tileart--whales, .hw-tileart--smart, .hw-tileart--funding,
.hw-tileart--liq, .hw-tileart--book, .hw-tileart--defi, .hw-tileart--history {
    background: radial-gradient(60% 70% at 50% 55%, rgba(47,177,230,0.10) 0%, rgba(47,177,230,0) 70%);
}

.hw-t-w-body, .hw-t-w-fluke, .hw-t-w-dorsal { fill: currentColor; }
.hw-t-whale > g { color: var(--tt-text-muted, #A9C2D6); opacity: 0.35; }
.hw-t-whale > g:nth-child(2) { opacity: 0.6; }
.hw-t-whale .hw-t-lead { color: var(--tt-accent, #EE5A2C); opacity: 1; }

.hw-t-dots circle { fill: var(--tt-text-muted, #A9C2D6); opacity: 0.55; }
.hw-t-lines path { stroke: var(--tt-border, rgba(255,246,234,0.12)); stroke-width: 1; fill: none; }
.hw-t-hero { fill: var(--tt-accent, #EE5A2C); }

.hw-t-arc-bg { fill: none; stroke: var(--tt-border, rgba(255,246,234,0.12)); stroke-width: 7; stroke-linecap: round; }
.hw-t-arc-up { fill: none; stroke: var(--tt-up, #37D98A); stroke-width: 7; stroke-linecap: round; }
.hw-t-arc-dn { fill: none; stroke: var(--tt-down, #FA5772); stroke-width: 7; stroke-linecap: round; }
.hw-t-needle { stroke: var(--tt-accent, #EE5A2C); stroke-width: 3.5; stroke-linecap: round; }
.hw-t-pin { fill: var(--tt-accent, #EE5A2C); }

.hw-t-bars rect { fill: var(--tt-down, #FA5772); opacity: 0.75; }
.hw-t-bars rect:first-child { opacity: 1; }
.hw-t-fall { stroke: var(--tt-down, #FA5772); stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; opacity: 0.5; }

.hw-t-bid rect { fill: var(--tt-up, #37D98A); opacity: 0.8; }
.hw-t-ask rect { fill: var(--tt-down, #FA5772); opacity: 0.8; }
.hw-t-mid { stroke: var(--tt-text-dim-text, #93AEC4); stroke-width: 1.5; stroke-dasharray: 3 4; }

.hw-t-nodes circle { fill: none; stroke: var(--tt-gold, #F7C11E); stroke-width: 2.5; }
.hw-t-links path { stroke: var(--tt-border, rgba(255,246,234,0.12)); stroke-width: 2; fill: none; }
.hw-t-core { fill: var(--tt-accent, #EE5A2C); }

.hw-t-heat rect { fill: var(--tt-accent, #EE5A2C); }
.hw-t-h1 { opacity: 0.16; }
.hw-t-h2 { opacity: 0.36; }
.hw-t-h3 { opacity: 0.64; }
.hw-t-h4 { opacity: 1; }

/* ── alert card ───────────────────────────────────────────────────────────── */
.hw-alert {
    max-width: 320px;
    padding: 16px 18px;
    border-radius: var(--cl-r-lg, 20px);
    border: 1px solid var(--tt-border, rgba(255,246,234,0.12));
    background: var(--tt-panel-grad, linear-gradient(145deg, #103756 0%, #0D3152 100%));
    box-shadow: var(--tt-shadow, 0 8px 24px rgba(0,0,0,0.32));
    font-family: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
    color: var(--tt-text, #FFF6EA);
}
.hw-alert__top { display: flex; align-items: center; gap: 9px; }
.hw-alert__coin {
    font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
    font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em;
    padding: 4px 10px; border-radius: 100px;
    background: rgba(238,90,44,0.16); color: var(--tt-accent-text, #FF8A5C);
}
.hw-alert__ago { font-family: var(--tt-mono, ui-monospace, monospace); font-size: 0.72rem; color: var(--tt-text-dim-text, #93AEC4); }
.hw-tag {
    margin-left: auto;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 6px;
    color: var(--tt-text-dim-text, #93AEC4);
    border: 1px solid var(--tt-border, rgba(255,246,234,0.12));
}
.hw-alert__line {
    margin: 12px 0 0;
    font-family: var(--tt-display, 'Bricolage Grotesque', system-ui, sans-serif);
    font-weight: 800; font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.01em;
}
.hw-alert__bar { margin-top: 12px; height: 6px; border-radius: 100px; background: rgba(255,246,234,0.09); overflow: hidden; }
.hw-alert__fill { display: block; height: 100%; width: 72%; border-radius: 100px; background: var(--hw-tint, var(--tt-up, #37D98A)); } /* width from the card's strength local, colour from its direction */
.hw-alert__ch { display: flex; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.hw-alert__ch li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--tt-text-muted, #A9C2D6); }
.hw-alert__ch i { font-size: 1rem; color: var(--tt-sky, #2FB1E6); }

/* illustrative, not live: the dashed frame says so before the tag is read, and
   an example card never wears the live pulse that real cards use */
.hw-alert--example { border-style: dashed; }
.hw-alert--example .hw-live { display: none; }

/* ── motion, reduced ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hw-row.is-new { animation: none; }
    .hw-live__ring { animation: none; opacity: 0.5; }
}

/* ==========================================================================
   Homepage sections 3-6 (More than whales · Whale alerts · Connect).
   Only views/home-ai.ejs loads this sheet, so these names cannot collide with
   the shared .hd-* set in home-deep.css. Colours come from the marketing
   shell tokens (ai-first.css), which are the same brand values as --tt-*.
   ========================================================================== */

/* --- More than whales: 7 tiles, art + label + one question ---------------- */
.hw-more__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; }
.hw-more__head .ai-h2 { margin: 0; }
.hw-more__lede { margin: 0; font-size: 1rem; color: var(--ai-dim); }
.hw-tiles { margin-top: 34px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
/* Seven tiles on a twelve-column track: four, then three wider ones, so the
   row does not end in a hole. */
.hw-tile { grid-column: span 3; }
.hw-tile:nth-child(n+5) { grid-column: span 4; }
.hw-tile { display: block; padding: 18px 18px 20px; border-radius: 18px; text-decoration: none;
    border: 1px solid var(--ai-hair); background: var(--ai-panel);
    transition: transform .18s var(--ai-ease), border-color .18s var(--ai-ease), background .18s var(--ai-ease); }
.hw-tile:hover { transform: translateY(-3px); border-color: var(--ai-orange); background: rgba(238,90,44,0.06); }
.hw-tile__art { display: block; margin-bottom: 14px; }
.hw-tile__lbl { display: block; font-family: var(--ai-disp); font-weight: 800; font-size: 1.02rem;
    letter-spacing: -0.01em; color: var(--ai-ink); }
.hw-tile__q { display: block; margin-top: 7px; font-size: .9rem; line-height: 1.45; color: var(--ai-body); }
.hw-tile__q::before { content: "\201C"; }
.hw-tile__q::after { content: "\201D"; }
.hw-more__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Whale alerts. The one band with an accent edge: arming an alert is the
       second most common thing people do here. ---------------------------- */
/* The one accent edge on the page. Two classes because the generic
   `.ai-sec + .ai-sec` hairline outranks a single class and was winning. */
.ai-sec.hw-alerts { border-top: 1px solid rgba(238,90,44,0.62); }
.hw-alerts__in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hw-alerts__copy .ai-h2 { margin: 0; max-width: 16ch; }
.hw-alerts__copy .ai-lede { margin: 18px 0 0; max-width: 42ch; }
.hw-alerts__cta { justify-content: flex-start; margin-top: 28px; }
/* The character that does the telling, under the buttons. The cards beside it
   are the real thing, so this stays clear of them. */
.hw-alerts__art { margin-top: 26px; }
/* stacked layout: the character sits between the buttons and the cards, and
   shrinks so it never outweighs them */
@media (max-width: 860px) {
    .hw-alerts__art { margin-top: 22px; }
    .hw-alerts__art .clm { width: 176px !important; }
}
/* Three cards, stacked, filling the column: the band is about a stream of
   alerts, and one lone card said "here is a mockup". */
.hw-alerts__viz { justify-self: stretch; width: 100%; display: grid; gap: 12px; }
.hw-alerts__viz .hw-alert { max-width: none; }

/* --- Connect: pills, the three beats, the FAQ ----------------------------- */
.hw-pills { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.hw-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
    border: 1px dashed var(--ai-hair-bold); background: transparent; text-decoration: none;
    font-family: var(--ai-mono); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ai-body);
    transition: color .15s var(--ai-ease), border-color .15s var(--ai-ease); }
.hw-pill i { color: var(--ai-orange-lt); font-size: 1rem; }
.hw-pill:hover { color: var(--ai-ink); border-color: var(--ai-orange); }
.hw-strip { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.hw-strip li { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ai-body); }
.hw-strip li i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; background: rgba(238,90,44,0.10); color: var(--ai-orange-lt); font-size: 1.05rem; }
.hw-faq { margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; text-align: left; }
.hw-faq__i { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--ai-hair-soft); background: rgba(255,246,234,0.02); }
.hw-faq__q { margin: 0; font-family: var(--ai-disp); font-weight: 700; font-size: .98rem; color: var(--ai-ink); }
.hw-faq__a { margin: 7px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ai-body); }

@media (max-width: 1080px) {
    .hw-tiles { grid-template-columns: repeat(6, 1fr); }
    .hw-tile, .hw-tile:nth-child(n+5) { grid-column: span 2; }
    /* Seven tiles into three columns leaves a lone tile beside a hole. The
       last one takes the whole closing row instead. */
    .hw-tiles > .hw-tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .hw-tiles { grid-template-columns: repeat(2, 1fr); }
    .hw-tile, .hw-tile:nth-child(n+5) { grid-column: span 1; }
    .hw-tiles > .hw-tile:last-child { grid-column: 1 / -1; }
    .hw-alerts__in { grid-template-columns: 1fr; }
    .hw-alerts__viz { margin-top: 26px; }
    .hw-faq { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .hw-tiles { grid-template-columns: 1fr; }
    .hw-tile, .hw-tile:nth-child(n+5) { grid-column: span 1; }
    .hw-strip { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   LIGHT WORLD (views/home-ai.ejs, <body data-world="light">).
   The same .hw-* markup, repainted for the cream storefront: white cards,
   navy ink, the code-drawn tile art kept on a navy chip so it reads as the
   terminal showing through. Scoped to the attribute, so every other page
   that loads this sheet in the navy world is untouched.
   ========================================================================== */

/* --- tiles ---------------------------------------------------------------- */
body[data-world="light"] .hw-tiles { margin-top: 34px; text-align: left; }
body[data-world="light"] .hw-tile {
    padding: 20px;
    border-radius: var(--lw-r-card);
    border: 1px solid var(--lw-border);
    background: var(--lw-card);
    box-shadow: var(--lw-shadow);
    transition: transform .22s var(--lw-ease), box-shadow .22s var(--lw-ease), border-color .22s var(--lw-ease);
}
body[data-world="light"] .hw-tile:hover {
    transform: translateY(-3px);
    background: var(--lw-card);
    border-color: var(--lw-accent);
    box-shadow: var(--lw-shadow-lg);
}
/* the art sits on the recessed panel tone, one step down from the tile */
body[data-world="light"] .hw-tile__art {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 12px 0;
    border-radius: 14px;
    background: var(--lw-data-bg);
}
body[data-world="light"] .hw-tile__lbl { color: var(--lw-ink); }
body[data-world="light"] .hw-tile__q { color: var(--lw-muted); }
body[data-world="light"] .hw-more__cta { margin-top: 28px; justify-content: center; }
/* The dark world let the seventh tile take the whole closing row. With the
   light world's navy art chip that draws a ~930x100 bar, so the lone tile
   keeps a tile's proportions and is centred in the track instead. */
@media (max-width: 1080px) {
    body[data-world="light"] .hw-tiles > .hw-tile:last-child { grid-column: 3 / span 2; }
}
@media (max-width: 860px) {
    body[data-world="light"] .hw-tiles > .hw-tile:last-child { grid-column: span 1; }
}

/* --- alerts --------------------------------------------------------------- */
body[data-world="light"] .hw-alerts__in { align-items: center; }
body[data-world="light"] .hw-alerts__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
body[data-world="light"] .hw-alerts__art { margin-top: 18px; justify-content: flex-start; }
/* up/down are the component's own --tt-* values and are left alone. */
body[data-world="light"] .hw-alert {
    background: var(--lw-card);
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-r-card);
    box-shadow: var(--lw-shadow);
    color: var(--lw-ink);
    padding: 18px 20px;
}
body[data-world="light"] .hw-alert--example { border: 1px dashed var(--lw-border-strong); }
body[data-world="light"] .hw-alert__coin {
    background: var(--lw-accent-soft);
    color: var(--lw-accent-ink);
}
body[data-world="light"] .hw-alert__ago { color: var(--lw-dim-text); }
body[data-world="light"] .hw-alert .hw-tag {
    color: var(--lw-dim-text);
    border-color: var(--lw-border-strong);
}
body[data-world="light"] .hw-alert__line { color: var(--lw-ink); }
body[data-world="light"] .hw-alert__bar { background: rgba(255, 246, 234, .09); }
body[data-world="light"] .hw-alert__ch li { color: var(--lw-muted); }
body[data-world="light"] .hw-alert__ch i { color: var(--lw-accent-ink); }

/* --- connect: pills, the three beats, the FAQ ----------------------------- */
body[data-world="light"] .hw-pill {
    border: 1px dashed var(--lw-border-strong);
    color: var(--lw-muted);
}
body[data-world="light"] .hw-pill i { color: var(--lw-accent-ink); }
body[data-world="light"] .hw-pill:hover { color: var(--lw-accent-ink); border-color: var(--lw-accent); }
body[data-world="light"] .hw-strip { margin: 0; justify-content: center; }
body[data-world="light"] .hw-strip li { color: var(--lw-ink); font-weight: 600; }
body[data-world="light"] .hw-strip li i {
    background: var(--lw-accent-soft);
    color: var(--lw-accent-ink);
}
body[data-world="light"] .hw-faq { margin-top: clamp(34px, 4vw, 52px); text-align: left; }
body[data-world="light"] .hw-faq__i {
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--lw-border);
    background: var(--lw-card);
    box-shadow: var(--lw-shadow);
}
body[data-world="light"] .hw-faq__q { color: var(--lw-ink); font-size: 1.02rem; }
body[data-world="light"] .hw-faq__a { color: var(--lw-muted); }