/* ── Mercado (transfer rumours) — the market control-room.
 *
 * Design thesis (see docs/handoffs/2026-07-16-transfer-rumours-DESIGN-BRIEF.md):
 * spend the intensity on the SIGNAL, not the chrome. The canvas is calm and
 * near-black; the two axes of meaning scream — probability HEAT (ordinal, cold→
 * hot) and source CREDIBILITY (purple/indigo), NEVER fused. "Oficial ✓" is the
 * only place brand-green means "closed". These `--mk-*` tokens are proposed
 * additions to DESIGN.md; scoped here for the labs prototype (tokens.css is
 * generated — never hand-edited).
 * ────────────────────────────────────────────────────────────────────────── */

/* Todo el fichero vive en @layer components como el resto de componentes.
   El cuerpo no se re-indenta a propósito: preservar blame/diff pesa más que
   la sangría; el cierre está en la última línea del fichero. */
@layer components {

:root {
    /* Probability heat ramp — an ORDINAL scale (LOW cold → IMMINENT hot).
       IMMINENT is a coral distinct from --color-live so "here we go" never
       reads as "playing live". */
    --mk-prob-low: color-mix(in oklab, var(--color-text-muted) 78%, transparent);
    --mk-prob-medium: var(--color-accent-secondary);
    --mk-prob-high: var(--color-warning);
    --mk-prob-imminent: #ff5a3c;

    /* Escala de CONVICCIÓN (veredicto del movimiento): rumour → imminent. Una
       rampa de 5 pasos gris → amarillo → naranja → verde → rojo, para que
       "avanzado", "muy probable" e "inminente" dejen de compartir color. Verde
       para "muy probable" (validado con el PO); rojo-coral para "inminente" (el
       mismo --mk-prob-imminent del resto de la app, con su pulso). El naranja es
       propio, entre el ámbar warning y el coral. Feed y ficha comparten estos
       tokens vía .pm-conviction__label, así que nunca discrepan. */
    --mk-conviction-rumour: var(--color-text-subtle);
    --mk-conviction-negotiating: var(--color-warning);
    --mk-conviction-advanced: #fb923c;
    --mk-conviction-very-likely: var(--color-accent);
    --mk-conviction-imminent: var(--mk-prob-imminent);

    /* "Oficial ✓" — the circle closes. Brand green, and nowhere else. */
    --mk-official: var(--color-accent);

    /* Balance bars — money OUT vs money IN. Own tokens on purpose:
       --mk-official is reserved for the Oficial ✓ story, and the imminent
       coral means "about to happen", not "spent". */
    --mk-spend: #ff5a3c;
    --mk-income: var(--color-accent);
}

/* ── Page shell ─────────────────────────────────────────────────────────── */

.mercado {
    --_gutter: 16px;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    /* The shell (.app__content) clears the nav BAR — but the centre FAB
       overhangs above it, so the last card still needs its own cushion or
       it kisses the button (user call 2026-07-23). */
    padding-bottom: 48px;
}

/* Embebido como el tab "Mercado" de la página de equipo: el shell del equipo
   ya posee la altura de viewport y el fondo, así que el cuerpo suelta su marco
   de pantalla completa y fluye dentro del panel del tab, igualando el resto de
   tabs. El gutter lateral (.mk-section) se mantiene. */
.mercado--embedded {
    min-height: 0;
    background: transparent;
    padding-bottom: 24px;
    /* Sin gutter propio: el panel del tab de equipo ya provee el margen
       lateral, así el mercado se alinea con plantilla/clasificación. */
    --_gutter: 0px;
}

/* ── The constellation — hero ───────────────────────────────────────────── */

.constellation {
    position: relative;
    margin: 6px var(--_gutter) 0;
    padding: 12px 0 18px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 34%,
            color-mix(in oklab, var(--color-accent) 10%, transparent) 0%,
            transparent 62%),
        var(--color-surface-sunken);
    border: 1px solid var(--color-surface-border);
    overflow: hidden;
}

.cc-svg {
    display: block;
    inline-size: 100%;
    max-inline-size: 340px;
    margin-inline: auto;
    aspect-ratio: 1;
    overflow: visible;
}

/* Probability heat resolution for the graph elements (mirrors the card). */
.cc-node[data-prob="LOW"], .cc-edge[data-prob="LOW"] { --_prob: var(--mk-prob-low); }
.cc-node[data-prob="MEDIUM"], .cc-edge[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.cc-node[data-prob="HIGH"], .cc-edge[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.cc-node[data-prob="IMMINENT"], .cc-edge[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

.cc-edge {
    stroke: var(--_prob, var(--mk-prob-low));
    stroke-linecap: round;
    opacity: 0.5;
}

.cc-edge--official { stroke: var(--mk-official); opacity: 0.72; }

.cc-node__bg { fill: var(--color-surface); }

.cc-node__ring {
    fill: none;
    stroke: var(--_prob, var(--mk-prob-low));
    stroke-width: 2;
    opacity: 0.85;
}

.cc-node--official .cc-node__ring { stroke: var(--mk-official); stroke-width: 2.4; }

.cc-focus__glow {
    fill: var(--color-accent);
    opacity: 0.14;
    transform-box: fill-box;
    transform-origin: center;
    animation: cc-breathe 4s ease-in-out infinite;
}

.cc-focus__bg { fill: var(--color-surface); }

.cc-focus__ring {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
}

@keyframes cc-breathe {
    0%, 100% { opacity: 0.1; transform: scale(0.94); }
    50% { opacity: 0.2; transform: scale(1.06); }
}

.constellation__cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
    text-align: center;
}

.constellation__kicker {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.constellation__name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.constellation__sub {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .cc-focus__glow { animation: none; }
}

/* ── Section header ─────────────────────────────────────────────────────── */

/* ONE gutter, owned here: children (strip, pills, rail) never add their own.
   6px top — tightened from 12 (user call 2026-07-23: the screens breathe
   enough card-to-card; the taller rhythm read as dead space). */
.mk-section {
    padding: 6px var(--_gutter) 0;
}

.mk-empty {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 0;
    margin: 0;
}

/* Live pulse dot for the "here we go" ticker head — coral, breathing. */
.mk-pulse {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--mk-prob-imminent);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--mk-prob-imminent) 60%, transparent);
    animation: mk-pulse 2.4s ease-out infinite;
}

@keyframes mk-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mk-prob-imminent) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Rumour card — the atomic unit (dense, scannable) ───────────────────── */

.rumour-strip {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.mk-prob {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--_prob);
    border: 1px solid color-mix(in oklab, var(--_prob) 42%, transparent);
    background: color-mix(in oklab, var(--_prob) 13%, transparent);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

/* Desmentido por los hechos: el jugador fichó por otro club. Se apaga a
   propósito — el mismo chip con color de probabilidad seguiría sugiriendo una
   operación viva, que es justo lo que este estado niega. */
.mk-prob--refuted {
    --_prob: var(--color-text-subtle);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* EJE 3 — convicción por movimiento. El pill MANDA en la cabecera (la señal
   agregada prensa+feed, no el rumor suelto), coloreado por la etiqueta vía
   --_prob sobre la rampa de convicción de 5 pasos (gris → amarillo → naranja →
   verde → rojo). El desglose ("7 medios · 3 lo dan por hecho") va debajo y lo
   hace explicable — nunca una etiqueta pelada. Mismos tokens en feed y ficha. */
.pm-conviction__label {
    --_prob: var(--mk-conviction-very-likely);
}

.pm-conviction__label[data-conviction="rumour"] { --_prob: var(--mk-conviction-rumour); }
.pm-conviction__label[data-conviction="negotiating"] { --_prob: var(--mk-conviction-negotiating); }
.pm-conviction__label[data-conviction="advanced"] { --_prob: var(--mk-conviction-advanced); }
.pm-conviction__label[data-conviction="very_likely"] { --_prob: var(--mk-conviction-very-likely); }
.pm-conviction__label[data-conviction="imminent"] { --_prob: var(--mk-conviction-imminent); }

.pm-conviction__breakdown {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

/* El veredicto agregado a la derecha de la cabecera: el pill de convicción
   arriba y el importe justo debajo, alineados al borde. La card es la media de
   todo, así que estas dos cifras SON la card — el resto (cada medio) va abajo. */
.pm-dossier__verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
    text-align: end;
}

.pm-dossier__fee {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    white-space: nowrap;
}

.pm-dossier__fee .mk-money {
    font-size: inherit;
    font-weight: inherit;
}

/* La fecha corona el veredicto (encima del pill); resetea el margin-auto que
   .pm-dossier__when trae para el footer y la deja pequeña arriba a la derecha. */
.pm-verdict__when {
    margin: 0;
    font-size: 0.7rem;
}

/* El desglose de la convicción, cuando vive en el footer del agregado, se
   empuja a la derecha (la fecha ya no está aquí). */
.pm-dossier__foot .pm-conviction__breakdown {
    margin: 0 0 0 auto;
}

/* "Acabó fichando por X" — el desenlace real bajo la cabecera del dossier. */
.pm-dossier__refuted {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.pm-dossier__refuted-date {
    margin-inline-start: 6px;
    opacity: 0.75;
}

/* "Oficial ✓" pill — the close of the circle, brand-green. */
.mk-official {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-on-accent);
    background: var(--mk-official);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

@media (prefers-reduced-motion: reduce) {
    .mk-pulse { animation: none; }
}

.mk-back {
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    margin-inline-start: -8px;
    color: var(--color-text);
    text-decoration: none;
}

/* Inside .mk-section--feed — the section owns the gutter. */
.mk-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 0 4px;
}

.mk-pager__btn {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    text-decoration: none;
}

.mk-pager__at {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-text-muted);
}

/* ── Filter bottom-sheet ────────────────────────────────────────────────── */

.mk-sheet {
    position: fixed;
    inset: 0;
    /* above the bottom-nav (z-index 200) so the sheet covers it when open */
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mk-sheet[hidden] { display: none; }

/* El sheet del mercado por club se incluye DENTRO del cuerpo, que en el tab de
   equipo hereda `--_gutter: 0` (embebido). El sheet es un overlay a viewport, así
   que re-fija su propio gutter para que su padding no dependa del host y se lea
   igual que el embudo global. */
.mk-sheet--card { --_gutter: 16px; }

.mk-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-overlay, rgb(0 0 0 / 55%));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mk-sheet--open .mk-sheet__scrim { opacity: 1; }

.mk-sheet__panel {
    position: relative;
    inline-size: 100%;
    max-inline-size: 560px;
    max-block-size: 86dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--color-surface-border);
    border-block-end: none;
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    padding-block-end: env(safe-area-inset-bottom, 0px);
}

.mk-sheet--open .mk-sheet__panel { transform: translateY(0); }

.mk-sheet__grip {
    inline-size: 38px;
    block-size: 4px;
    border-radius: 2px;
    background: var(--color-surface-active);
    margin: 8px auto 2px;
}

.mk-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--_gutter) 8px;
}

.mk-sheet__title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.mk-sheet__reset {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    min-block-size: 44px;
    min-inline-size: 44px;
}

.mk-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: 4px var(--_gutter) 12px;
    scrollbar-width: none;
}

.mk-sheet__body::-webkit-scrollbar { display: none; }

.mk-fset {
    border: none;
    margin: 0;
    padding: 12px 0;
    border-block-start: 1px solid var(--color-border-subtle);
}

.mk-fset:first-child { border-block-start: none; }

.mk-fset__legend {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0;
    margin-block-end: 10px;
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mk-chip {
    --_prob: var(--mk-prob-low);
    cursor: pointer;
}

.mk-chip span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    /* Real touch target (was 40px) — bumped with the entity-filters pass. */
    min-block-size: var(--touch-target);
    box-sizing: border-box;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

/* Active (checked) — neutral chips light up in brand; specialised chips carry
   their own meaning colour. */
.mk-chip:has(input:checked) span {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 14%, transparent);
}

.mk-chip--prob[data-prob="LOW"] { --_prob: var(--mk-prob-low); }
.mk-chip--prob[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.mk-chip--prob[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.mk-chip--prob[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

.mk-chip--prob:has(input:checked) span {
    color: var(--_prob);
    border-color: color-mix(in oklab, var(--_prob) 60%, transparent);
    background: color-mix(in oklab, var(--_prob) 14%, transparent);
}

.mk-chip--official:has(input:checked) span {
    color: var(--mk-official);
    border-color: color-mix(in oklab, var(--mk-official) 60%, transparent);
    background: color-mix(in oklab, var(--mk-official) 14%, transparent);
}

.mk-chip input:focus-visible + span {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Team crest strips — the league market funnel's team facet. ~20 clubs, so the
   crest reads faster than a text chip and wraps into a couple of rows. */
.mk-chips--crests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mk-chip--crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 42px;
    block-size: 42px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-surface-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}
.mk-chip--crest .mk-chip__crest {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
}
i.mk-chip__crest--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    font-style: normal;
    color: var(--color-text-secondary);
}
.mk-chip--crest:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 16%, transparent);
}
.mk-chip--crest input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Market-value dual range (Booking-style desde–hasta) ────────────────── */

/* Two stacked native sliders: tracks are transparent and swallow no taps —
   only the thumbs are interactive. The visual track/fill is painted by the
   divs below (inset by half a thumb so the fill meets the thumb centres). */
.mk-range {
    position: relative;
    block-size: var(--touch-target);
}

.mk-range__track {
    position: absolute;
    inset-inline: 11px;
    top: 50%;
    block-size: 4px;
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    /* Visible rail on the sheet's raised panel — surface-on-surface vanished. */
    background: var(--color-border);
    overflow: hidden;
}

.mk-range__fill {
    position: absolute;
    inset-block: 0;
    background: var(--color-accent);
    border-radius: inherit;
}

.mk-range input[type="range"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.mk-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--color-bg);
    pointer-events: auto;
    cursor: grab;
}

.mk-range input[type="range"]::-moz-range-thumb {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--color-bg);
    pointer-events: auto;
    cursor: grab;
}

.mk-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.mk-range input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.mk-range__label {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

/* ── Filtered mode = FOCUSED screen (body.mercado-filtered) ─────────────── */

/* One body class does the whole flip, JS+CSS only — no page load: the
   marquee and the board hide (they stay in the DOM, ready to return when
   filters clear), and the header funnel goes solid accent, the follow-star
   idiom for "this toggle is ON". The segments hide server-side inside the
   feed fragment. */
.mercado-filtered .mk-pulse-strip,
.mercado-filtered .mk-section--board {
    display: none;
}

.mercado-filtered .app-header__btn--filter svg {
    stroke: var(--color-accent);
    fill: color-mix(in oklab, var(--color-accent) 22%, transparent);
}

/* ── Entity filter chips (sheet) + picker + feed filter bar ─────────────── */

/* One row of + Liga | + Club | + Jugador openers — three equal targets. */
/* ── Caja rápida del embudo ───────────────────────────────────────────────
   Va ENCIMA de los tres botones y no los sustituye: escribir un nombre y
   elegir un eje son dos gestos distintos, y el segundo sigue teniendo sentido
   cuando no sabes qué hay. */
.mk-qf {
    position: relative;
    margin-block-end: 10px;
}

.mk-qf__input {
    inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2, var(--color-surface));
    color: var(--color-text);
    font-size: 0.9rem;
}

.mk-qf__input::placeholder { color: var(--color-text-muted); }

/* FLOTA sobre la hoja, no la empuja. En flujo, cada tecla cambiaba el alto del
   panel y todo lo de abajo daba un salto — el filtro parecía estar
   reconstruyéndose mientras escribías. Un desplegable de autocompletado se
   dibuja ENCIMA y devuelve el sitio al cerrarse. */
.mk-qf__results {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 20;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
    /* Alto acotado: por encima de esto tapa media hoja. */
    max-block-size: 232px;
    overflow-y: auto;
}

.mk-qf__row {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

.mk-qf__row:last-child { border-block-end: 0; }
.mk-qf__row:hover,
.mk-qf__row:focus-visible { background: var(--color-surface-2, rgba(127, 127, 127, 0.1)); }

.mk-qf__media {
    position: relative;
    flex: none;
    inline-size: 22px;
    block-size: 22px;
}

/* Los escudos NUNCA redondos: recorta el blasón. Las caras sí. */
.mk-qf__logo {
    inline-size: 22px;
    block-size: 22px;
    object-fit: contain;
}

.mk-qf__logo--face {
    border-radius: 50%;
    object-fit: cover;
}

/* La bandera monta en la esquina de la cara — la nacionalidad de un vistazo,
   sin gastar línea de texto. */
.mk-qf__flag {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -3px;
    inline-size: 11px;
    block-size: 11px;
    object-fit: cover;
    border-radius: 2px;
}

.mk-qf__text {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    flex: 1;
}

.mk-qf__name {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-qf__sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Valencia" es club y es competición: la fila tiene que decir cuál. */
.mk-qf__kind {
    flex: none;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 7px;
}

/* El estado ("sin resultados") flota igual: si empujara, el salto volvería
   justo en el caso en que el lector está más perdido. */
.mk-qf__status {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 20;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.mk-eadds {
    display: flex;
    gap: 8px;
}

.mk-eadds .mk-echip-add {
    flex: 1;
    justify-content: center;
    margin-block-start: 0;
    white-space: nowrap;
}

.mk-echips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The per-axis containers are DOM-only grouping (the picker replaces its own
   axis); visually the three flow as ONE strip of chips. */
.mk-echips__group { display: contents; }

.mk-echips:has(.mk-echip) { margin-block-start: 8px; }

/* A committed pick: crest/face + name + its own ×. The hidden checked
   checkbox inside IS the form contract — removing the node removes the value. */
.mk-echip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    min-block-size: 36px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}

.mk-echip img {
    inline-size: 20px;
    block-size: 20px;
    object-fit: contain;
    border-radius: 50%;
}

.mk-echip__label {
    max-inline-size: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-echip__x {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: none;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

/* 28px of drawing, 44px of touch — the pseudo pads the difference. */
.mk-echip__x::after {
    content: "";
    position: absolute;
    inset: -8px;
}

/* The picker trigger — a dashed "add" chip, clearly not a filter value. */
.mk-echip-add {
    display: inline-flex;
    align-items: center;
    margin-block-start: 8px;
    padding: 8px 14px;
    min-block-size: var(--touch-target);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
}

/* Picker rows: subtitle + activity badge on the shared select-modal option. */
.mk-pickrow__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    text-align: start;
}

.mk-pickrow__sub {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-pickrow__n {
    flex: none;
    font-size: 0.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    background: var(--color-surface-sunken);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.mk-picker-status {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 22px 16px;
    margin: 0;
}

.mk-picker-foot {
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--color-border-subtle);
}

/* Active-filters bar over the feed — one horizontal scroll row, no wrap. */
.mk-fbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0 12px;
}

.mk-fbar::-webkit-scrollbar { display: none; }

.mk-fbar__chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-block-size: var(--touch-target);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    cursor: pointer;
}

.mk-fbar__chip svg {
    inline-size: 14px;
    block-size: 14px;
    flex: none;
}

.mk-fbar__chip img {
    inline-size: 18px;
    block-size: 18px;
    object-fit: contain;
    border-radius: 50%;
}

.mk-fbar__x {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1;
}

/* Lead chip is the quick "clear all" — accent-tinted so it reads as the action
   in the bar, distinct from the neutral removable entity chips beside it. */
.mk-fbar__chip--clear {
    color: var(--color-accent);
    border-color: color-mix(in oklab, var(--color-accent) 35%, var(--color-border));
}

.mk-fbar__chip--clear .mk-fbar__x { color: inherit; }

.mk-sheet__foot {
    padding: 10px var(--_gutter) 14px;
    border-block-start: 1px solid var(--color-border-subtle);
}

.mk-apply {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-full);
    padding: 14px;
    min-block-size: 52px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .mk-sheet__panel, .mk-sheet__scrim { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HOME — live pulse · most-chased board · one filtered feed
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Standing: AXIS 2, told by FORM ─────────────────────────────────────────
 * A three-step bar, not a percentage. On real data the measured hit-rates
 * bunch near the floor — a raw number there is both unreadable and needlessly
 * harsh about a named outlet — so the card carries where a source STANDS among
 * its peers and leaves the figure to screens with room to explain it.
 * Deliberately a different shape from the probability pill: two scales in the
 * same visual language read as one. */
:root {
    --mk-standing-high: var(--color-accent);
    --mk-standing-medium: var(--color-accent-secondary);
    --mk-standing-low: var(--color-text-subtle);
}

.mk-standing {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    flex: none;
    block-size: 9px;
}

.mk-standing i {
    inline-size: 3px;
    border-radius: 1px;
    background: var(--color-text-disabled);
}

.mk-standing i:nth-child(1) { block-size: 4px; }
.mk-standing i:nth-child(2) { block-size: 6.5px; }
.mk-standing i:nth-child(3) { block-size: 9px; }

[data-standing="low"] .mk-standing i:nth-child(1) { background: var(--mk-standing-low); }
[data-standing="medium"] .mk-standing i:nth-child(-n+2) { background: var(--mk-standing-medium); }
[data-standing="high"] .mk-standing i { background: var(--mk-standing-high); }

/* No history yet — a neutral word, never a zero. */
.mk-standing--new {
    display: inline-flex;
    align-items: center;
    block-size: auto;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-full);
    padding: 1px 6px;
}

/* Money: the rumoured fee, or a market value that SAYS it is one. */
.mk-money {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
    white-space: nowrap;
}

/* La naturaleza del movimiento en el slot del valor, cuando no hay cifra: mismo
   sitio y tamaño que las €, pero solo color. "Gratis" apagado (coste cero, pero
   fichaje permanente); "Cesión"/"Fin de cesión" en amarillo (mundo cesión: no es
   una compra). Sin badge ni fondo — el color hace la lectura. */
.mk-money--free { color: var(--color-text-secondary); font-weight: 700; }
.mk-money--loan { color: var(--color-warning); font-weight: 700; }

/* ── Kind pills ─────────────────────────────────────────────────────────── */

/* The segments are the app-wide .pst-per90-btn (player-stats.css) rendered
   as LINKS with a leading sprite icon: flex centring replaces the button's
   native text centring, tight inline padding + nowrap so three icon-led
   labels share 375px without wrapping. */
.mk-kinds .pst-per90-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    padding-inline: 6px;
}

.mk-kinds .pst-per90-btn svg {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
}

/* ── Feed skeleton (components/mercado/skeleton/_feed.html.twig) ────────── */

/* Row silhouettes over the global skeleton primitives — the .rumour-row box
   (same padding, radius and rhythm, so the swap is 1:1). The segmented
   control above the list is NOT part of the skeleton: it stays put. */

.mk-feed-skel__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    background: var(--color-surface-hover);
}

/* skeleton.css gotcha: .skeleton-shimmer (declared after .skeleton-circle)
   wins the border-radius tie — re-assert the circle for the avatar. */
.mk-feed-skel__row .skeleton-circle { border-radius: 50%; }

.mk-feed-skel__name { inline-size: 52%; }
.mk-feed-skel__meta { inline-size: 34%; }
.mk-feed-skel__src { inline-size: 44%; }

.mk-feed-skel__right {
    flex: none;
    inline-size: 64px;
    align-items: flex-end;
}

.mk-feed-skel__right > * { inline-size: 100%; }

/* ── The live pulse strip ───────────────────────────────────────────────── */

/* Same band idiom as the home's calendar strip: page background, one bottom
   border — not a sunken inset, which no main screen uses under its header. */
.mk-pulse-strip {
    display: flex;
    align-items: center;
    block-size: 30px;
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    overflow: hidden;
}

.mk-pulse-strip__tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px 0 var(--_gutter);
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-live);
}

.mk-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--color-live);
    animation: mk-blink 1.7s ease-in-out infinite;
}

@keyframes mk-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.mk-pulse-strip__viewport {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-width: 0;
}

.mk-pulse-strip__track {
    display: flex;
    align-items: center;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: mk-marquee 42s linear infinite;
}

@keyframes mk-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* WCAG 2.2.2: >5s of auto-motion needs a pause everyone can reach — not
   only the reduced-motion crowd. Hover or keyboard focus halts the belt. */
.mk-pulse-strip:hover .mk-pulse-strip__track,
.mk-pulse-strip:focus-within .mk-pulse-strip__track { animation-play-state: paused; }

.mk-tick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-inline-end: 1px solid var(--color-border);
    white-space: nowrap;
}

/* The whole tick is the tap target for the player's ficha. Inherits the same
   flex + gap so a linked tick reads identically to a plain one (the li's own
   gap covers the no-id fallback where the spans are direct children). */
.mk-tick__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.mk-tick__state {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mk-prob-imminent);
}

.mk-tick--official .mk-tick__state { color: var(--mk-official); }

.mk-tick__who {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.mk-tick__crest { inline-size: 15px; block-size: 15px; object-fit: contain; }

/* The closing figure of a tick rides the strip's compact scale. */
.mk-tick .mk-money { font-size: 0.68rem; }

/* ── The most-chased board ──────────────────────────────────────────────── */

/* Full-bleed board: the section drops its side gutter so the rail can span
   edge to edge; the title keeps the gutter on its own (`.porra-rail` idiom). */
.mk-section--board {
    padding-inline: 0;
}

.mk-board-title,
.mk-board-empty {
    padding-inline: var(--_gutter);
    margin: 5px 5px 8px;
}

/* La ventana de un board que NO comparte eje con el balance de arriba. Sin este
   renglón, dos cifras del mismo dinero medidas en periodos distintos parecen
   contradecirse. */
.mk-board-note {
    padding-inline: var(--_gutter);
    margin: 0 5px 10px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

/* Bolt + title on one baseline. The bolt borrows the matches "Top del día"
   colour (--color-live) so "what just moved" reads as fresh, not as a
   ranking. */
.mk-board-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mk-board-icon {
    inline-size: 15px;
    block-size: 15px;
    color: var(--color-live);
    flex: none;
}

.board-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Gutter lives INSIDE the scroller: the first/last card align with the
       page margin, but a mid-scroll card rides all the way to the edge
       instead of being clipped 32px in by a card + section padding. */
    padding: 0 var(--_gutter) 4px;
    scroll-padding-inline: var(--_gutter);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.board-rail::-webkit-scrollbar { display: none; }

/* Mini-card inside the board card: hover surface + subtle border, matching
   the feed rows so both list idioms of the screen read as one family. */
.board-card {
    --_prob: var(--mk-prob-low);
    flex: none;
    inline-size: 190px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border-subtle);
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}

.board-card[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.board-card[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.board-card[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

.board-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mk-prob--sm { font-size: 0.55rem; padding: 1px 7px; }

/* The OFICIAL pill at board-card scale — closed-today entries wear it in
   place of the probability badge. */
.board-card .mk-official { font-size: 0.55rem; padding: 2px 7px; }

.board-card__who {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.board-card__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.board-card__name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-card__foot { padding-block-start: 9px; border-block-start: 1px solid var(--color-border-subtle); }

/* ── The crest pile — the graph as a list primitive ─────────────────────── */

.mk-pile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mk-pile__crests { display: flex; flex: none; }

/* Crest chip + overlap ring: the ring melts into the mini-card background
   so the overlap reads as a gap, not a halo. */
.mk-pile__crest,
.mk-pile__more {
    inline-size: 22px;
    block-size: 22px;
    /* Escudos NUNCA redondos (feedback_no_border_radius_on_crests): sin
       border-radius. El "+N" comparte la regla para que la pila lea pareja. */
    object-fit: contain;
    background: var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-surface-hover);
}

.mk-pile__crest + .mk-pile__crest,
.mk-pile__more { margin-inline-start: -8px; }

.mk-pile__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* Pile de MEDIOS: mismo diámetro y solape que los escudos, pero cada burbuja es
   el icono del medio (X / Telegram) o su inicial. */
.mk-pile__medium {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-surface-hover);
    color: var(--color-text-secondary);
    overflow: hidden;
}

.mk-pile__medium + .mk-pile__medium { margin-inline-start: -8px; }

.mk-pile__medium svg { inline-size: 12px; block-size: 12px; }

.mk-pile__initial {
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
}

.mk-pile__label {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-pile__label b { color: var(--color-text-secondary); font-weight: 700; }

.mk-section--feed { padding-block-start: 4px; }

.mk-empty-block { padding: 34px 0; text-align: center; }
.mk-empty-block__title { font-size: 0.82rem; font-weight: 700; color: var(--color-text-secondary); }
.mk-empty-block__hint { font-size: 0.75rem; color: var(--color-text-muted); margin-block-start: 4px; }

.mk-more {
    display: block;
    margin: 14px 0 0;
    padding: 11px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.mk-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .mk-pulse-strip__track,
    .mk-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RUMOUR ROW — the market row wearing the app's shared list skeleton
   (.squad-row, from team-squad.css). Only the market-specific bits live here;
   avatar, flag, name and meta come from the shared rules so this row and the
   squad / stats / transfer rows stay one family.
   ══════════════════════════════════════════════════════════════════════════ */

/* This is a MAIN-SCREEN list, so the row wears the home's .match-card metrics
   (14/16 padding, 12px radius, 8px rhythm) — not the denser .squad-row of the
   in-tab lists. The skeleton (avatar, flag, name, meta) still comes from
   .squad-row so the family stays one. Relative: hosts the stretched link. */
.rumour-row {
    --_prob: var(--mk-prob-low);
    position: relative;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    /* Kit tint: a thin bleed of each club's color on its own edge (origin
       left, destination right — the direction the route reads), melting into
       the surface by 38%. Same color-mix idiom as the liveblog goal card.
       Rows without colors resolve both stops to transparent = flat surface. */
    --_tint-strength: 13%;
    background:
        linear-gradient(
            90deg,
            color-mix(in oklab, var(--_from-tint, transparent) var(--_tint-strength), transparent),
            transparent 38% 62%,
            color-mix(in oklab, var(--_to-tint, transparent) var(--_tint-strength), transparent)
        ),
        var(--color-surface-hover);
}

/* Light themes: the same mix over a white surface reads twice as loud —
   halve it so the bleed stays a tint, not a wash. */
:root[data-theme^="light"] .rumour-row { --_tint-strength: 7%; }
:root[data-theme^="light"] .pm-dossier { --_club-strength: 13%; }

/* Whole-card tap → the player's market. The source chip stacks above it. */
.rumour-row__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.rumour-row[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.rumour-row[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.rumour-row[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

/* El veredicto por CONVICCIÓN reusa la clase `.pm-conviction__label` de la ficha
   (misma escala de color) para que feed y detalle NUNCA discrepen: si allí es
   verde "Muy probable", aquí también. El pill fija su --_prob, ganando al
   heredado del data-prob de la fila. */

.rumour-row .squad-row__body { gap: 3px; }

.rumour-row__pos { color: var(--color-text-muted); }

.rumour-row__source { gap: 6px; flex-wrap: wrap; }

/* La línea de medios va SIEMPRE en una sola línea: nunca envuelve ni empuja
   contra el veredicto de la derecha. El nombre del medio es el único elástico —
   se recorta con ellipsis (min-width:0 + el overflow del propio nombre); las
   barras de acierto y el chip "+N" son fijos. */
.rumour-row__source--media { display: flex; align-items: center; flex-wrap: nowrap; }
.rumour-row__source--media .rumour-row__src { min-width: 0; flex: 0 1 auto; }

/* "11 d antes" — the earned-credibility chip on closed deals: how far ahead
   of the confirmation the source called it. Accent-tinted like the standing
   family, quiet like a footnote. */
.rumour-row__lead {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
}

/* Attribution and deep-link are one gesture: the icon rides inside the name so
   there is a single, obvious thing to tap to go read the original. The chip
   treatment (1px border, full radius) is DESIGN.md's button-secondary contract:
   it marks the name as a link without shouting. Candidate for promotion to the
   design system as the external chip-link. The bare <span> fallback (no URL)
   never wears it — a bordered non-link would lie about being tappable. */
.rumour-row__src {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    /* Above the row's stretched link: tapping the source still deep-links. */
    position: relative;
    z-index: 2;
}

.rumour-row__src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rumour-row__src-name--plain { color: var(--color-text-secondary); }
.rumour-row__src-icon { inline-size: 11px; block-size: 11px; flex: none; opacity: 0.75; }

/* "Sky Sports  ⊕+3" — the press summary on a movement with conviction: the
   freshest outlet is the chip-link, then the rest as a round bubble that reads
   like one more crest in the stack (same 22px dark disc as the pile's
   `.mk-pile__more`, minus the overlap since it stands alone). No verb — the
   line must never wrap; how many outlets is read from the number. */
.rumour-row__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-surface-hover);
    border: 1px solid var(--color-border);
    font-size: 0.55rem;
    font-weight: 800;
    color: var(--color-text-secondary);
}
/* "N lo quieren" en la fila a 10px (el board mantiene su 0.68rem, sin scope). */
.rumour-row .mk-pile__label { font-size: 10px; }

@media (hover: hover) {
    .rumour-row__src:hover { color: var(--color-text); }
    .rumour-row__src:hover .rumour-row__src-icon { opacity: 1; }
}

/* Right column: money first — it is what the eye lands on — then the state,
   then how long ago it was said. Capped: it is the headline number, not a
   third of the row, so the club names keep enough width to be read. */
.rumour-row__right {
    gap: 5px;
    padding-block-start: 1px;
    max-inline-size: 33%;
    flex: none;
}

.rumour-row__right .mk-money { font-size: 0.95rem; }

/* Board card: the meta line now mirrors the squad/stats one (crest · position). */
.board-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    min-width: 0;
}

.board-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-card__who .squad-row__photo-wrap { inline-size: 44px; block-size: 44px; }

.rumour-row .transfer-route { gap: 3px; }
.rumour-row .transfer-route__name { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYER MARKET — one player: who wants him, and who says so.
   No live idiom here on purpose: the feed has no cron and the freshest report
   can be months old, so nothing breathes, pulses or claims to be happening now.
   ══════════════════════════════════════════════════════════════════════════ */

.mercado--player .app-header { padding-block: 12px; }

.pm-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px var(--_gutter) 14px;
}

.pm-hero__photo { inline-size: 60px; block-size: 60px; flex: none; }
.pm-hero__photo .squad-row__photo,
.pm-hero__photo .squad-row__photo-initials { inline-size: 60px; block-size: 60px; font-size: 20px; }
.pm-hero__photo .squad-row__flag { inline-size: 20px; block-size: 15px; }

.pm-hero__id { min-width: 0; flex: 1; }

.pm-hero__name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.05;
    margin: 0;
}

/* Cards are doors now: player links in the hero, team links on every crest+
   name — inherit the text, no underline chrome, the tap is the affordance. */
.pm-hero__playerlink,
.pm-hero__teamlink,
.pm-dossier__teamlink,
.pm-led__club--link,
.pm-career__teamlink {
    color: inherit;
    text-decoration: none;
}

/* Crest + name are ONE unbreakable unit: the anchor flexes, never wraps,
   and the name ellipsizes instead of jumping lines (min-width: 0 opens the
   flex shrink path). */
.pm-hero__teamlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.pm-hero__teamlink span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-dossier__teamlink {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.pm-hero__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
    min-width: 0;
}

.pm-hero__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pm-hero__value {
    flex: none;
    align-self: flex-start;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.pm-hero__value i {
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0.7;
    margin-inline-end: 2px;
}

/* Age of the archive, said once and plainly rather than implied by silence. */
.pm-stale {
    margin: 0 var(--_gutter) 4px;
    padding: 7px 11px;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── The ledger: who reported it ────────────────────────────────────────── */

.pm-ledger { display: flex; flex-direction: column; gap: 8px; }

/* "Quién lo ha dado" DENTRO del panel del escudo — las fuentes de ESE club,
   por fecha. Separado del dossier/voto de arriba por una regla sutil. */
.pm-panel-ledger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
}

/* El título reusa `.card-title` (igual que "Quién lo quiere"); solo ajustamos su
   separación inferior dentro del panel, más corta que la de una card suelta. */
.pm-panel-ledger .card-title {
    margin-bottom: 10px;
}

.pm-led {
    padding: 11px 12px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.pm-led__head { display: flex; align-items: center; gap: 8px; min-width: 0; }

.pm-led__src {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.pm-led__src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) {
    .pm-led__src:hover { color: var(--color-accent); }
}

.pm-led__state { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; }

/* A report whose move already closed is record, not a live claim: it sorts to
   the bottom (service) and reads muted — a sunken row, and its claim pill cooled
   to neutral (set on the pill itself so it beats the inherited data-prob heat),
   so a year-old, consummated call never looks as urgent as today's links. The
   word (his claim) stays; the "ya fichado" tag says why. */
.pm-led--done { background: var(--color-surface-sunken); }
.pm-led--done .mk-prob { --_prob: var(--color-text-subtle); }
.pm-led__done {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-subtle);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

.pm-led__clubs { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 9px; }

.pm-led__club {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 5px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    font-size: 12px;
}

.pm-led__club img { inline-size: 16px; block-size: 16px; object-fit: contain; }
.pm-led__club i { font-style: normal; font-size: 10px; color: var(--color-text-subtle); }

.pm-led__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 9px;
    font-size: 11px;
    color: var(--color-text-subtle);
}

/* The raw rate lives here and ONLY here — never without its sample size, which
   is what separates evidence from a verdict on a named outlet. */
.pm-led__acc { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ── Club dossier: the club leading the race ────────────────────────────────
 * Three readings of one link side by side — cost, likelihood, and how much the
 * source has earned. Tinted by the club's own colour where we have it. */
.pm-dossier {
    --_club: var(--color-border);
    margin-block-start: 12px;
    padding: 13px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in oklab, var(--_club) var(--_club-strength, 26%), transparent) 0%, transparent 55%),
        var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.pm-dossier__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-dossier__crest { inline-size: 34px; block-size: 34px; object-fit: contain; flex: none; }
.pm-dossier__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

.pm-dossier__name {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-dossier__league { font-size: 11px; color: var(--color-text-muted); }

.pm-dossier__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 13px 0 0;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--color-border-subtle);
}

.pm-dossier__stat { min-width: 0; }

.pm-dossier__stat dt {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-block-end: 4px;
}

.pm-dossier__stat dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 700;
}

/* The ledger row's claim pill rides the same heat ramp off its own row. */
.pm-led[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.pm-led[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.pm-led[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

.pm-dossier[data-prob="MEDIUM"] { --_prob: var(--mk-prob-medium); }
.pm-dossier[data-prob="HIGH"] { --_prob: var(--mk-prob-high); }
.pm-dossier[data-prob="IMMINENT"] { --_prob: var(--mk-prob-imminent); }

/* The trust word wears the SAME .mk-prob pill as probability — only its
   color comes from the standing ramp instead of the heat ramp. */
.pm-dossier[data-standing="high"] .pm-dossier__trust-pill { --_prob: var(--mk-standing-high); }
.pm-dossier[data-standing="medium"] .pm-dossier__trust-pill { --_prob: var(--mk-standing-medium); }
.pm-dossier[data-standing="low"] .pm-dossier__trust-pill { --_prob: var(--mk-standing-low); }

.pm-dossier__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 12px;
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.pm-dossier__src {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
    min-width: 0;
}

.pm-dossier__src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-dossier__when { margin-inline-start: auto; flex: none; color: var(--color-text-subtle); }

@media (hover: hover) {
    .pm-dossier__src:hover { color: var(--color-accent); }
}

/* ── Money context: salary and contract ─────────────────────────────────── */
.pm-money {
    display: flex;
    gap: 8px;
    margin: 0 var(--_gutter) 10px;
}

.pm-money__item {
    flex: 1;
    padding: 9px 11px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    min-width: 0;
}

.pm-money__item dt {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.pm-money__item dd {
    margin: 3px 0 0;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
}

.pm-money__item dd i {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-inline-start: 1px;
}

/* An expired contract is the newsworthy state, not an error one. */
.pm-money--ended { color: var(--color-warning); }

/* ── Career: what actually happened ─────────────────────────────────────── */
.pm-career { display: flex; flex-direction: column; gap: 6px; }

.pm-career__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.pm-career__clubs { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.pm-career__clubs img { inline-size: 20px; block-size: 20px; object-fit: contain; }
.pm-career__arrow { color: var(--color-text-subtle); font-size: 11px; }

.pm-career__unknown {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    border: 1px dashed var(--color-border);
}

.pm-career__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

.pm-career__to {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-career__meta { font-size: 10.5px; color: var(--color-text-muted); }

.pm-career__fee {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ── The constellation as a control ─────────────────────────────────────── */

/* Invisible 44px hit area over a 38px crest: the drawing stays the right size
   for the composition, the target stays the right size for a thumb. */
.cc-node__hit { fill: transparent; }

.cc-node[role="button"] { cursor: pointer; }

.cc-node[role="button"]:focus-visible {
    outline: none;
}

.cc-node[role="button"]:focus-visible .cc-node__ring,
.cc-node--selected .cc-node__ring {
    stroke: var(--color-accent);
    stroke-width: 3;
    opacity: 1;
}

/* Unselected crests recede so the chosen one reads at a glance. Opacity only —
   nothing here animates geometry. */
.cc-nodes:has(.cc-node--selected) .cc-node:not(.cc-node--selected) { opacity: 0.45; }

.cc-node { transition: opacity var(--duration-fast) var(--easing-default); }

/* The club switcher: crest-only buttons (2+ clubs), 44px touch each; past
   what fits, the "…" lifts the select-modal with everyone. Selection =
   accent ring. */
.pm-crests {
    display: flex;
    gap: 8px;
    margin-block-end: 12px;
}

.pm-crest-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.pm-crest-btn img {
    inline-size: 30px;
    block-size: 30px;
    object-fit: contain;
}

.pm-crest-btn__initial { font-weight: 700; font-size: 0.9rem; }

.pm-crest-btn[aria-pressed="true"] {
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

.pm-crest-btn--more { letter-spacing: 1px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .cc-node { transition: none; }
}

/* ── La grada comenta — the match chat FAB, kit-coloured, riding ABOVE the
   bottom nav (the match screen has no nav; this one does). The bar DRAWS
   ~78px tall (icon + label + padding) while its --nav-height token says 56 —
   the +38 covers the real height plus breathing room. ────────────────────── */
.pm-grada-fab {
    bottom: calc(var(--nav-height, 56px) + 38px + env(safe-area-inset-bottom, 0px));
}

/* ── The reader's call — the match poll's clothes ───────────────────────────
   The heavy lifting (poll-options / poll-option / voted / selected / pct /
   bar reveal) comes from the match poll's stylesheet; here only the frame,
   the thumbs and the No bar color. */
.pm-vote {
    margin-block-start: 10px;
    padding: 13px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
}

.pm-vote__q { margin: 0; font-size: 0.9rem; font-weight: 700; }

.pm-vote__thumb { color: var(--color-text-secondary); }

.pm-vote__thumb--yes svg { color: var(--color-accent); }

.pm-vote__thumb--no svg { color: var(--mk-prob-imminent); }

.pm-vote .poll-bar.pm-vote__bar--no { background: var(--mk-prob-imminent); }

/* Sin la línea Sí/No las opciones respiran menos alto a propósito. */
.pm-vote .poll-options { margin-top: 9px; }

.pm-vote .poll-option { padding: 9px 8px; gap: 5px; }

/* ══ Club market (tm-) ═══════════════════════════════════════════════════ */

/* ── Hero: crest + name + window ── */
.tm-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px var(--_gutter) 4px;
}

.tm-hero__crest { width: 56px; height: 56px; object-fit: contain; }

.tm-hero__name { margin: 0; font-size: 1.35rem; line-height: 1.15; }

.tm-hero__name a { color: inherit; text-decoration: none; }

.tm-hero__window {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* ── Club switcher: links dressed as chips, current one lit ── */
.tm-switcher {
    display: flex;
    gap: 8px;
    padding: 10px var(--_gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.tm-switcher::-webkit-scrollbar { display: none; }

.tm-switcher__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 44px; /* touch */
    padding: 0 14px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tm-switcher__chip.is-current {
    background: color-mix(in oklab, var(--color-accent) 16%, var(--color-surface));
    border-color: var(--color-accent);
}

.tm-switcher__crest { width: 22px; height: 22px; object-fit: contain; }

/* ── Balance card ── */
.tm-balance__counts { font-size: 0.78rem; color: var(--color-text-secondary); }

.tm-balance__net {
    margin: 10px 0 2px;
    font-family: var(--font-numeric, inherit);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tm-balance__net--spend { color: var(--mk-spend); }

.tm-balance__net--earn { color: var(--mk-income); }

.tm-balance__netlabel {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.tm-balance__rows { display: grid; gap: 8px; margin-top: 12px; }

.tm-balance__row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}

.tm-balance__rowlabel { color: var(--color-text-secondary); }

.tm-balance__rowvalue { font-weight: 700; font-variant-numeric: tabular-nums; }

.tm-balance__track {
    height: 6px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    overflow: hidden;
}

.tm-balance__bar { display: block; height: 100%; border-radius: inherit; }

.tm-balance__bar--spend { background: var(--mk-spend); }

.tm-balance__bar--earn { background: var(--mk-income); }

.tm-balance__disclaimer {
    margin: 12px 0 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* ── Wishlist: the social heart ── */
.tm-wishlist__total { font-size: 0.78rem; color: var(--color-text-secondary); }

.tm-wishlist__rows {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
}

.tm-wish-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
}

.tm-wish-row:last-child { border-bottom: 0; }

.tm-wish-row__rank {
    flex: 0 0 20px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* The crown is CSS, not data: rank #1 wears it as long as it holds. */
.tm-wish-row--top .tm-wish-row__rank { font-size: 0; }

.tm-wish-row--top .tm-wish-row__rank::before {
    content: '👑';
    font-size: 0.9rem;
}

.tm-wish-row--top {
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-warning) 8%, transparent);
    padding-inline: 6px;
    margin-inline: -6px;
}

.tm-wish-row__who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.tm-wish-row__photo { width: 36px; height: 36px; flex: 0 0 36px; }

.tm-wish-row__id { min-width: 0; display: grid; }

.tm-wish-row__name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-wish-row__pos { font-size: 0.75rem; color: var(--color-text-secondary); }

.tm-wish-row__tally {
    display: grid;
    justify-items: end;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}

.tm-wish-row__votes { font-size: 0.85rem; font-weight: 700; }

.tm-wish-row__pct { font-size: 0.72rem; color: var(--color-text-secondary); }

.tm-wish-row__heart {
    flex: 0 0 44px;
    min-height: 44px; /* touch */
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.tm-wish-row__heart.is-on { color: var(--mk-spend); }

.tm-wish-row__heart.is-on svg { fill: currentColor; }

.tm-wishlist__hint {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.tm-wishlist__empty { display: grid; gap: 12px; padding: 14px 0 4px; }

.tm-wishlist__empty-title { margin: 0; font-size: 0.95rem; font-weight: 600; }

.tm-wishlist__propose { margin-top: 12px; width: 100%; }

/* ── Tabs: links upgraded by Stimulus ── */
.tm-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
    margin-bottom: 10px;
}

.tm-tabs__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border-radius: calc(var(--radius-lg) - 4px);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.tm-tabs__tab.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.tm-tabs__count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tm-panel__subtitle {
    margin: 14px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Movement rows ── */
.tm-move-row { display: flex; align-items: center; gap: 10px; position: relative; }

/* Stretched link: la card entera abre la ficha del jugador. Sibling absoluto
   (mismo idiom que .rumour-row__link), NO envuelve la fila. */
.tm-move-row__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* 44px = mismo tamaño que la foto (`.squad-row__photo`) y que el board
   /mercado, así la bandera (`.squad-row__flag`, anclada al wrap) cae en la
   esquina real de la foto y no metida hacia dentro. */
.tm-move-row__photo { width: 44px; height: 44px; flex: 0 0 44px; }

/* row-gap como el board /mercado (`.rumour-row .squad-row__body`): nombre ·
   edad·posición · ruta con aire, no pegados. */
.tm-move-row__id { min-width: 0; display: grid; row-gap: 3px; flex: 1; }

.tm-move-row__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-self: start;
    max-width: 100%;
}

/* Escudo + club + flecha = una unidad irrompible. */
.tm-move-row__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    min-width: 0;
}

/* edad · posición — línea 1 bajo el nombre. */
.tm-move-row__pos {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    justify-self: start;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Escudo + club + flecha = una unidad irrompible, en su propia línea 2. */
.tm-move-row__route {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.tm-move-row__partnername,
.tm-move-row__partnerlink {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

/* El nombre del club queda POR ENCIMA del stretched link → conserva su propio
   deep-link al equipo (lo único de la card que no lleva al jugador). */
.tm-move-row__partnerlink {
    position: relative;
    z-index: 2;
}

.tm-move-row__crest { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }

.tm-move-row__money {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.tm-move-row__official { font-size: 0.68rem; }

/* Fecha del fichaje en "hace X", encima del importe (idiom del card Oficial). */
.tm-move-row__date {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* "Ver más / Ver menos" — toggle in-place del show-more (reusa .mk-more). El
   label se intercambia por CSS según .is-expanded; sin JS la lista sale entera. */
.show-more__toggle { width: 100%; cursor: pointer; font-family: inherit; }

.show-more__less { display: none; }

.show-more__toggle.is-expanded .show-more__more { display: none; }

.show-more__toggle.is-expanded .show-more__less { display: inline; }

/* ── Proponer fichaje — panel ÚNICO de altura estable: combobox del jugador
   (el campo se convierte en el elegido, misma caja) + dropdown FLOTANTE de
   resultados (no ocupa flujo) + "por qué" + Enviar, todo presente a la vez.
   El modal mide lo mismo escribas, elijas o no → sin springing. ── */
/* Un pelín más alto para respirar — pero solo cuando hay "por qué" (usuario
   registrado): el textarea llena ese alto. Para el anónimo (sin textarea) el
   sheet queda a su contenido, sin un hueco muerto abajo. */
.propose-sheet:has(.propose-why-field) { min-height: 56vh; }

.propose-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
    /* Llena el alto del sheet (header fijo + form flexible) para que el CTA se
       ancle ABAJO en vez de flotar a media altura con hueco muerto debajo. */
    flex: 1 1 auto;
    min-height: 0;
}

/* Ancla del dropdown flotante. */
.propose-field { position: relative; }

/* Caja de altura fija: buscar / elegido comparten el mismo alto → sin salto. */
.propose-combo {
    position: relative;
    min-height: 52px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color 0.15s ease;
}

.propose-combo:focus-within { border-color: var(--color-accent); }

/* `hidden` guard: la clase `display:flex` gana a la UA `[hidden]{display:none}`,
   así que sin esto las dos caras del combo se pintan a la vez (la ✕ del elegido
   se colaba en el buscador vacío). Especificidad, no !important. */
.propose-combo__search[hidden],
.propose-combo__chosen[hidden] { display: none; }

.propose-combo__search { display: flex; align-items: center; width: 100%; }

.propose-combo__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-left: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.propose-combo__input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px 0 12px;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 0.95rem;
}

.propose-combo__input:focus-visible { outline: none; }

/* Cara "elegido": foto + nombre + ✕, dentro de la MISMA caja. */
.propose-combo__chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 6px 0 8px;
}

.propose-combo__photo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-hover);
}

.propose-combo__name {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.propose-combo__clear {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.propose-combo__clear svg { width: 18px; height: 18px; }

.propose-combo__clear:hover { color: var(--color-text); background: var(--color-surface-hover); }

/* Dropdown flotante — absoluto sobre el "por qué", no refluye nada. */
.propose-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
}

.propose-dropdown[hidden] { display: none; }

.propose-status {
    display: none;
    padding: 14px 8px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.propose-dropdown[data-state="loading"] .propose-status[data-state-for="loading"],
.propose-dropdown[data-state="empty"] .propose-status[data-state-for="empty"],
.propose-dropdown[data-state="error"] .propose-status[data-state-for="error"] { display: block; }

.propose-list { display: none; list-style: none; margin: 0; padding: 0; }

.propose-dropdown[data-state="results"] .propose-list { display: block; }

.propose-result {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.propose-result:hover,
.propose-result:focus-visible { background: var(--color-surface-hover); outline: none; }

.propose-result__photo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-hover);
}

.propose-result__id { display: grid; min-width: 0; }

.propose-result__name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.propose-result__sub { font-size: 0.75rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Por qué" */
/* El "por qué" CRECE para ocupar el espacio entre el buscador y el CTA, así no
   queda un hueco muerto y el usuario tiene más sitio para escribir. */
.propose-why-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }

.propose-why-field__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.propose-why { width: 100%; flex: 1 1 auto; min-height: 80px; resize: none; }

/* CTA anclado al fondo del sheet (el textarea de arriba absorbe el espacio). */
.propose-submit { flex-shrink: 0; }

/* ── Movement row as a "post" — the card OWNS the surface so the unified
   social bar reads as part of it (same unit as the radar/wish items). The
   bar's 👍/👎 is the deal verdict: ¿ok o ko este fichaje? ── */
.tm-move-item {
    margin-bottom: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Kit tint of the two clubs, same idiom as the radar item: partner ⇄ home
       across the row (direction sets which end is which). */
    --_tint-strength: 13%;
    background:
        linear-gradient(
            90deg,
            color-mix(in oklab, var(--_from-tint, transparent) var(--_tint-strength), transparent),
            transparent 38% 62%,
            color-mix(in oklab, var(--_to-tint, transparent) var(--_tint-strength), transparent)
        ),
        var(--color-surface-hover);
}

:root[data-theme^="light"] .tm-move-item { --_tint-strength: 7%; }

/* The row gives up its own surface/rounding/margin — the item owns them now. */
.tm-move-item .tm-move-row {
    background: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* ── Loan returns: bookkeeping under a fold ── */
.tm-returns { margin-top: 10px; }

.tm-returns__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px; /* touch */
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
}

.tm-returns__summary::-webkit-details-marker { display: none; }

.tm-returns__summary::before { content: '▸'; transition: transform 0.15s; }

.tm-returns[open] .tm-returns__summary::before { transform: rotate(90deg); }

/* ── Needs chips ── */
.tm-needs { margin-bottom: 6px; }

.tm-needs__title {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tm-needs__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tm-needs__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px; /* touch */
    padding: 0 14px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-size: 0.82rem;
    text-decoration: none;
}

.tm-needs__pos { font-weight: 700; }

.tm-needs__count { color: var(--color-text-secondary); }

/* The FAB reuses .match-chat-fab wholesale; tm- only marks the host page. */
.tm-grada-fab { /* intentionally empty — hook for page-scoped tweaks */ }

/* Single-select picker: the tap IS the commit — no "Hecho" to offer. */
.select-modal[data-mode="single"] .mk-picker-foot { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tm-returns__summary::before { transition: none; }
    .tm-xi-banner { transition: none; }
}

/* ══ Club market v2 — participation-first spine ══════════════════════════ */

/* Hero: league chip (team-view idiom) + window, one meta row. */
.tm-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.tm-hero__window { font-size: 0.82rem; color: var(--color-text-secondary); }

/* League chip — the team hero's `.team-league-chip` look: subtle pill,
   crest, name, chevron. Kept local so the mercado page stays self-contained. */
.tm-league-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    min-width: 0;
    max-width: 100%;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tm-league-chip:hover, .tm-league-chip:focus-visible {
    background: rgb(255 255 255 / 10%);
    color: var(--color-text);
    outline: none;
}

.tm-league-chip:active { transform: scale(0.97); }

/* Escudo de competición: NUNCA border-radius (recorta el escudo). */
.tm-league-chip__logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

.tm-league-chip__name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-league-chip__badge { width: 10px; height: 10px; margin-left: 2px; opacity: 0.7; flex: none; }

:root[data-theme^="light"] .tm-league-chip { background: rgb(0 0 0 / 5%); }

/* (legacy) net headline — retired from the header. */
.tm-hero__league { color: var(--color-text-secondary); }

.tm-hero__net {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tm-hero__net strong {
    font-family: var(--font-numeric, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.tm-hero__net--spend strong { color: var(--mk-spend); }

.tm-hero__net--earn strong { color: var(--mk-income); }

/* Band titles give the scroll rhythm and tell the three toggles apart. */
.tm-band-title {
    margin: 4px var(--_gutter) 8px;
    font-family: var(--font-title, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Segment inside a card: kill the app toggle's default bottom margin. */
.tm-seg { margin-bottom: 12px; }

.tm-seg__n {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: 0.7;
}

/* Competition crest riding inside a spend-board segment ("Los Que Más
   Gastan" · Tu Liga): same 15px inline mark as the feed segments' sprite,
   so the league reads at a glance next to its name. */
.mk-kinds .pst-per90-btn .tm-seg__logo {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
    object-fit: contain;
}

/* ── Header de la card del mercado: segmentado + embudo ─────────────────────
   El segmentado (qué pestaña) crece a la izquierda; el embudo (cómo se cierne)
   se ancla a la derecha. La barra hereda el margen inferior que el segmentado
   tenía suelto, así los paneles de abajo respiran igual. */
.tm-market-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tm-market-bar .tm-seg {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.tm-filter-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tm-filter-btn svg { width: 18px; height: 18px; }

.tm-filter-btn:hover { color: var(--color-text); }

.tm-filter-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Filtro puesto: el embudo se enciende en acento — mismo idiom "toggle ON" que
   el embudo del feed global (body.mercado-filtered). */
.mk-club--filtered .tm-filter-btn {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* Señal ÚNICA con que el embudo oculta una fila que no pasa el filtro. Propia
   (no el atributo `hidden`, que es de show-more): así los dos controllers no se
   pisan. Gana siempre. */
.mk-off { display: none !important; }

/* ── XI banner (placeholder) — the club's kit, a half-made XI motif ─────── */
.tm-xi-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 84px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radius-lg);
    text-align: start;
    color: #fff;
    cursor: default;
    background:
        linear-gradient(120deg,
            color-mix(in oklab, var(--team-color-home, var(--color-accent)) 92%, #000) 0%,
            color-mix(in oklab, var(--team-color-away, var(--color-accent)) 86%, #000) 100%);
}

/* Mini-pitch: 11 dots, the front line already "picked", the rest waiting. */
.tm-xi-banner__pitch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    flex: none;
    width: 58px;
    padding: 6px;
    border-radius: 8px;
    background: rgb(255 255 255 / 12%);
}

.tm-xi-banner__pitch span {
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    border: 1.5px solid rgb(255 255 255 / 70%);
}

.tm-xi-banner__pitch span:nth-child(-n+3) { background: #fff; border-color: #fff; }

.tm-xi-banner__text { display: grid; gap: 2px; min-width: 0; }

.tm-xi-banner__title { font-size: 1.02rem; font-weight: 800; }

.tm-xi-banner__sub { font-size: 0.78rem; opacity: 0.85; }

/* ── Wish boards (Deseados ⇄ Prescindibles) ────────────────────────────── */
.tm-wb__rows { list-style: none; margin: 0; padding: 0; display: grid; }

.tm-wb__empty { display: grid; gap: 12px; padding: 12px 0 4px; }

.tm-wb__empty-title { margin: 0; font-size: 0.95rem; font-weight: 600; }

.tm-wb__propose { width: 100%; margin-top: 12px; }

/* Ver más — the tail rows fold under a native <details>, no JS. */
.tm-wb-more { margin-top: 2px; }

.tm-wb-more__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
}

.tm-wb-more__summary::-webkit-details-marker { display: none; }

.tm-wb-more__summary::after { content: '▾'; transition: transform 0.15s; }

.tm-wb-more[open] .tm-wb-more__summary::after { transform: rotate(180deg); }

/* Each afición entry is a CARD (identity) + the social bar below — the same
   unit as the radar item, so both surfaces read alike. Here the bar's 👍/👎
   is the WISH (it ranks). */
.tm-wb-item {
    margin-bottom: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-hover);
}

.tm-wb-item--top {
    background:
        linear-gradient(0deg,
            color-mix(in oklab, var(--color-warning) 7%, transparent),
            color-mix(in oklab, var(--color-warning) 7%, transparent)),
        var(--color-surface-hover);
}

.tm-wb-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.tm-wb-card__rank {
    flex: 0 0 22px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Crown on #1 — CSS only, holds as long as the card leads. */
.tm-wb-item--top .tm-wb-card__rank { font-size: 0; }

.tm-wb-item--top .tm-wb-card__rank::before { content: '👑'; font-size: 0.95rem; }

.tm-wb-card__who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

/* 44px = foto (`.squad-row__photo`) y board /mercado, homogéneo con los
   movimientos y con la bandera (`.squad-row__flag`) en la esquina real. */
.tm-wb-card__photo { width: 44px; height: 44px; flex: 0 0 44px; }

.tm-wb-card__id { min-width: 0; display: grid; }

.tm-wb-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-wb-card__pos { font-size: 0.78rem; color: var(--color-text-secondary); }

/* Valor de mercado actual bajo edad·posición: "Valor de mercado: €X", en
   texto normal (blanco), sin verde (oculto en backend si 0/null). */
.tm-wb-card__value {
    margin-top: 1px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* La bandera reutiliza `.squad-row__flag` (mismo look que el board /mercado);
   solo garantizamos que el wrap es el ancla (por si su base no llega al tab). */
.tm-move-row__photo,
.tm-wb-card__photo { position: relative; }

/* ── Filtro "Míos" — pill estilo Seguidos (toggle Prime): off = comunidad,
   on = tus votos. Solo se renderiza con ≥1 voto. ── */
.tm-wb-filter { margin-bottom: 12px; }

.tm-wb-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tm-wb-filter__pill:hover { border-color: var(--color-border); }

.tm-wb-filter__icon {
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.tm-wb-filter__count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-surface-hover);
    font-size: 0.72rem;
    line-height: 18px;
    text-align: center;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Activo — verde de marca, como el "Seguidos" de la referencia. */
.tm-wb-filter__pill.is-active {
    border-color: transparent;
    background: var(--color-accent);
    color: var(--color-bg);
}

.tm-wb-filter__pill.is-active .tm-wb-filter__icon { color: inherit; }

.tm-wb-filter__pill.is-active .tm-wb-filter__count {
    background: rgb(0 0 0 / 20%);
    color: inherit;
}

/* ── Los Que Más Gastan ────────────────────────────────────────────────── */
.tm-spend__rows { list-style: none; margin: 0; padding: 0; display: grid; }

.tm-spend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tm-spend-row:last-child { border-bottom: 0; }

.tm-spend-row--current {
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-accent) 10%, transparent);
    padding-inline: 6px;
    margin-inline: -6px;
}

.tm-spend-row__rank {
    flex: 0 0 22px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tm-spend-row__who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.tm-spend-row__crest { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }

.tm-spend-row__name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-spend-row__val { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.9rem; }

/* ── Post surface: a market card + its social bar are ONE card (X idiom) ─
   The wrapper carries the surface + kit tint; the row and the bar sit over
   it transparently, split by a divider — so the bar reads as part of the
   card, not a detached strip. Same tint recipe as .rumour-row. Shared by the
   club radar item (`.tm-radar-item`) and the global feed posts (`.mk-post`),
   so a rumour/oficial row reads identically on both surfaces. */
.tm-radar-item,
.mk-post {
    margin-bottom: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    --_tint-strength: 13%;
    background:
        linear-gradient(
            90deg,
            color-mix(in oklab, var(--_from-tint, transparent) var(--_tint-strength), transparent),
            transparent 38% 62%,
            color-mix(in oklab, var(--_to-tint, transparent) var(--_tint-strength), transparent)
        ),
        var(--color-surface-hover);
}

:root[data-theme^="light"] .tm-radar-item,
:root[data-theme^="light"] .mk-post { --_tint-strength: 7%; }

/* The row gives up its own surface/rounding/margin — the post owns them now. */
.tm-radar-item .rumour-row,
.mk-post .rumour-row {
    background: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* ══ Unified social bar (X/Reddit engagement row) — app-wide primitive ═══
   Transparent (shares the card tint), a hairline divider on top. Each slot is
   an EQUAL fraction (flex: 1) so the row fills 100% AND nothing reflows when a
   count appears or clears — the slot width is fixed, only its centred content
   changes. */
.social-bar {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    border-top: 1px solid var(--color-border-subtle);
}

.social-bar__btn, .social-bar__views {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 600;
}

.social-bar__btn {
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease;
}

.social-bar__btn:hover, .social-bar__btn:focus-visible { color: var(--color-text); outline: none; }

/* Reaction ON = the icon LIGHTS UP (colour only, no pill background). */
.social-bar__btn--up.is-on { color: var(--mk-income); }

.social-bar__btn--down.is-on { color: var(--mk-spend); }

/* Reserve the count's slot so the icon never jumps when a number arrives. */
.social-bar__n {
    min-width: 1.4ch;
    text-align: start;
}

.social-bar__views { cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .social-bar__btn { transition: none; }
}

} /* @layer components */