/* ======================================================================
   RTP4: la stagione, la partita e la fine stagione del redesign di Fase 2.
   Sorgente: docs/da-codex/*.html (Codex). Portato com'e, con le variabili
   agganciate ai token e senza i reset che base.css fa gia.
   ====================================================================== */

/* Il sistema rtp4 e il foglio del redesign di Fase 2, scritto da Codex e
   portato qui com'e. Le sue variabili sono alias dei token del progetto:
   i colori vivono in tokens.css, questo file li usa e basta. */
:root {
  --rtp4-ink: var(--ink-900); --rtp4-ink2: var(--ink-850); --rtp4-ink3: var(--ink-800);
  --rtp4-ink4: var(--ink-700); --rtp4-ink5: var(--ink-600);
  --rtp4-text: var(--text-primary); --rtp4-soft: var(--text-secondary); --rtp4-muted: var(--text-muted);
  --rtp4-lime: var(--accent-brand); --rtp4-blue: var(--accent-player); --rtp4-orange: var(--accent-energy);
  --rtp4-gold: var(--accent-achievement); --rtp4-green: var(--state-positive); --rtp4-amber: var(--state-warning);
  --rtp4-red: var(--state-negative); --rtp4-line: var(--ink-600);
  --rtp4-display: var(--font-display-ui); --rtp4-reading: var(--font-ui);
}
#app:has(.rtp4-state) {
  max-width:1920px}
.rtp4-top-player {
  display:grid;
  grid-template-columns:42px minmax(82px,auto) 38px;
  align-items:center;
  gap:9px;
  margin-right:7px;
  padding-right:13px;
  border-right:1px solid var(--rtp4-line)}
.rtp4-top-number {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--rtp4-blue) 52%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--rtp4-blue) 13%,var(--rtp4-ink2));
  color:var(--rtp4-blue);
  font:700 var(--type-valore)/1 var(--rtp4-display)}
.rtp4-top-name {
  display:grid;
  min-width:0;
  text-align:right}
.rtp4-top-name b {
  overflow:hidden;
  color:var(--rtp4-text);
  font:600 var(--type-valore)/1.1 var(--rtp4-reading);
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap}
.rtp4-top-name small {
  margin-top:3px;
  overflow:hidden;
  color:var(--rtp4-muted);
  font-size:var(--type-etichetta);
  text-overflow:ellipsis;
  white-space:nowrap}
.rtp4-top-ovr {
  display:grid;
  text-align:center}
.rtp4-top-ovr small {
  color:var(--rtp4-muted);
  font-size:var(--type-etichetta)}
.rtp4-top-ovr b {
  color:var(--rtp4-blue);
  font:700 var(--type-sezione)/1 var(--rtp4-display)}
.topbar:has(.rtp4-top-player) .actions {
  align-items:center;
  flex-wrap:nowrap}
.rtp4-page { min-height: auto; padding: 0; }
.rtp4-state { max-width: none; margin: 0; border-top: 0; }
.rtp4-kicker {
  display:block}
.rtp4-state-metric {
  position:relative;
  cursor:help;
  outline:none}
.rtp4-state-metric b {
  color:var(--rtp4-text)}
.rtp4-aiuto::after,
.rtp4-attrs-train .rtp4-attr::after,
.rtp4-state-metric::after {
  content:attr(data-tip);
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  left:8px;
  width:min(280px,calc(100vw - 48px));
  padding:9px 11px;
  border:1px solid var(--rtp4-line);
  border-radius:var(--radius-sm);
  background:var(--ink-950);
  color:var(--rtp4-text);
  box-shadow:var(--elevation-2);
  font:500 var(--type-etichetta)/1.45 var(--rtp4-reading);
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  pointer-events:none}
.rtp4-aiuto:hover::after,
.rtp4-aiuto:focus-visible::after,
.rtp4-attrs-train .rtp4-attr:hover::after,
.rtp4-attrs-train .rtp4-attr:focus-visible::after,
.rtp4-state-metric:hover::after,
.rtp4-state-metric:focus-visible::after {
  opacity:1;
  visibility:visible;
  transform:translateY(0)}
.rtp4-state-metric:focus-visible {
  box-shadow:inset 0 0 0 1px var(--rtp4-blue)}
.rtp4-state-good b {color:var(--rtp4-green)}
.rtp4-state-watch b {color:var(--rtp4-amber)}
.rtp4-state-bad b {color:var(--rtp4-red)}
.rtp4-careerbar .rtp4-state-metric:last-child::after {
  right:8px;
  left:auto}
.rtp4-layout {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(430px,1fr);
  gap:14px;
  align-items:start}
.rtp4-panel {
  background:var(--rtp4-ink3);
  border:1px solid var(--rtp4-line);
  border-radius:var(--radius-md);
  overflow:hidden}
.rtp4-main {
  min-height:0;
  border-top-color:var(--rtp4-gold)}
.rtp4-side {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  overflow:visible}
.rtp4-panelhead {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:16px 18px 0}
.rtp4-panelhead h2 {
  margin:0;
  font:600 var(--type-sezione) var(--rtp4-display);
  text-transform:uppercase}
.rtp4-panelhead small {
  color:var(--rtp4-muted)}
.rtp4-tabs {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:4px;
  padding:12px 18px 0}
.rtp4-tabs span {
  min-height:44px;
  display:flex;
  align-items:center;
  padding:8px 12px;
  background:var(--rtp4-ink2);
  color:var(--rtp4-soft);
  font-weight:600}
.rtp4-tabs .rtp4-selected {
  border-bottom:3px solid var(--rtp4-gold);
  background:var(--rtp4-ink4);
  color:var(--rtp4-text)}
.rtp4-view {
  padding:16px 18px 18px}
.rtp4-view-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--rtp4-line)}
.rtp4-view-title h3 {
  margin:3px 0 0;
  font:600 var(--type-pagina) var(--rtp4-display)}
.rtp4-view-title b {
  font:400 var(--type-nota) var(--rtp4-reading)}
.rtp4-tablewrap {
  overflow:auto}
.rtp4-table {
  width:100%;
  min-width:0;
  border-collapse:collapse}
.rtp4-table th {
  height:38px;
  color:var(--rtp4-muted);
  font-weight:400;
  text-align:right}
.rtp4-table th:nth-child(2) {
  text-align:left}
.rtp4-table td {
  height:44px;
  border-top:1px solid var(--rtp4-line);
  text-align:right;
  font-variant-numeric:tabular-nums}
.rtp4-table td:nth-child(2) {
  text-align:left}
.rtp4-table .rtp4-mine td {
  background:color-mix(in srgb, var(--accent-player) 8%, transparent);
  color:var(--rtp4-text);
  font-weight:600}
.rtp4-table .rtp4-mine td:first-child {
  border-left:4px solid var(--rtp4-blue)}

/* LA ZONA: il colore va sul numero della posizione, non su una lineetta di
   4x15 accanto. La lineetta occupava 60 pixel quadrati su una riga alta 54:
   da lontano la classifica era tutta uguale. Adesso il colore sta sul dato
   che dice davvero dove finisci, piu un bordo pieno a sinistra della cella.
   Il bordo pero non si mette sulla TUA riga: li quel bordo e gia azzurro e
   vuol dire "sei tu", che nel sistema dei colori batte tutto il resto. Sulla
   tua riga la zona resta scritta nel numero — azzurro a sinistra, numero
   rosso: sei tu, e sei in zona retrocessione. */
.rtp4-table td:first-child {
  border-left:4px solid transparent}
.rtp4-table tbody .zone {
  display:none}
.rtp4-table td:first-child:has(.z-ucl), .rtp4-table td:first-child:has(.z-eu1) {
  color:var(--accent-player)}
.rtp4-table td:first-child:has(.z-uel), .rtp4-table td:first-child:has(.z-eu2) {
  color:var(--state-warning)}
.rtp4-table td:first-child:has(.z-eu3) {
  color:var(--field-accent)}
.rtp4-table td:first-child:has(.z-promo) {
  color:var(--state-positive)}
.rtp4-table td:first-child:has(.z-rel) {
  color:var(--state-negative)}
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-ucl),
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-eu1) {
  border-left-color:var(--accent-player)}
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-uel),
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-eu2) {
  border-left-color:var(--state-warning)}
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-eu3) {
  border-left-color:var(--field-accent)}
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-promo) {
  border-left-color:var(--state-positive)}
.rtp4-table tr:not(.rtp4-mine) td:first-child:has(.z-rel) {
  border-left-color:var(--state-negative)}
.rtp4-stakes {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:12px 14px;
  border-left:3px solid var(--rtp4-gold);
  background:var(--rtp4-ink2)}
.rtp4-stakes b {
  font:600 var(--type-valore) var(--rtp4-display)}
.rtp4-tie.rtp4-mine {
  border-left-color:var(--rtp4-blue)}
.rtp4-nexthead {
  display:flex;
  justify-content:space-between;
  align-items:baseline}
.rtp4-nexthead h2 {
  margin:0;
  color:var(--rtp4-text);
  font:600 var(--type-sezione) var(--rtp4-display);
  text-transform:uppercase}
.rtp4-nexthead small {
  color:var(--rtp4-muted)}
.rtp4-fixture {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:18px 0}
.rtp4-team {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:600}
.rtp4-team:last-child {
  justify-content:flex-end}
.rtp4-crest {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--rtp4-ink4);
  border:1px solid var(--rtp4-line);
  font:600 var(--type-valore) var(--rtp4-display)}
.rtp4-team.rtp4-player .rtp4-crest {
  background:color-mix(in srgb, var(--accent-player) 16%, transparent);
  color:var(--rtp4-blue)}
.rtp4-vs {
  color:var(--rtp4-soft);
  font:600 var(--type-etichetta) var(--rtp4-reading)}
.rtp4-why {
  padding:11px 12px;
  border-left:3px solid var(--rtp4-gold);
  background:var(--rtp4-ink2)}
.rtp4-why b {
  display:block;
  margin-top:3px}
.rtp4-indisponibile { border-left-color:var(--accent-energy); }
.rtp4-indisponibile b { color:var(--accent-energy); }
.rtp4-train {
  padding:12px;
  border:1px solid var(--rtp4-line);
  background:var(--rtp4-ink2)}
.rtp4-trainhead {
  display:flex;
  justify-content:space-between;
  align-items:baseline}
.rtp4-train p {
  margin:8px 0;
  color:var(--rtp4-soft)}
.rtp4-sidegrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px}
.rtp4-performance-grid {
  grid-template-columns:1fr}
.rtp4-box {
  padding:10px;
  border:1px solid var(--rtp4-line);
  background:var(--rtp4-ink2)}
.rtp4-box h3 {
  display:flex;
  justify-content:space-between;
  margin:0 0 8px;
  color:var(--rtp4-soft);
  font:600 var(--type-valore) var(--rtp4-display);
  text-transform:uppercase}
.rtp4-numbers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 10px}
.rtp4-numbers span,.rtp4-attrs span {
  display:flex;
  justify-content:space-between;
  color:var(--rtp4-muted)}
.rtp4-numbers b {
  color:var(--rtp4-text);
  font:600 var(--type-valore) var(--rtp4-display)}
.rtp4-attrs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 10px}
.rtp4-attrs b {
  color:var(--rtp4-blue);
  font:600 var(--type-valore) var(--rtp4-display)}
.rtp4-main-objectives {
  padding:0 18px 18px}
.rtp4-objectives {
  margin-top:14px;
  padding:14px}
.rtp4-empty {
  margin:0;
  color:var(--rtp4-muted)}
.rtp4-goals {
  display:grid;
  gap:7px}
.rtp4-goal div {
  display:flex;
  justify-content:space-between}
.rtp4-goal .rtp4-track {
  margin-top:4px}

.rtp4-goal .rtp4-track i {
  background:var(--rtp4-orange)}
/* raggiunto: il colore lo decide o.done del motore, non la larghezza
   della barra — una barra piena per arrotondamento non e un obiettivo fatto */
.rtp4-goal.rtp4-fatto .rtp4-track i {
  background:var(--rtp4-green)}
.rtp4-goal.rtp4-fatto b {
  color:var(--rtp4-green)}
.rtp4-trophy,.rtp4-promotion {
  padding:10px 12px;
  border-left:3px solid var(--rtp4-orange);
  background:var(--rtp4-ink2)}
.rtp4-trophy {
  border-left-color:var(--rtp4-gold)}
.rtp4-promotion {
  border-left-color:var(--rtp4-blue)}
.rtp4-trophy b,.rtp4-promotion b {
  display:block;
  margin-top:3px;
  font:600 var(--type-valore) var(--rtp4-display)}
.rtp4-calendar {
  border:1px solid var(--rtp4-line);
  background:var(--rtp4-ink2)}
.rtp4-calendar summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:40px;
  padding:8px 11px;
  color:var(--rtp4-soft);
  cursor:pointer;
  list-style:none}
.rtp4-calendar summary::-webkit-details-marker {
  display:none}
.rtp4-calendar summary::after {
  content:"+";
  font:600 var(--type-sezione) var(--rtp4-display)}
.rtp4-calendar[open] summary::after {
  content:"−"}
.rtp4-schedule {
  max-height:150px;
  overflow-y:auto;
  border-top:1px solid var(--rtp4-line)}
.rtp4-schedule div {
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:8px;
  padding:9px 11px;
  border-top:1px solid var(--rtp4-line);
  color:var(--rtp4-soft)}
.rtp4-schedule div:first-child {
  border-top:0}
.rtp4-schedule b {
  color:var(--rtp4-text);
  font-weight:600}
.rtp4-disc-body {
  padding:10px 11px;
  border-top:1px solid var(--rtp4-line)}
/* solo il ramo mobile di rtp4Season() la usa: .rtp4-side da' gap ai SUOI
   figli, non ai blocchi di primo livello (match, i 4 dettagli, stato) che
   sul telefono stavano incollati l'uno all'altro senza spazio (segnalato
   dall'utente, non era cosi' nel mockup) */
@media(min-width:1600px) {
  .rtp4-page {
  padding:34px 46px}
.rtp4-layout {
  grid-template-columns:minmax(0,1.8fr) minmax(560px,1fr)}
.rtp4-side {
  padding:20px}
.rtp4-table td {
  height:50px}
}
@media(max-width:980px) {
  .rtp4-page {
  padding:18px}
.rtp4-layout {
  grid-template-columns:1fr}
.rtp4-side {
  order:-1}
.rtp4-main {
  min-height:0}
.rtp4-sidegrid {
  grid-template-columns:1fr 1fr}
.rtp4-performance-grid {
  grid-template-columns:1fr}
}
@media(max-width:520px) {
.rtp4-page {
  padding:10px}
.rtp4-state {
  margin-bottom:38px}
.rtp4-nav {
  overflow:auto}
.rtp4-nav > * {
  min-width:78px}
.rtp4-stati-griglia {
  grid-template-columns:1fr}
.rtp4-panelhead {
  align-items:flex-start;
  flex-direction:column}
.rtp4-tabs {
  display:flex;
  overflow:auto}
.rtp4-tabs span {
  min-width:max-content}
.rtp4-view-title h3 {
  font-size:var(--type-sezione)}
.rtp4-side {
  padding:12px}
.rtp4-actions,.rtp4-sidegrid {
  grid-template-columns:1fr 1fr}
.rtp4-performance-grid {
  grid-template-columns:1fr}
.rtp4-table {
  min-width:650px}
.rtp4-top-player {
  grid-template-columns:32px minmax(56px,72px) 32px;
  gap:6px;
  margin-right:2px;
  padding-right:7px}
.rtp4-top-number {
  width:32px;
  height:32px;
  font-size:var(--type-valore)}
.rtp4-top-name b {
  font-size:var(--type-corpo)}
.rtp4-top-name small {
  overflow:hidden;
  font-size:var(--type-etichetta);
  text-overflow:ellipsis}
.rtp4-top-ovr b {
  font-size:var(--type-valore)}
.topbar:has(.rtp4-top-player) {
  column-gap:7px}
.topbar:has(.rtp4-top-player) .actions {
  gap:4px}
}

/* ---- Aggiunte del porting: cose che il mockup non aveva perche' statico ---- */
/* le tab e la nav sono bottoni veri, non span: stesso aspetto */
.rtp4-tabs button { background: none; border: 0; box-shadow: none; min-height: 0; border-radius: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.rtp4-attr { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: var(--radius-sm); border: 0; background: var(--rtp4-ink2); color: var(--rtp4-soft); font:500 var(--type-nota) var(--rtp4-reading); box-shadow: none; cursor: pointer; }
.rtp4-attr b { font: 600 var(--type-valore) var(--rtp4-display); color: var(--rtp4-text); }
/* I pallini del peso nel ruolo: stessa lingua del pannello (.attr-w), qui
   dentro il chip, dove si decide cosa allenare. */
.rtp4-attr .attr-w { margin: 0; gap: 2px; }
.rtp4-attr.rtp4-p, .rtp4-attr.rtp4-s { color: var(--rtp4-text); background: var(--rtp4-ink4); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-brand) 50%, transparent); }
.rtp4-attr.rtp4-s { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-brand) 22%, transparent); }
.rtp4-tag { font: 700 var(--type-etichetta)/1 var(--rtp4-reading); padding: 3px 5px; border-radius: var(--radius-xs); background: var(--rtp4-lime); color: var(--ink-1000); font-style: normal; }
.rtp4-tag-s { background: color-mix(in srgb, var(--accent-brand) 22%, transparent); color: var(--rtp4-lime); }
/* le card delle coppe ospitate dentro la vista: niente doppio piano */
.rtp4-ospite > .card { background: transparent; box-shadow: none; padding: 0; margin: 0 0 12px; }
/* la conferma di fine stagione, e il toggle della classifica */
.rtp4-confirm { grid-column: 1 / -1; padding: 12px; border-radius: var(--radius-md); background: var(--rtp4-ink2); }
.rtp4-confirm > b { display: block; margin-bottom: 8px; }
.rtp4-confirm > div { display: flex; gap: 8px; }
/* il toggle della classifica usa .rtp4-button, ma non e un comando della
   partita: si apre una tabella, non si gioca. Torna quieto — niente bordo
   spesso, niente maiuscolo, testo secondario. */
.rtp4-table-toggle {
  width: 100%; margin-top: 8px;
  min-height: 40px; border-bottom-width: 1px;
  background: transparent; color: var(--rtp4-soft);
  text-transform: none; letter-spacing: 0;
  font: 500 var(--type-nota) var(--rtp4-reading); }
.rtp4-gap td { text-align: center; color: var(--rtp4-muted); padding: 2px 0; }
/* gancio: la barra e uno span, nel gioco deve essere un blocco per avere altezza */
.rtp4-track { display: block; }

.rtp4-view-title .badge-vivaio, .rtp4-nexthead .badge-vivaio {
  vertical-align:1px}
.rtp4-view-title .badge-vivaio {
  margin-left:0}

/* Col fondale acceso i pannelli devono lasciarlo passare: se restano opachi
   l immagine si vede solo nelle fughe e tanto vale non metterla. Vetro
   smerigliato: meta superficie, meta foto.

   NIENTE backdrop-filter, e non e un dettaglio estetico. Con la sfocatura
   dietro i pannelli la stessa identica pagina dava due immagini diverse a due
   catture di seguito — il risultato del blur non e uguale bit per bit fra un
   giro e l altro — e il gate visivo diventava instabile per colpa nostra.
   Non serve nemmeno: l immagine sotto e gia sfocata all origine. */
.rtp4-state .rtp4-panel, .rtp4-state .rtp4-box, .rtp4-state .rtp4-train {
  background:color-mix(in srgb, var(--surface-scene) 58%, transparent)}
.rtp4-state .rtp4-careerbar {
  background:color-mix(in srgb, var(--surface-interactive) 45%, transparent)}
.rtp4-state .rtp4-careerbar > .rtp4-state-metric {
  background:color-mix(in srgb, var(--surface-scene) 46%, transparent)}
.rtp4-state .rtp4-nav > * {
  background:color-mix(in srgb, var(--surface-scene) 40%, transparent)}

/* GLI STATI accanto alla partita: come ci arrivi sabato. Righe, non celle —
   etichetta a sinistra, parola a destra, tacche sotto che danno la misura.
   Erano una parola colorata dentro una cella vuota, e sembravano un
   segnaposto perche non c era niente da leggere oltre al colore. */
.rtp4-stati>.rtp4-kicker { color:var(--rtp4-soft); font:600 var(--type-valore) var(--rtp4-reading); letter-spacing:0; text-transform:none; }
.rtp4-stati {
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--rtp4-line)}
.rtp4-stati-griglia {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 22px;
  margin-top:10px}
.rtp4-stati .rtp4-state-metric {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:3px 12px}
.rtp4-stati .rtp4-state-metric small {
  grid-column:1;
  color:var(--rtp4-muted);
  font-size:var(--type-etichetta);
  letter-spacing:.06em;
  text-transform:uppercase}
.rtp4-stati .rtp4-state-metric b {
  grid-column:2;
  text-align:right;
  font:600 var(--type-corpo) var(--rtp4-reading)}
.rtp4-tacche {
  grid-column:1 / -1;
  display:flex;
  gap:3px;
  margin-top:6px}
.rtp4-tacche i {
  flex:1;
  height:3px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--text-primary) 11%, transparent)}
.rtp4-state-good .rtp4-tacche i.on { background:var(--state-positive)}
.rtp4-state-watch .rtp4-tacche i.on { background:var(--state-warning)}
.rtp4-state-bad .rtp4-tacche i.on { background:var(--state-negative)}
/* il "?": la spiegazione dei pallini si apre passandoci sopra invece di
   prendersi una riga sotto il blocco a ogni caricamento */
.rtp4-aiuto {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border:1px solid var(--rtp4-line);
  border-radius:50%;
  color:var(--rtp4-muted);
  font:700 var(--type-etichetta)/1 var(--rtp4-reading);
  cursor:help}
.rtp4-aiuto:hover, .rtp4-aiuto:focus-visible {
  border-color:var(--rtp4-soft);
  color:var(--rtp4-text)}