/* ====================================================================
   IL PRE-CAMPIONATO SUL TELEFONO — .m-pre-*, veste
   js/ui-mobile-precampionato.js. Le forme comuni (.m-page, .m-chead,
   .m-dots, .m-wfoot, .m-cta) stanno in css/mobile.css: qui c'e' solo
   quello che nomina un posto di QUESTA schermata.

   I QUATTRO ASSI DEL RITIRO NON SI CHIUDONO, per nessuna ragione di
   altezza: un riassunto a un numero solo nasconde che ogni scelta e' forte
   su un fronte e debole su un altro, ed e' la correzione che l'utente fece
   al mockup prima di approvarlo. Qui si mostra di piu', non di meno.
   ==================================================================== */

.m-pre-camps { display: flex; flex-direction: column; gap: 8px; }
.m-pre-camp {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--rtp4-line); border-radius: var(--radius-sm);
  background: var(--rtp4-ink3); color: var(--rtp4-soft);
}
.m-pre-camp.m-sel { border-color: var(--rtp4-lime); box-shadow: 0 0 0 1px var(--rtp4-lime); }
.m-pre-tag {
  font-size: var(--type-etichetta); letter-spacing: .06em;
  text-transform: uppercase; color: var(--rtp4-muted);
}
.m-pre-camp b { font: 700 var(--type-sezione) var(--rtp4-display); color: var(--rtp4-text); }
.m-pre-camp .m-sub { margin: 0; }
.m-pre-assi { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.m-pre-asse {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--type-nota); color: var(--rtp4-muted);
}
.m-pre-lascia {
  margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--rtp4-line);
  font-size: var(--type-nota); color: var(--rtp4-soft);
}
.m-pre-lascia small {
  margin-right: 6px; font-size: var(--type-etichetta);
  letter-spacing: .06em; text-transform: uppercase; color: var(--rtp4-muted);
}

/* ---------- il piano di allenamento ---------- */
.m-pre-fatto {
  margin: 0; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--rtp4-ink4); font-size: var(--type-nota); color: var(--rtp4-soft);
}
.m-pre-fatto svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--rtp4-green); }
.m-pre-slot { display: flex; flex-direction: column; gap: 6px; }
.m-pre-attrs { display: flex; flex-direction: column; gap: 5px; }
.m-pre-attr {
  display: flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 6px 11px; border: 0; border-radius: var(--radius-xs);
  background: var(--rtp4-ink4); color: var(--rtp4-soft);
  font-size: var(--type-nota); text-align: left; cursor: pointer;
}
.m-pre-attr span { flex: 1; min-width: 0; }
.m-pre-attr b { font: 700 var(--type-corpo) var(--rtp4-display); color: var(--rtp4-text); flex: none; }
.m-pre-attr.m-sel { box-shadow: 0 0 0 1px var(--rtp4-lime); }
/* lo stesso attributo gia' preso dall'altro slot: si vede che e' occupato,
   ma resta premibile — sceglierlo qui lo sposta, e impedirlo sarebbe un
   vicolo cieco senza spiegazione */
.m-pre-attr[data-altro] { opacity: .55; }