/* Tanda 3 de la renovación del terminal: su hoja, y sólo suya.
   La enlaza terminal.html con la vista previa (tanda 0, 2026-11-04). Usar los
   tokens y clases de terminal-pieces.css; reglas con prefijo de la tanda
   (.t3-…) o bajo [data-tp="clave"] de sus piezas. Contrato: final de
   terminal_plan.md. */

/* --- Lo común de las cinco ----------------------------------------------
   Dos zonas: las cifras (`.t3-main`) y el gráfico (`.t3-side`). Lado a lado
   cuando la pieza mide 520 px o más; si no, una debajo de otra. En una pieza
   estrecha y baja (4×4 o menos en la rejilla) el gráfico se va antes que las
   cifras. Todo por el tamaño de la pieza (`@container pieza`), nunca de la
   ventana. */
.t3-split { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 auto; min-height: 0; }
.t3-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t3-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; min-height: 0; }
@container pieza (min-width: 520px) {
  .t3-split { flex-direction: row; gap: var(--s5); }
  .t3-main { flex: 0 0 38%; justify-content: safe center; padding-right: var(--s5); border-right: 1px solid var(--tp-div); }
}
@container pieza (max-width: 519px) and (max-height: 299px) { .t3-side { display: none; } }

.t3-heroline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.t3-unit { font-size: var(--size-sm); font-weight: 600; color: var(--text-muted); }
.t3-eyebrow { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; font-size: var(--size-2xs);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.t3-eyebrow > .tp-num { margin-left: auto; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.t3-change b.up { color: var(--up); }
.t3-change b.down { color: var(--down); }
.t3-change b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-sub b { color: var(--text); font-weight: 650; }
.tp-sub b.up { color: var(--up); }
.tp-sub b.down { color: var(--down); }

/* El área: línea de acento y su relleno suave; el dibujo lo hace
   `pieces/onchain.py`, aquí sólo el color. */
.t3-plot { flex: 1 1 auto; min-height: 56px; }
.t3-plot > svg { position: absolute; inset: 0; }
.t3-plot-s { min-height: 48px; }
@container pieza (max-width: 519px) { .t3-plot { min-height: 84px; } }
.t3-area .t3-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.t3-area .t3-fill { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.t3-enddot { --k: var(--accent); pointer-events: none; }
.t3-axis { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--size-2xs);
  color: var(--text-faint); font-variant-numeric: tabular-nums; }
.t3-axis b { color: var(--text-muted); font-weight: 600; }

/* --- 13 · HODL ---------------------------------------------------------- */
/* Los cinco tramos en una rampa del acento, del más nuevo (apagado) al más
   viejo (lleno), como el ejemplo; con `color-mix` sobre nuestros tokens. */
.t3-bands { display: grid; gap: 6px; margin-top: var(--s1); }
.t3-stack { display: flex; height: 14px; gap: 2px; }
.t3-stack i { display: block; height: 100%; flex: var(--w) 1 0; min-width: 3px; border-radius: 3px; }
.t3-b1 { background: color-mix(in srgb, var(--accent) 22%, var(--track)); }
.t3-b2 { background: color-mix(in srgb, var(--accent) 38%, var(--track)); }
.t3-b3 { background: color-mix(in srgb, var(--accent) 55%, var(--track)); }
.t3-b4 { background: color-mix(in srgb, var(--accent) 78%, var(--track)); }
.t3-b5 { background: var(--accent); }
.t3-stack i:hover { outline: 2px solid var(--text-muted); outline-offset: 1px; }
/* La llave «> 1 year» encima de los tramos de más de un año. */
.t3-year { position: relative; height: 16px; margin-left: calc(var(--from) * 1%); border: 1px solid var(--line-strong);
  border-bottom: 0; border-radius: 5px 5px 0 0; margin-top: 2px; }
.t3-year span { position: absolute; right: calc(100% + 6px); top: -3px; font-size: var(--size-2xs); font-weight: 650;
  color: var(--text-muted); white-space: nowrap; }
.t3-bandkeys { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.t3-bandkeys li { flex: var(--w) 1 0; min-width: 26px; display: grid; }
.t3-bandkeys b { font-size: var(--size-xs); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.t3-bandkeys span { font-size: var(--size-2xs); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3-bandnote { display: none; gap: 6px; font-size: var(--size-2xs); color: var(--text-faint); }
.t3-bandnote span:last-child { margin-left: auto; }
.t3-bandnote span[aria-hidden] { display: none; }
@container pieza (max-width: 759px) {
  .t3-split .t3-bandkeys span { display: none; }
  .t3-split .t3-bandnote { display: flex; }
}

/* --- Ballenas y ETF ------------------------------------------------------ */
.t3-hold-top { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.t3-usd { margin-left: auto; font-size: var(--size-md); font-weight: 700; color: var(--text); white-space: nowrap; }
.t3-hold-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); }
.t3-holding .tp-body { gap: var(--s2); }

/* --- 20 · Liquidaciones ---------------------------------------------------- */
.t3-ls { display: grid; gap: 4px; margin-top: var(--s1); }
.t3-ls-lbl { display: flex; justify-content: space-between; font-size: var(--size-sm); color: var(--text-muted); }
.t3-ls-lbl b { font-weight: 700; font-variant-numeric: tabular-nums; }
.t3-ls-lbl b.up { color: var(--up); }
.t3-ls-lbl b.down { color: var(--down); }
.t3-ls-bar { display: flex; gap: 2px; height: 8px; }
.t3-ls-bar i { flex: var(--w) 1 0; border-radius: 4px; min-width: 2px; }
.t3-ls-bar i.up { background: var(--up-fill); }
.t3-ls-bar i.down { background: var(--down); }
.t3-liq-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s3); }
.t3-liq-key { margin-left: auto; }
.t3-k-l { --k: var(--up-fill); }
.t3-k-s { --k: var(--down); }
.t3-k-sq { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.t3-k-sq::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--text); }
@container pieza (max-width: 699px) { .t3-k-sq { display: none; } }
/* El conmutador de vista (`.tp-seg t3-view`): la forma común de los radios
   en `terminal-pieces.css` (integración del 2026-11-04). */
.t3-liq-stk { display: none; }
.t3-liq:has(.t3-view input[value="stacked"]:checked) .t3-liq-div { display: none; }
.t3-liq:has(.t3-view input[value="stacked"]:checked) .t3-liq-stk { display: block; }
.t3-bars .t3-l { fill: var(--up-fill); }
.t3-bars .t3-s { fill: var(--down); }
.t3-bars .t3-zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t3-bars .t3-avg { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
/* El rombo de un día de squeeze, encima de su barra. */
.t3-sq { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
  background: var(--text); border-radius: 1px; pointer-events: none; }
.t3-avg-lbl { position: absolute; right: 0; transform: translateY(-110%); font-size: var(--size-2xs);
  color: var(--text-faint); line-height: 1; pointer-events: none; }

/* --- 21 · Mineros ------------------------------------------------------- */
.t3-state { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s2); margin-top: var(--s2); }
.t3-pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t3-ribbon .t3-band { stroke: none; }
.t3-ribbon .t3-band.up { fill: color-mix(in srgb, var(--up) 18%, transparent); }
.t3-ribbon .t3-band.down { fill: color-mix(in srgb, var(--down) 20%, transparent); }
.t3-ribbon .t3-sma30 { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.t3-ribbon .t3-sma60 { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.t3-miners .t3-enddot { --k: var(--text); }
.t3-ribbon-key .t3-k-30, .t3-ribbon-key .t3-k-60 { display: inline-flex; align-items: center; gap: 5px; }
.t3-ribbon-key .t3-k-30::before { content: ""; width: 14px; height: 2px; background: var(--text); }
.t3-ribbon-key .t3-k-60::before { content: ""; width: 14px; height: 0; border-top: 2px dashed var(--text-faint); }

/* --- Lo que cabe en el alto -------------------------------------------
   En la rejilla de fábrica estas piezas miden 4 filas (unos 280 px): la
   cifra baja a 34 px y las líneas de apoyo se aprietan, para que no haya
   scroll dentro de la pieza. Con más alto, el tamaño de héroe. */
.t3-split .tp-sub, .t3-hold-sub .tp-sub { font-size: var(--size-xs); line-height: 1.35; }
@container pieza (max-height: 379px) {
  .t3-split .tp-fig.tp-hero, .t3-holding .tp-fig.tp-hero { font-size: var(--size-2xl); }
  .t3-main { gap: 3px; }
  .t3-hide-low { display: none !important; }
}
@container pieza (max-height: 299px) {
  .t3-split .tp-fig.tp-hero { font-size: var(--size-xl); }
  .t3-ls { margin-top: 0; }
}
/* **Tres filas** (unos 216 px de alto; 2026-11-06): Whale wallets, Held by
   the ETFs y Liquidations bajan a tres filas de mínimo. A esa altura la
   cifra va a 24 px, el apoyo en una línea, el eje del gráfico se va (las
   fechas siguen en la lectura con el ratón) y el gráfico se queda con lo que
   sobra; en Liquidations se va la línea de los «squeeze» (la dice el
   gráfico, con sus rombos) y el veredicto va en una línea. */
@container pieza (max-height: 239px) {
  .widget.tp.t3-holding .tp-fig.tp-hero, .t3-liq .tp-fig.tp-hero { font-size: var(--size-xl); line-height: 1.1; }
  .widget.tp.t3-holding > .tp-body { gap: 4px; }
  .t3-hold-sub { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .t3-hold-sub .tp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .t3-hold-sub .tp-sub:first-child { flex: none; }
  .t3-holding .t3-plot, .t3-liq .t3-plot { min-height: 30px; }
  .t3-holding .t3-axis, .t3-liq .t3-axis { display: none; }
  .t3-liq .t3-main .tp-hide-small { display: none; }
  .t3-liq .t3-main > .tp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t3-liq .t3-split { gap: var(--s2); }
}

/* Una pieza estrecha (3 columnas, unos 290 px): título y selector más
   apretados para que quepan en una línea sin cortar el título. */
@container pieza (max-width: 359px) {
  .widget.tp.t3-holding > header .tp-title { font-size: var(--size-base); flex: none; }
  .widget.tp.t3-holding > header.tp-head { gap: 6px; }
  .widget.tp.t3-holding .tp-seg button { min-width: 28px; padding: 0 6px; }
  .t3-holding .t3-usd { font-size: var(--size-sm); }
  .widget.tp.t3-holding .tp-fig.tp-hero { font-size: var(--size-xl); }
  .widget.tp.t3-holding > .tp-body { gap: 6px; }
}
/* Y además baja (3×4 en la rejilla, unos 290×280 px): el pie se va para que
   el gráfico quepa entero; la fuente sigue citada en la «i». */
@container pieza (max-width: 359px) and (max-height: 299px) {
  .widget.tp.t3-holding > .tp-foot { display: none; }
  .widget.tp.t3-holding > .tp-body:not(:last-child) { padding-bottom: var(--s4); }
}
/* En una pieza estrecha el título largo («How long coins have sat still»)
   pasa a dos líneas en vez de cortarse. */
@container pieza (max-width: 379px) {
  .widget.tp.t3-hodl > header .tp-title, .widget.tp.t3-miners > header .tp-title,
  .widget.tp.t3-liq > header .tp-title { white-space: normal; line-height: 1.2; }
}

/* ======================================================================
   Interactividad y efecto visual (2026-11-05)
   ======================================================================
   «Quiero mucho efecto visual, no una página y unas cajas estáticas». Como
   en las tandas 1 y 2, sin script propio: lectura con `mkthover.js`
   (`data-mc`), bocadillos con `[data-tp-tip]` y el resto CSS, que vuelve a
   correr solo al cambiar de rango (`bb:swap`).

   - HODL: el tramo señalado crece y los demás se apagan; su cifra de debajo
     se enciende y al revés (`data-b`). La llave «> 1 year» señala sus dos
     tramos.
   - Liquidaciones: cada día es un grupo (`.t3-d`): se encienden juntas sus
     dos barras. «Longs» y «Shorts» de la leyenda apagan la otra serie; el
     rombo de «Squeeze» señala los días de squeeze.
   - Mineros: «30-day» y «60-day» señalan su línea.
   - Entrada: líneas que se dibujan, barras que crecen desde su cero en
     cascada, tramos que se llenan, cifra grande con halo, punto final que
     late. Nada se mueve con `prefers-reduced-motion: reduce`. */

/* --- El foco ------------------------------------------------------------ */
.t3-lplot.mc-on:hover .t3-line { stroke-width: 2.6; }
.t3-lplot.mc-on:hover .t3-fill { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.t3-lplot.mc-on:hover .t3-sma30 { stroke-width: 2.6; }
.t3-lplot.mc-on:hover > .t3-enddot { opacity: .3; }
.t3-enddot { transition: opacity .15s; }

/* HODL: tramos y su leyenda, enlazados. */
.t3-stack i { transition: opacity .15s, transform .15s; cursor: default; }
.t3-stack:hover i:not(:hover) { opacity: .35; }
.t3-stack i:hover { outline: 0; box-shadow: 0 0 0 1px var(--text-muted), 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.t3-bandkeys li { border-radius: 4px; transition: opacity .15s, background .15s; }
.t3-hodl:has(.t3-stack [data-b="1"]:hover) .t3-bandkeys li:not([data-b="1"]),
.t3-hodl:has(.t3-stack [data-b="2"]:hover) .t3-bandkeys li:not([data-b="2"]),
.t3-hodl:has(.t3-stack [data-b="3"]:hover) .t3-bandkeys li:not([data-b="3"]),
.t3-hodl:has(.t3-stack [data-b="4"]:hover) .t3-bandkeys li:not([data-b="4"]),
.t3-hodl:has(.t3-stack [data-b="5"]:hover) .t3-bandkeys li:not([data-b="5"]) { opacity: .35; }
.t3-hodl:has(.t3-bandkeys [data-b="1"]:hover) .t3-stack i:not([data-b="1"]),
.t3-hodl:has(.t3-bandkeys [data-b="2"]:hover) .t3-stack i:not([data-b="2"]),
.t3-hodl:has(.t3-bandkeys [data-b="3"]:hover) .t3-stack i:not([data-b="3"]),
.t3-hodl:has(.t3-bandkeys [data-b="4"]:hover) .t3-stack i:not([data-b="4"]),
.t3-hodl:has(.t3-bandkeys [data-b="5"]:hover) .t3-stack i:not([data-b="5"]) { opacity: .3; }
.t3-bandkeys li:hover { background: var(--surface-hover); }
.t3-year { cursor: default; transition: border-color .15s; }
.t3-year:hover { border-color: var(--accent); }
.t3-year:hover span { color: var(--accent); }
.t3-hodl:has(.t3-year:hover) .t3-stack i:not(.t3-y) { opacity: .25; }

/* Liquidaciones. */
.t3-bars .t3-d { transition: opacity .15s, filter .15s; }
.t3-bars:has(.t3-d:hover) .t3-d:not(:hover) { opacity: .35; }
.t3-bars .t3-d:hover { filter: brightness(1.25); }
.t3-bars .t3-l, .t3-bars .t3-s { transition: opacity .15s; }
.t3-liq-key .tp-key, .t3-k-sq { cursor: default; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
.t3-liq-key .tp-key:hover, .t3-liq-key .tp-key:focus-visible, .t3-k-sq:hover, .t3-k-sq:focus-visible { background: var(--surface-hover); color: var(--text); outline: 0; }
.t3-liq:has(.t3-k-l:hover) .t3-bars .t3-s, .t3-liq:has(.t3-k-l:focus-visible) .t3-bars .t3-s,
.t3-liq:has(.t3-k-s:hover) .t3-bars .t3-l, .t3-liq:has(.t3-k-s:focus-visible) .t3-bars .t3-l { opacity: .15; }
.t3-liq:has(.t3-k-l:hover) .t3-ls-bar .down, .t3-liq:has(.t3-k-s:hover) .t3-ls-bar .up { opacity: .3; }
.t3-liq:has(.t3-k-sq:hover) .t3-bars .t3-d:not(.t3-sqd), .t3-liq:has(.t3-k-sq:focus-visible) .t3-bars .t3-d:not(.t3-sqd) { opacity: .2; }
.t3-liq:has(.t3-k-sq:hover) .t3-sq { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 25%, transparent), 0 0 12px var(--text); }
.t3-ls-bar i { transition: opacity .15s, transform .15s; cursor: default; }
.t3-ls-bar:hover i:not(:hover) { opacity: .4; }

/* Mineros: la leyenda señala su línea. */
.t3-ribbon path { transition: opacity .15s, stroke-width .15s; }
.t3-ribbon-key .t3-k-30, .t3-ribbon-key .t3-k-60 { cursor: default; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; }
.t3-ribbon-key .t3-k-30:hover, .t3-ribbon-key .t3-k-60:hover,
.t3-ribbon-key .t3-k-30:focus-visible, .t3-ribbon-key .t3-k-60:focus-visible { background: var(--surface-hover); color: var(--text); outline: 0; }
.t3-miners:has(.t3-k-30:hover) .t3-sma60, .t3-miners:has(.t3-k-30:focus-visible) .t3-sma60,
.t3-miners:has(.t3-k-60:hover) .t3-sma30, .t3-miners:has(.t3-k-60:focus-visible) .t3-sma30 { opacity: .2; }
.t3-miners:has(.t3-k-30:hover) .t3-sma30, .t3-miners:has(.t3-k-60:hover) .t3-sma60 { stroke-width: 3; }
.t3-miners:has(.t3-k-30:hover) .t3-band, .t3-miners:has(.t3-k-60:hover) .t3-band { opacity: .4; }
.t3-state .tp-chip { transition: box-shadow .2s; }
.t3-state .tp-chip:hover { box-shadow: 0 0 0 1px currentColor, 0 0 12px color-mix(in srgb, currentColor 35%, transparent); }

/* --- La entrada y el latido ------------------------------------------- */
@keyframes t3-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes t3-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes t3-grow-y { from { transform: scaleY(0); } }
@keyframes t3-grow-x { from { transform: scaleX(0); } }
@keyframes t3-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes t3-pop-sq { from { opacity: 0; transform: rotate(45deg) scale(.2); } }
@keyframes t3-fig { from { opacity: 0; transform: translateY(5px);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); } }
@keyframes t3-beat { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes t3-glow { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 20%, transparent); } }

@media (prefers-reduced-motion: no-preference) {
  .t3-main > *, .t3-side > *, .t3-hold-top, .t3-hold-sub, .t3-holding > .tp-body > .t3-axis {
    animation: t3-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .t3-main > :nth-child(2), .t3-side > :nth-child(2) { animation-delay: .05s; }
  .t3-main > :nth-child(n+3), .t3-side > :nth-child(n+3), .t3-hold-sub { animation-delay: .1s; }
  .t3-split .tp-fig.tp-hero, .t3-holding .tp-fig.tp-hero { animation: t3-fig .6s .05s cubic-bezier(.2, .7, .2, 1) backwards; }
  /* La línea se dibuja; el punto final llega y late. */
  .t3-lplot > svg { animation: t3-wipe .9s .1s cubic-bezier(.4, 0, .2, 1) backwards; }
  .t3-lplot > .t3-enddot { animation: t3-pop .3s .9s backwards; }
  .t3-lplot > .t3-enddot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--k, var(--accent));
    animation: t3-beat 2.4s 1.3s ease-out infinite; }
  /* Los tramos de la HODL se llenan de izquierda a derecha. */
  .t3-stack i { animation: t3-grow-x .5s calc(var(--i, 0) * 80ms + .1s) cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t3-stack i:hover { transform: scaleY(1.35); }
  /* Las barras de las liquidaciones crecen desde el cero, día a día. */
  .t3-liq-div .t3-d .t3-l { transform-box: fill-box; transform-origin: bottom; }
  .t3-liq-div .t3-d .t3-s { transform-box: fill-box; transform-origin: top; }
  .t3-liq-stk .t3-d rect { transform-box: view-box; transform-origin: 50% 100%; }
  .t3-bars .t3-d rect { animation: t3-grow-y .5s calc(var(--i, 0) * 9ms + .1s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .t3-sq { animation: t3-pop-sq .35s .7s cubic-bezier(.2, .7, .2, 1.4) backwards, t3-glow 2.4s 1.2s ease-in-out infinite; }
  .t3-ls-bar i { animation: t3-grow-x .6s .15s cubic-bezier(.2, .7, .2, 1) backwards; transform-origin: left; }
  .t3-ls-bar i.down { transform-origin: right; }
  .t3-ls-bar i:hover { transform: scaleY(1.4); }
  /* La vista de las liquidaciones que se elige aparece. */
  .t3-liq:has(.t3-view input[value="stacked"]:checked) .t3-liq-stk,
  .t3-liq:has(.t3-view input[value="diverging"]:checked) .t3-liq-div { animation: t3-in .3s backwards; }
  .t3-state .tp-chip { animation: t3-pop .4s .5s cubic-bezier(.2, .7, .2, 1.3) backwards; }
}