/* ======================================================================
   LA FASCIA DEL CAMMINO — il rango, i Punti Legenda e l allenamento.
   Uscita da css/rtp4.css, che aveva sfondato il tetto, e poi da
   css/hub-barre.css, che era stato dichiarato a 150 righe: un tetto
   dichiarato non si alza, si divide ancora. Li restano i CONTROLLI dell hub
   (le schede e i comandi della partita), qui sta la fascia che racconta a
   che punto sei.
   Carica DOPO rtp4.css: le regole responsive della fascia devono stare qui,
   o quelle di rtp4.css perderebbero per ordine di caricamento.
   ====================================================================== */

/* LA FASCIA IN ALTO: il cammino, i Punti Legenda e l ALLENAMENTO. Gli stati
   — titolarita, forma, morale — sono scesi accanto alla partita, che e il
   loro posto: dicono come ci arrivi sabato. Qui resta quello che costruisce
   la leggenda nel lungo periodo, e allenarsi e la leva con cui la costruisci. */
.rtp4-careerbar {
  grid-template-rows:auto auto auto;
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(250px,1fr) minmax(330px,1.5fr);
  gap:1px;
  margin-bottom:14px;
  background:var(--rtp4-line);
  border:1px solid var(--rtp4-line)}
.rtp4-careerbar>* {
  grid-row:span 3;
  min-height:0;
  align-content:start;
  padding:12px 16px;
  background:var(--rtp4-ink2)}
/* cammino e Punti Leggenda condividono le RIGHE: cosi i due titoli stanno
   sulla stessa quota davvero, invece di essere due blocchi centrati che
   sembrano storti. L allenamento no: le sue pastiglie sono alte due file e
   detterebbero l altezza anche agli altri due. */
.rtp4-careerbar .rtp4-rank, .rtp4-careerbar .rtp4-lp {
  display:grid;
  grid-template-rows:subgrid;
  align-content:start}
.rtp4-careerbar .rtp4-train {
  border:0;
  padding:11px 15px}
/* Gli angoli in basso stavano su overflow:hidden (U23): tagliava anche il
   tooltip del "?" quando sforava. Si spostano sui riquadri che toccano lo spigolo. */
.rtp4-careerbar .rtp4-rank { border-bottom-left-radius:var(--radius-md)}
.rtp4-careerbar .rtp4-train { border-bottom-right-radius:var(--radius-md)}
/* Qui dentro non c e nessun titolo di sezione: "Il tuo cammino" e "Punti
   Leggenda" sono ETICHETTE, cioe nomi del dato che sta sotto. Per questo vanno
   a --type-etichetta e il rango va a --type-valore. Non e il ribaltamento della
   regola vecchia ("il titolo non e mai piu piccolo di cio che introduce"), e
   quella regola applicata al ruolo giusto: i sette ruoli stanno in tokens.css. */
.rtp4-rank .rtp4-kicker, .rtp4-lp .rtp4-kicker, .rtp4-trainhead .rtp4-kicker {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:3px;
  color:var(--rtp4-soft);
  letter-spacing:.04em;
  text-transform:uppercase;
  font:600 var(--type-etichetta)/1.2 var(--rtp4-reading)}
.rtp4-rank b {
  font:600 var(--type-valore)/1.15 var(--rtp4-reading);
  color:var(--rtp4-text)}
.rtp4-rank p {
  margin:3px 0 0;
  color:var(--rtp4-soft)}
.rtp4-lp {
  display:grid;
  gap:6px}
.rtp4-lp div {
  display:flex;
  justify-content:space-between;
  align-items:baseline}
.rtp4-lp b {
  font:700 var(--type-numero)/1 var(--rtp4-display)}
.rtp4-track {
  height:5px;
  background:var(--ink-700);
  overflow:hidden}
.rtp4-track i {
  display:block;
  height:100%;
  background:var(--rtp4-lime)}
/* Cammino e Punti Leggenda sono un riquadro solo — la meccanica che da il nome
   al gioco, e l unica qui che porta la lime. Da qui tre cose: una velatura che
   attraversa le due celle e si spegne verso destra, tenue apposta perche piu
   carica vorrebbe testo scuro; nessuna riga di griglia fra loro (la cella di
   sinistra sconfina di 1px e la copre); il resto della fascia resta neutro. */
.rtp4-rank {
  position:relative;
  margin-right:-1px;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--accent-brand) 24%, var(--rtp4-ink2)),
    color-mix(in srgb, var(--accent-brand) 13%, var(--rtp4-ink2)))}
.rtp4-lp {
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--accent-brand) 13%, var(--rtp4-ink2)),
    color-mix(in srgb, var(--accent-brand) 3%, var(--rtp4-ink2)))}
/* la didascalia sta dove il lime e piu carico: col grigio piu tenue scendeva
   a 3:1, con questo resta sopra la soglia */
.rtp4-rank .rtp4-kicker {
  color:var(--rtp4-soft)}
.rtp4-rank b, .rtp4-lp b {
  color:var(--accent-brand)}
.rtp4-lp .rtp4-track i {
  background:var(--accent-brand)}

@media(max-width:980px) {
.rtp4-careerbar {
  grid-template-columns:1fr 1fr}
.rtp4-careerbar .rtp4-train {
  grid-column:1 / -1}
/* .rank non tocca piu lo spigolo una volta che .train scende a tutta larghezza. */
.rtp4-careerbar .rtp4-rank { border-bottom-left-radius:0}
.rtp4-careerbar .rtp4-train { border-bottom-left-radius:var(--radius-md)}
}

@media(max-width:520px) {
.rtp4-careerbar {
  grid-template-columns:1fr}
.rtp4-careerbar .rtp4-state-metric:nth-child(even)::after {
  right:8px;
  left:auto}
}