/* Tanda 4 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
   (.t4-…) o bajo [data-tp="clave"] de sus piezas. Contrato: final de
   terminal_plan.md.

   Narratives (2026-11-04). Las piezas: Threads, Most talked about, Gaining /
   Losing attention, Who has the conversation, Tone, Talk against move, Often
   in the same story, The widest stories, What the news is about, News
   against price, The live archive y las cuatro de la parte de arriba de
   /narratives (Attention this week, This week in the news, Gaining and
   falling in news, Most covered story), que usan además las clases `nl-*` de
   blockboard.css.

   **Sin JavaScript propio.** Los conmutadores (Change / Volume, Stacked /
   Diverging) son dos `radio` dentro del selector y `:has()`; la nota del pie
   de Threads y el realce del anillo, `:has()` sobre la fila señalada. Colores:
   la atención sube en verde y baja en rojo (`--up-fill` / `--down`, decisión
   del 2026-11-01 en /narratives); estrés en `--amber-400` y avance en
   `--accent`, como la sección. Nunca un hex. */

/* --- común ----------------------------------------------------------------- */
.tp[data-tp^="nr."] .up, .tp[data-tp="narratives"] .up { color: var(--up); }
.tp[data-tp^="nr."] .down, .tp[data-tp="narratives"] .down { color: var(--down); }
.t4-chg { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t4-px { font-size: var(--size-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-muted); }
.t4-px.up { color: var(--up); }
.t4-px.down { color: var(--down); }
.t4-none { margin: 0; padding: var(--s2) 0; font-size: var(--size-xs); color: var(--text-faint); }
/* Las iniciales de quien no tiene logo, en sus tamaños (sin estilos en línea). */
.nl-mono.t4-s18 { width: 18px; height: 18px; font-size: 8px; }
.nl-mono.t4-s20 { width: 20px; height: 20px; font-size: 8px; }
.nl-mono.t4-s22 { width: 22px; height: 22px; font-size: 9px; }
.nl-mono.t4-s30 { width: 30px; height: 30px; font-size: 13px; }
.tp img.nl-ava[width="22"] { width: 22px; height: 22px; }
.tp img.nl-ava[width="18"] { width: 18px; height: 18px; }
.tp img.nl-ava[width="30"] { width: 30px; height: 30px; }

/* **Sólo las filas que caben** (F10: «cortan la última fila a media
   altura»). Una fila mide unos 38 px; la cabecera y el pie de la pieza, unos
   104. Por el alto de la pieza se quitan las que no caben enteras, nunca se
   corta una por la mitad. */
@container pieza (max-height: 407px) { .t4-fit > .tp-row:nth-child(n+8) { display: none; } }
@container pieza (max-height: 369px) { .t4-fit > .tp-row:nth-child(n+7) { display: none; } }
@container pieza (max-height: 331px) { .t4-fit > .tp-row:nth-child(n+6) { display: none; } }
@container pieza (max-height: 293px) { .t4-fit > .tp-row:nth-child(n+5) { display: none; } }
@container pieza (max-height: 255px) { .t4-fit > .tp-row:nth-child(n+4) { display: none; } }
/* Una fila que es un enlace: el nombre se ilumina, no se subraya. */
.tp a.tp-row { color: inherit; text-decoration: none; }
.tp a.tp-row:hover b.tp-grow, .tp a.tp-row:focus-visible b.tp-grow { color: var(--accent); }
.tp a.tp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
/* La marca de la semana anterior (o del precio) sobre una barra con pista. */
.t4-mark { position: absolute; top: -3px; bottom: -3px; left: calc(var(--p, 0) * 1%); width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--text); }
.tp-bar:has(> .t4-mark) { overflow: visible; }
/* Leyenda: colores de la tanda sobre `.tp-key`. */
.t4-k-up { --k: var(--up-fill); } .t4-k-down { --k: var(--down); } .t4-k-prev { --k: var(--track); }
.t4-k-st { --k: var(--amber-400); } .t4-k-gd { --k: var(--accent); }
.t4-k-acc { --k: var(--accent); } .t4-k-vio { --k: var(--violet-400); }

/* Dos columnas de filas cuando la pieza es ancha; una si no. */
.t4-two { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s6, 24px); align-content: start; }
.t4-two > .tp-row:first-child { border-top: 0; }
.t4-two > .tp-row:nth-child(n+9) { display: none; }
@container pieza (min-width: 520px) {
  .t4-two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column;
    grid-template-rows: repeat(4, auto); }
  .t4-two > .tp-row:nth-child(5) { border-top: 0; }
  .t4-two.t4-fit > :nth-child(n+5):nth-child(-n+8) { display: grid; }
}
/* A dos columnas y con tres filas de alto: tres por columna. */
@container pieza (min-width: 520px) and (max-height: 255px) {
  .t4-two { grid-template-rows: repeat(3, auto); }
  .t4-two > .tp-row:nth-child(5) { border-top: 1px solid var(--tp-div); }
  .t4-two > .tp-row:nth-child(4) { border-top: 0; }
  .t4-two.t4-fit > :nth-child(n+4):nth-child(-n+6) { display: grid; }
  .t4-two.t4-fit > .tp-row:nth-child(n+7) { display: none; }
}

/* El conmutador de vista (`.tp-seg t4-sw`): la forma es la común de
   `terminal-pieces.css` (radios en `.tp-seg`, integración del 2026-11-04). */

/* --- 07 Threads --------------------------------------------------------- */
.t4-thr-hd, .t4-thr-row { display: grid; grid-template-columns: 14px 22px minmax(0, 1fr) minmax(48px, 26%) 40px 60px;
  align-items: center; gap: var(--s2); }
.t4-thr-hd { font-size: var(--size-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
  padding-bottom: var(--s1); border-bottom: 1px solid var(--tp-div); }
.t4-thr-hd > span:first-child { grid-column: 1 / 4; }
.t4-thr-tp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.t4-tick { display: inline-block; width: 2px; height: 10px; border-radius: 1px; background: var(--text); }
.t4-thr-n { text-align: right; }
.t4-thr-row .t4-thr-n { font-size: var(--size-base); }
.t4-thr-sr { text-align: right; color: var(--text-faint); font-size: var(--size-xs); white-space: nowrap; }
.t4-thr-sr b { color: var(--text-muted); font-weight: 600; }
.t4-thr-row { padding: 6px 0; }
.t4-thr-hd .t4-thr-sr { white-space: normal; line-height: 1.15; }
/* Las filas que caben enteras (cabecera de columnas y pie aparte). */
.t4-thr .tp-body { gap: var(--s2); }
@container pieza (max-height: 440px) { .t4-thr-row.r7 { display: none; } }
@container pieza (max-height: 402px) { .t4-thr-row.r6 { display: none; } }
@container pieza (max-height: 364px) { .t4-thr-row.r5 { display: none; } }
@container pieza (max-height: 326px) { .t4-thr-row.r4 { display: none; } }
@container pieza (max-height: 288px) { .t4-thr-row.r3 { display: none; } }
.t4-thr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-dir { font-size: var(--size-sm); font-weight: 700; text-align: center; }
.t4-dir-up { color: var(--accent); } .t4-dir-down { color: var(--violet-400); } .t4-dir-flat, .t4-dir-new { color: var(--text-faint); }
/* La fila señalada: la primera al cargar, la que tenga el ratón o el foco
   después. */
.t4-thr-rows:has(.t4-thr-row:hover, .t4-thr-row:focus-visible) .t4-thr-row.on:not(:hover):not(:focus-visible) {
  background: none; }
.t4-thr-row:hover { background: var(--surface-hover); border-radius: var(--radius-sm); }
.t4-thr-ft { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3);
  font-size: var(--size-xs); color: var(--text-faint); padding-top: var(--s2); border-top: 1px solid var(--tp-div); }
.t4-thr-key { display: inline-flex; gap: 4px; white-space: nowrap; }
.t4-thr-key > span { margin-left: 6px; }
.t4-thr-key > span:first-child { margin-left: 0; }
.t4-thr-notes { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-thr-notes b { color: var(--text); }
.t4-note { display: none; }
.t4-thr-notes .n1 { display: inline; }
.t4-thr:has(.t4-thr-row:hover, .t4-thr-row:focus-visible) .t4-thr-notes .n1 { display: none; }
.t4-thr:has(.r1:hover, .r1:focus-visible) .t4-thr-notes .n1,
.t4-thr:has(.r2:hover, .r2:focus-visible) .t4-thr-notes .n2,
.t4-thr:has(.r3:hover, .r3:focus-visible) .t4-thr-notes .n3,
.t4-thr:has(.r4:hover, .r4:focus-visible) .t4-thr-notes .n4,
.t4-thr:has(.r5:hover, .r5:focus-visible) .t4-thr-notes .n5,
.t4-thr:has(.r6:hover, .r6:focus-visible) .t4-thr-notes .n6,
.t4-thr:has(.r7:hover, .r7:focus-visible) .t4-thr-notes .n7 { display: inline; }
/* Estrecha: fuera la columna de medios, y luego el impulso. */
@container pieza (max-width: 380px) {
  .t4-thr-hd, .t4-thr-row { grid-template-columns: 14px 22px minmax(0, 1fr) minmax(40px, 30%) 40px; }
  .t4-thr-sr { display: none; }
}
@container pieza (max-width: 300px) {
  .t4-thr-hd, .t4-thr-row { grid-template-columns: 12px 22px minmax(0, 1fr) minmax(36px, 32%); }
  .t4-thr-n { display: none; }
  .t4-thr-key { display: none; }
}

/* --- 22 Most talked about this week --------------------------------------- */
.t4-top .t4-two { --t4-rows: 4; }
.t4-top-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(48px, 34%) auto; align-items: center; gap: var(--s2); }
.t4-top-row .tp-end { min-width: 5.2em; text-align: right; white-space: nowrap; }
.t4-top-row .tp-end b { font-weight: 700; }
.t4-v-vol { display: none; }
.t4-top:has(input[value="volume"]:checked) .t4-v-chg { display: none; }
.t4-top:has(input[value="volume"]:checked) .t4-v-vol { display: block; }
.t4-top:has(input[value="volume"]:checked) .tp-end.t4-v-vol { display: inline; }
.t4-vol > i { background: var(--accent); }

/* --- 23 Gaining / Losing attention ---------------------------------------- */
.t4-mov-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(48px, 38%) minmax(4.6em, auto); align-items: center; gap: var(--s2); }
.t4-mov-row .tp-end { text-align: right; }
.t4-dbl { display: grid; gap: 3px; }
.t4-dbl .tp-bar { height: 5px; }
.t4-prev > i { background: var(--text-faint); opacity: .55; }
@container pieza (max-width: 360px) { .t4-mov .tp-legend { display: none; } }
@container pieza (max-width: 300px) {
  .t4-mov-row { grid-template-columns: 22px minmax(0, 1fr) minmax(4.6em, auto); }
  .t4-mov-row .t4-dbl { display: none; }
}

/* --- 24 Who has the conversation ------------------------------------------ */
.t4-share-in { display: flex; align-items: center; gap: var(--s4); min-width: 0; flex: 1 1 auto; }
.t4-donut { position: relative; flex: none; width: clamp(96px, 34cqi, 150px); aspect-ratio: 1; }
.t4-donut svg { width: 100%; height: 100%; display: block; }
.t4-ring { fill: none; stroke: var(--track); stroke-width: 13; }
.t4-arc { fill: none; stroke: var(--k); stroke-width: 13; transition: opacity .15s; }
.t4-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.t4-mid-v { grid-area: 1 / 1; display: none; flex-direction: column; align-items: center; line-height: 1.1; }
.t4-mid-v b { font-size: var(--size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.t4-mid-v small { font-size: var(--size-2xs); color: var(--text-muted); max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-mid .m1 { display: flex; }
.t4-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.t4-leg li > a, .t4-leg li > span { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: 1px 4px;
  border-radius: var(--radius-sm); color: inherit; font-size: var(--size-xs); transition: opacity .15s; }
.t4-leg li > a:hover { background: var(--surface-hover); }
.t4-leg i { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--k); }
.t4-leg .tp-grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El realce enlazado: pasar por un nombre (o por su tramo) apaga los demás
   y pone su parte en el centro. Hasta seis tramos. */
.t4-share:has(.t4-leg li:hover, .t4-arc:hover) .t4-arc { opacity: .28; }
.t4-share:has(.t4-leg li:hover, .t4-arc:hover) .t4-leg li > * { opacity: .5; }
.t4-share:has(.t4-leg li:hover, .t4-arc:hover) .t4-mid .m1 { display: none; }
.t4-share.t4-share.t4-share:has(.l1:hover, .a1:hover) :is(.a1, .l1 > *) { opacity: 1; }
.t4-share.t4-share.t4-share:has(.l2:hover, .a2:hover) :is(.a2, .l2 > *) { opacity: 1; }
.t4-share.t4-share.t4-share:has(.l3:hover, .a3:hover) :is(.a3, .l3 > *) { opacity: 1; }
.t4-share.t4-share.t4-share:has(.l4:hover, .a4:hover) :is(.a4, .l4 > *) { opacity: 1; }
.t4-share.t4-share.t4-share:has(.l5:hover, .a5:hover) :is(.a5, .l5 > *) { opacity: 1; }
.t4-share.t4-share.t4-share:has(.l6:hover, .a6:hover) :is(.a6, .l6 > *) { opacity: 1; }
.t4-share:has(.l1:hover, .a1:hover) .t4-mid .m1,
.t4-share:has(.l2:hover, .a2:hover) .t4-mid .m2,
.t4-share:has(.l3:hover, .a3:hover) .t4-mid .m3,
.t4-share:has(.l4:hover, .a4:hover) .t4-mid .m4,
.t4-share:has(.l5:hover, .a5:hover) .t4-mid .m5,
.t4-share:has(.l6:hover, .a6:hover) .t4-mid .m6 { display: flex; }
@container pieza (max-width: 300px) {
  .t4-share-in { flex-direction: column; align-items: stretch; }
  .t4-donut { align-self: center; width: 110px; }
}

/* --- 26 The tone of each thread ------------------------------------------- */
.t4-tone .t4-two { --t4-rows: 4; }
.t4-tone-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(56px, 42%) 5.4em; align-items: center; gap: var(--s2); }
.t4-stack { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); }
.t4-stack i { display: block; min-width: 2px; }
.t4-stack .st, .t4-div .st { background: var(--amber-400); }
.t4-stack .gd, .t4-div .gd { background: var(--accent); }
.t4-st-t { color: var(--amber-400); }
.t4-gd-t { color: var(--accent); }
.t4-tone-n { text-align: right; white-space: nowrap; }
.t4-v-div { display: none; }
.t4-tone:has(input[value="diverging"]:checked) .t4-tone-row { grid-template-columns: 22px minmax(0, 1fr) 2.2em minmax(64px, 44%) 2.2em; }
.t4-tone:has(input[value="diverging"]:checked) .t4-v-stk { display: none; }
.t4-tone:has(input[value="diverging"]:checked) .t4-v-div { display: block; }
.t4-tone:has(input[value="diverging"]:checked) .t4-div { display: grid; }
.t4-dv-n { text-align: right; }
.t4-dv-n.t4-gd-t { text-align: left; }
.t4-div { grid-template-columns: 1fr 1fr; height: 8px; }
.t4-div-l, .t4-div-r { position: relative; height: 100%; }
.t4-div-l { border-right: 1px solid var(--line-strong); }
.t4-div-l i, .t4-div-r i { position: absolute; top: 0; bottom: 0; width: calc(var(--v, 0) * 1%); min-width: 2px; }
.t4-div-l i { right: 0; border-radius: 4px 0 0 4px; }
.t4-div-r i { left: 0; border-radius: 0 4px 4px 0; }
.t4-tone-row.on { background: color-mix(in srgb, var(--amber-400) 9%, transparent); }
.t4-tone-key { display: inline-flex; gap: var(--s3); font-size: var(--size-2xs); color: var(--text-faint); }
@container pieza (min-width: 600px) { .t4-tone-key { display: none; } }

/* --- 27 Talk against move ------------------------------------------------- */
.t4-talk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s3); }
@container pieza (min-width: 640px) { .t4-talk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t4-talk-hd, .t4-talk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 4.4em 3em; align-items: center; gap: var(--s2); }
.t4-talk-hd { padding: 3px 6px; margin: 0 -6px; border-radius: var(--radius-sm); background: var(--seg-bg); border: 1px solid var(--tp-div);
  font-size: var(--size-sm); }
.t4-talk-hd .t4-talk-c { font-size: var(--size-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.t4-talk-c { text-align: right; white-space: nowrap; }
.t4-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.t4-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t4-ic-talk { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.t4-ic-move { color: var(--violet-400); background: color-mix(in srgb, var(--violet-400) 16%, transparent); }
.t4-ahead { color: var(--accent); }
.t4-behind { color: var(--violet-400); }
.t4-talk-row { border-top: 0; padding: 5px 0; }
@container pieza (max-width: 639px) and (max-height: 340px) { .t4-talk-col > .t4-talk-row:nth-child(n+4) { display: none; } }
.t4-talk-row + .t4-talk-row { border-top: 1px solid var(--tp-div); }

/* --- 28 Often in the same story ------------------------------------------- */
.t4-pair { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(40px, 34%) 2em; align-items: center; gap: var(--s2); }
.t4-duo { display: inline-flex; }
.t4-duo > :last-child { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }
.t4-pair-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.t4-pair-n a { color: inherit; }
.t4-pair-n a:hover { color: var(--accent); }
.t4-pair .tp-end { text-align: right; font-weight: 700; }
@container pieza (max-width: 300px) {
  .t4-pair { grid-template-columns: 36px minmax(0, 1fr) 2em; }
  .t4-pair-bar { display: none; }
}
/* La red, sólo en grande (y entonces en lugar de la lista). */
@container pieza (min-width: 600px) and (min-height: 380px) { .t4-pairs-list { display: none; } }
.t4-net svg { width: 100%; height: auto; display: block; overflow: visible; }
.t4-edge { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-linecap: round; }
.t4-badge rect { fill: var(--surface); stroke: var(--line-strong); }
.t4-badge text { fill: var(--text); font-size: 10px; font-weight: 700; }
.t4-node { fill: var(--surface-sunken); stroke: var(--line-strong); }
.t4-node-i { fill: var(--text-muted); font-size: 10px; font-weight: 700; }
.t4-node-l { fill: var(--text); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.t4-net a:hover .t4-node-l { fill: var(--accent); }

/* --- 29 The widest stories ------------------------------------------------ */
.t4-wide-row { display: flex; align-items: center; gap: var(--s3); }
.t4-count { flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 3.4em; padding: 1px 7px; border-radius: var(--radius-sm);
  background: var(--seg-bg); border: 1px solid var(--tp-div); }
.t4-count svg { width: 12px; height: 12px; fill: none; stroke: var(--text-faint); stroke-width: 1.4; stroke-linejoin: round; }
.t4-count b { font-size: var(--size-sm); }
.t4-wide-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-wide-row:hover .t4-wide-t { color: var(--accent); }
.t4-wide-who { font-size: var(--size-xs); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container pieza (min-height: 330px) { .t4-wide-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

/* --- 30 What the news is about -------------------------------------------- */
.t4-mix-list .tp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 40%) 2.6em 2.8em; align-items: center; gap: var(--s2); }
.t4-mix-list .tp-grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-mix-n, .t4-mix-p { text-align: right; }
@container pieza (max-width: 300px) {
  .t4-mix-list .tp-row { grid-template-columns: minmax(0, 1fr) 2.6em 2.8em; }
  .t4-mix-bar { display: none; }
}
/* El mapa de casillas, en grande y en lugar de la lista. */
@container pieza (min-width: 600px) and (min-height: 380px) { .t4-mix-list { display: none; } }
.tp-when-big.t4-tree { flex: 1 1 auto; }
@container pieza (min-width: 600px) and (min-height: 380px) {
  .tp-when-big.t4-tree { display: flex !important; }
}
.t4-tree { flex-wrap: wrap; gap: 4px; align-content: stretch; min-height: 200px; }
.t4-cell { flex: var(--w) 1 7em; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0;
  padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.t4-cell b { font-size: var(--size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t4-cell span { font-size: var(--size-sm); font-weight: 700; }
.t4-cell-1 { flex-basis: 34%; background: color-mix(in srgb, var(--accent) 62%, var(--surface)); color: var(--text); }
.t4-cell-1 span { font-size: var(--size-2xl); font-weight: 800; line-height: 1; }
.t4-cell-1 small { font-size: var(--size-xs); color: var(--text-muted); }

/* --- News against price, The live archive --------------------------------- */
.t4-map-in { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.t4-map-in svg { width: 100%; height: auto; max-height: 100%; }
.t4-arch-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.t4-arch-figs > span { display: grid; gap: 2px; min-width: 0; }
.t4-days { flex: 1 1 auto; min-height: 48px; display: flex; align-items: flex-end; gap: 3px; }
.t4-days i { flex: 1 1 0; min-width: 2px; height: calc(var(--h, 0) * 1%); min-height: 2px; border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--accent) 70%, transparent); }
.t4-days i:hover { background: var(--accent); }

/* --- las cuatro de la parte de arriba de /narratives ------------------------ */
.t4-att-in { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 auto; min-height: 0; }
.t4-att-in .nl-map { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: minmax(42px, auto); }
.t4-att-in .nl-map a { padding-block: 4px; }
.t4-att-in .nl-peek { min-height: 0; flex: none; }
.t4-att-in .nl-peek-p { gap: 4px; }
.t4-att .tp-body { gap: var(--s2); }
@container pieza (max-width: 420px) { .t4-att-in .nl-map a.big { grid-column: span 2; grid-row: span 1; } }
.t4-cells { flex: 1 1 auto; }
.t4-cells .nl-share i { background: var(--k); }
.t4-cells .nl-legend i { background: var(--k); }
.t4-mv { display: grid; gap: 4px; min-width: 0; }
.t4-moves > .tp-body { gap: var(--s2); }
.t4-mv-h { display: block; }
.t4-moves .tp-body { justify-content: center; }
@container pieza (min-width: 600px) {
  .t4-moves > .tp-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }
}
.t4-rot { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 auto; min-height: 0; }
.t4-rot .nl-hero-p.on { flex: 1; gap: var(--s2); align-content: space-between; }
.t4-tabs { align-self: flex-end; }
.widget.tp.t4-hero { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%); }

/* Una pieza estrecha: el título antes que el rótulo de la derecha. */
@container pieza (max-width: 420px) {
  .t4-talk .tp-label, .t4-att .tp-legend, .t4-wide .tp-label, .t4-pairs .tp-label { display: none; }
}
/* Attention: a la talla de salida caben dos historias de la casilla; la
   tercera, cuando la pieza es más alta. */
@container pieza (max-height: 600px) { .t4-att-in .nl-peek-p > .nl-story:nth-child(n+4) { display: none; } }
.t4-moves .nl-chip { min-height: 26px; }

/* --- Movimiento (2026-11-05) -------------------------------------------
   «Quiero mucho efecto visual, no una página y unas cajas estáticas». Lo
   común (barras que crecen, filas que entran, foco al pasar, realce
   enlazado `data-hl`, cifras que cuentan) va en t5.css con la clase `t46`
   que llevan todas las piezas de esta tanda; aquí, lo propio de cada una.
   Con «menos movimiento» t5.css lo apaga todo. */

/* The live archive: la barra señalada brilla; la de hoy (el día sigue
   abierto) lleva un punto que late en su extremo. */
.t4-days i { position: relative; transition: filter .18s ease, opacity .18s ease, transform .18s ease; }
.t4-days i:hover { background: var(--accent); filter: brightness(1.15); transform: scaleX(1.25); }
.t4-days i.t4-today { background: var(--accent); }
.t4-days i.t4-today::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--accent); animation: t46-pulse 1.8s ease-out infinite; }
.t4-arch-figs .tp-fig { font-variant-numeric: tabular-nums; }

/* Attention: la casilla señalada se levanta y brilla; las demás se apagan.
   La historia de la casilla entra con un fundido cada vez que cambia. */
.t4-att-in .nl-map a { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease; }
.t4-att-in .nl-map a:hover, .t4-att-in .nl-map a:focus-visible { transform: translateY(-2px) scale(1.03); z-index: 1;
  filter: brightness(1.12); box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 14%, transparent); }
.t4-att-in .nl-map:has(a:hover) a:not(:hover) { opacity: .62; }
.t4-att-in .nl-peek-p:not([hidden]) { animation: t46-in .3s ease-out backwards; }
.t4-att .tp-legend .tp-key { cursor: pointer; }

/* This week in the news: los tramos del tono y del reparto. */
.t4-cells .nl-tone i, .t4-cells .nl-share i { cursor: pointer; }
.t4-cells .nl-share i, .t4-cells .nl-tone i { transition: opacity .18s ease, filter .18s ease, transform .18s ease; }
.t4-cells :is(.nl-share, .nl-tone) i:hover { transform: scaleY(1.5); }
.t4-cells .nl-legend > span { cursor: pointer; border-radius: 4px; }
.t4-cells .t46-line { display: block; }

/* Most covered story: la historia entra con un fundido al tocarle el turno. */
.t4-rot .nl-hero-p.on { animation: t46-in .35s ease-out backwards; }
.t4-rot .nl-hero-n { --k: var(--accent); }

/* Threads: la marca del precio aparece después de su barra, y en la fila
   señalada la barra y la marca brillan. La leyenda del pie enciende las
   filas de su dirección. */
@keyframes t4-mark-in { from { opacity: 0; transform: scaleY(0); } }
.t4-thr-row .t4-mark { animation: t4-mark-in .45s .45s ease-out backwards; }
.t4-thr-row:hover .t4-mark, .t4-thr-row:focus-visible .t4-mark { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 25%, transparent); }
.t4-hk { display: inline-flex; gap: 3px; align-items: baseline; padding: 0 3px; border-radius: 4px; cursor: pointer; }
.t4-hk.hl { background: var(--surface-hover); }

/* Talk against move: la brecha con su barra pequeña debajo. */
.t4-talk-row .t4-talk-c:last-child { display: grid; justify-items: end; gap: 2px; }
.t4-gap { width: 100%; height: 3px; min-width: 0; }
.t4-ahead .t4-gap > i { background: var(--accent); }
.t4-behind .t4-gap > i { background: var(--violet-400); }

/* Often in the same story: las líneas se dibujan, los nombres aparecen; el
   nombre señalado crece y su contorno se enciende. */
.t4-edge { stroke-dasharray: 1; animation: t46-draw .8s ease-out backwards; animation-delay: calc(var(--d, 0) * 60ms); }
.t4-nd { cursor: pointer; }
.t4-nd .t4-node { transition: stroke .18s ease, stroke-width .18s ease; }
.t4-nd:hover .t4-node, .t4-nd.hl .t4-node { stroke: var(--accent); stroke-width: 2; }
.t4-badge { cursor: pointer; }
.t4-badge:hover rect, .t4-badge.hl rect { stroke: var(--accent); }

/* The widest stories: la chapa con su barra frente a la mayor. */
.t4-count { position: relative; }
.t4-count-bar { position: absolute; left: 6px; right: 6px; bottom: 1px; height: 2px; min-width: 0; background: none; }

/* What the news is about: la casilla señalada crece; las demás se apagan. */
.t4-cell { cursor: default; transition: transform .18s ease, opacity .18s ease, filter .18s ease; }
.t4-cell:hover { transform: scale(1.025); z-index: 1; }

/* News against price: los puntos aparecen, el señalado crece y los demás
   se apagan; la leyenda enciende los de su color (por su relleno, que pone
   `charts.news_price_map`). */
.t4-map-in circle { animation: t46-pop .5s cubic-bezier(.2, .9, .3, 1.3) backwards; transform-box: fill-box; transform-origin: center;
  transition: transform .18s ease, opacity .18s ease, fill-opacity .18s ease; }
.t4-map-in a:nth-of-type(2n) circle { animation-delay: 60ms; }
.t4-map-in a:nth-of-type(3n) circle { animation-delay: 120ms; }
.t4-map-in a:nth-of-type(5n) circle { animation-delay: 180ms; }
.t4-map-in a:hover circle { transform: scale(1.35); fill-opacity: .9; }
.t4-map-in svg:has(a:hover) a:not(:hover) { opacity: .35; }
.t4-map-k { cursor: pointer; }
.t4-map:has(.t4-map-k[data-k="more"]:hover) .t4-map-in a:has(circle:not([fill="var(--accent)"])) { opacity: .15; }
.t4-map:has(.t4-map-k[data-k="less"]:hover) .t4-map-in a:has(circle:not([fill="var(--violet-400)"])) { opacity: .15; }