/* ── 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;
}

/* ── 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; }

.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;
}

/* ── 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. */
.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;
}

/* 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;
    border-radius: 50%;
    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; }

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

.tm-move-row__id { min-width: 0; display: grid; 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;
}

.tm-move-row__route {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    min-width: 0;
}

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

.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: 2px;
}

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

/* ── 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; }
}

} /* @layer components */