/* ====================================================================
   IL MERCATO SUL TELEFONO — .m-mkt-*. Le forme comuni (.m-page, .m-chead,
   .m-disc, .m-sub, .m-tert) stanno in css/mobile.css.

   La carta porta i COLORI DELLA SQUADRA — --c1 e --c2 arrivano dal
   renderer, sono gli stessi dello stemma — perche' e' una decisione
   registrata dell'utente: fra quattro offerte si riconosce prima il club
   dal colore che leggendo il nome.
   ==================================================================== */

.m-mkt-carte { display: flex; flex-direction: column; gap: 6px; }

/* UNA RIGA PER OFFERTA, che si apre a tocco. Chiusa dice le tre cose su cui
   si sceglie di aprirla — chi, che offerta, quanto giochi — e dentro c'e'
   tutto il resto, compresa la CTA: e' la forma del passo 3 della creazione,
   gia' approvata, portata qui. */
.m-mkt-riga {
  border: 1px solid var(--rtp4-line);
  border-left: 3px solid var(--c1, var(--rtp4-line));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c1) 9%, var(--rtp4-ink3)), var(--rtp4-ink3));
  overflow: hidden;
}
/* "resti qui" non e' un'offerta: azzurro, che nel rango dei colori vuol dire te */
.m-mkt-resta { border-left-color: var(--accent-player); }
.m-mkt-riga > summary {
  list-style: none; cursor: pointer; min-height: 56px;
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px;
}
.m-mkt-riga > summary::-webkit-details-marker { display: none; }
.m-mkt-r1 { display: flex; align-items: center; gap: 8px; }
.m-mkt-r1 .crest { width: 22px; height: 22px; border-radius: var(--radius-pill); flex: none; font-size: .7rem; }
.m-mkt-r1 b {
  flex: 1; min-width: 0; font: 600 var(--type-corpo) var(--rtp4-reading); color: var(--rtp4-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-mkt-ovr { flex: none; font: 700 var(--type-corpo) var(--rtp4-display); color: var(--accent-player); }
.m-mkt-r2 { display: flex; align-items: baseline; gap: 6px; font-size: var(--type-etichetta); color: var(--rtp4-muted); }
.m-mkt-r2 > small:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-mkt-r2 b { font: 700 var(--type-corpo) var(--rtp4-display); color: var(--rtp4-text); }
.m-mkt-segno {
  flex: none; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--rtp4-ink4); color: var(--rtp4-soft);
}
.m-mkt-segno.su { background: color-mix(in srgb, var(--rtp4-green) 20%, transparent); color: var(--rtp4-green); }
.m-mkt-segno.giu { background: color-mix(in srgb, var(--rtp4-amber) 20%, transparent); color: var(--rtp4-amber); }
.m-mkt-dentro {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 12px 11px; border-top: 1px solid var(--rtp4-line); padding-top: 9px;
}

/* le celle: piazzamento, proprieta', coppe — quanto giochi sta gia' nella riga */
.m-mkt-chiave { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.m-mkt-chiave > div {
  padding: 7px 9px; border-radius: var(--radius-xs); background: var(--rtp4-ink4); min-width: 0;
}
.m-mkt-chiave span {
  display: block; font-size: var(--type-etichetta); letter-spacing: .05em;
  text-transform: uppercase; color: var(--rtp4-muted);
}
.m-mkt-chiave b { font: 700 var(--type-sezione) var(--rtp4-display); color: var(--rtp4-text); }
.m-mkt-chiave b.testo { font-size: var(--type-corpo); }
.m-mkt-chiave small { display: block; font-size: var(--type-etichetta); color: var(--rtp4-muted); }

/* dentro l'espandi: ingaggio, strutture, reparto, cartellino, fiducia */
.m-mkt-kv { display: flex; flex-direction: column; gap: 5px; }
.m-mkt-kv span { font-size: var(--type-nota); color: var(--rtp4-muted); }
.m-mkt-kv b { font-size: var(--type-nota); color: var(--rtp4-soft); font-weight: 600; }
.m-mkt-kv b.su { color: var(--rtp4-green); }
.m-mkt-kv b.giu { color: var(--rtp4-amber); }
.m-mkt-kv b.chiede { color: var(--rtp4-lime); }

.m-mkt-azione .mkt-vai {
  width: 100%; min-height: 48px; border: 0; border-radius: var(--radius-sm);
  background: var(--rtp4-lime); color: var(--ink-1000);
  font: 700 var(--type-corpo) var(--rtp4-reading); cursor: pointer;
}
.m-mkt-azione .mkt-ghost {
  background: transparent; border: 1px solid var(--rtp4-line); color: var(--rtp4-soft);
}
.m-mkt-oggi { margin: 0; font-size: var(--type-nota); color: var(--rtp4-soft); }
.m-mkt-oggi b { color: var(--rtp4-text); }
.m-mkt-ritiro { align-self: center; margin-top: 4px; }
.m-mkt-riga .mkt-patto {
  margin: 0; padding: 8px 10px; border-radius: var(--radius-xs);
  background: var(--rtp4-ink4); font-size: var(--type-nota); color: var(--rtp4-soft);
}
.m-page > .mkt-avviso {
  margin: 0; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--rtp4-ink4); font-size: var(--type-nota); color: var(--rtp4-soft);
}