/* Profilo: solo sfondo e base dei form, sopra nocturne.css. */
body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--color-text); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, rgba(0,0,0,.3), transparent 55%), var(--color-bg); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: #d2cefd; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
input, select, button, textarea { font-family: inherit; }
select { appearance: none; }

/* Partite di un'apertura (aperture-partite.js): riquadro sopra la pagina con una scacchiera per partita.
   Le classi .sch* sono quelle di assets/js/scacchi/scacchiera.js. */
.pa {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0;
  display: none; flex-direction: column; border: 0; border-radius: 14px; color: var(--color-text);
  background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800), 0 24px 60px rgba(0,0,0,.6);
}
.pa[open] { display: flex; }
.pa::backdrop { background: rgba(8, 9, 16, .62); backdrop-filter: blur(2px); }
.pa-testa { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--color-neutral-800); }
.pa-titoli { flex: 1; min-width: 0; }
.pa-eco { margin: 0; font-size: 11px; letter-spacing: .1em; color: var(--color-accent); }
.pa-titolo { margin: 2px 0 0; font-size: 19px; font-weight: 500; overflow-wrap: anywhere; }
.pa-sotto { margin: 3px 0 0; font-size: 12.5px; color: var(--color-neutral-500); }
.pa-chiudi {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px;
  color: var(--color-neutral-400); background: transparent;
}
.pa-chiudi:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.pa-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.pa-vuoto { margin: 24px 0; text-align: center; font-size: 13.5px; color: var(--color-neutral-500); }
.pa-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.pa .pa-partita {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit;
  background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-neutral-800); transition: box-shadow .15s, transform .15s;
}
.pa .pa-partita:hover, .pa .pa-partita:focus-visible { box-shadow: 0 0 0 1px var(--color-accent); transform: translateY(-1px); color: inherit; }
.pa-scacchiera { border-radius: 4px; overflow: hidden; }
.pa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-riga { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pa-esito { flex: none; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.pa-esito--vinta { color: #86d9b4; background: #86d9b422; }
.pa-esito--persa { color: #e08b8b; background: #e08b8b22; }
.pa-esito--patta { color: #b2b6ca; background: #b2b6ca22; }
.pa-avversario { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-dettagli { font-size: 11.5px; color: var(--color-neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; user-select: none; -webkit-user-select: none; }
.sch__casa { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sch__casa--chiara { background: #4c5061; }
.sch__casa--scura  { background: #2c2f3c; }
.sch__casa--ultima.sch__casa--chiara { background: color-mix(in srgb, var(--color-accent) 34%, #4c5061); }
.sch__casa--ultima.sch__casa--scura  { background: color-mix(in srgb, var(--color-accent) 34%, #2c2f3c); }
.sch__pezzo { width: 92%; height: 92%; object-fit: contain; user-select: none; }

/* =====================================================================================================
   Insights. Il template di insights.html non ha stili: ogni elemento ha la sua classe qui; il JS sceglie le
   classi di stato (is-on, is-attivo, ...) e i toni (data-tono, data-esito, ...) e passa in variabili CSS solo
   i numeri (--pct, --x, --y, --n).
   ===================================================================================================== */
:root {
  --ins-pos: #86d9b4; --ins-neg: #e08b8b; --ins-neu: #b2b6ca; --ins-warn: #e0a36b; --ins-mid: #e8d48a;
}
/* toni dei valori: precisione buona / media / scarsa, esiti, correzione */
[data-tono="pos"] { --tono: var(--ins-pos); }
[data-tono="neg"] { --tono: var(--ins-neg); }
[data-tono="neu"] { --tono: var(--ins-neu); }
[data-tono="warn"] { --tono: var(--ins-warn); }
[data-tono="mid"] { --tono: var(--ins-mid); }
[data-tono="accento"] { --tono: var(--color-accent); }
[data-tono="tenue"] { --tono: var(--color-neutral-600); }

/* ---------- impianto ---------- */
.ins-pagina { min-height: calc(100vh - 52px); padding-bottom: 80px; overflow-x: clip; }
.ins-contenitore { max-width: 1240px; margin: 0 auto; padding: 28px 24px 0; }
.ins-corpo { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.ins-principale { flex: 1 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ins-sezioni { display: flex; flex-direction: column; gap: 30px; }

/* ---------- intestazione: chi sei e i tuoi rating ---------- */
.ins-testa { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.ins-avatar {
  width: 64px; height: 64px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent-400); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 500;
}
.ins-chi { flex: 1 1 260px; min-width: 0; }
.ins-nome { font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.1; }
.ins-sotto { margin: 0; font-size: 13px; color: var(--color-neutral-600); }
.ins-rating { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-rating-voce { background: var(--color-surface); border-radius: 8px; box-shadow: 0 0 0 1px var(--color-neutral-800); padding: 8px 14px; min-width: 92px; }
.ins-rating-cat { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-rating-elo { margin: 2px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }

/* ---------- schede, sempre in vista mentre si scorre ---------- */
.ins-schede {
  position: sticky; top: 54px; z-index: 30; display: flex; gap: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  width: 100vw; margin: 0 calc(50% - 50vw) 20px; padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px));
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  backdrop-filter: blur(10px); background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}
.ins-scheda {
  appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--color-neutral-600);
  padding: 10px 16px; font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; margin-bottom: -1px;
}
.ins-scheda.is-on { border-bottom-color: var(--color-accent); color: var(--color-text); }
/* quando le schede non stanno nella barra, una sfumatura dice da che parte ce ne sono altre (data-oltre, insights.js) */
.ins-schede[data-oltre="destra"] { mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.ins-schede[data-oltre="sinistra"] { mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
.ins-schede[data-oltre="tutte"] { mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.ins-scheda:hover { color: var(--color-text); }

/* ---------- filtri a pulsanti ---------- */
.ins-filtri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.ins-etichetta { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-opzioni { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-opz {
  appearance: none; cursor: pointer; font-size: 13px; font-weight: 500; padding: 5px 13px; border-radius: 8px;
  border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-500);
}
.ins-opz.is-on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-text); }
/* nessuna partita con questa scelta (storico) */
.ins-opz.is-vuota { color: var(--color-neutral-700); }
.ins-opz.is-piccola { font-size: 12.5px; padding: 4px 12px; }
.ins-opz-conta { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .6; }
.ins-campione { font-size: 12px; color: var(--color-neutral-600); margin-left: auto; }

/* ---------- titoli di sezione ---------- */
.ins-h2 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; margin: 0 0 3px; }
.ins-h2.is-solo { margin-bottom: 14px; }
.ins-intro { margin: 0 0 14px; font-size: 13px; color: var(--color-neutral-600); max-width: 62ch; }
.ins-intro.is-storico { margin-bottom: 16px; }
.ins-importa { color: var(--color-accent); }
.ins-h3 { margin: 0 0 3px; font-size: 15px; font-weight: 500; }
.ins-intro.is-h3 { margin-bottom: 12px; font-size: 12.5px; }

/* ---------- griglie di riquadri ---------- */
.ins-griglia { display: grid; gap: 12px; }
.ins-griglia-mentale { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-bottom: 14px; }
.ins-griglia-tempo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 12px; }
.ins-griglia-tattica { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; }
.ins-griglia-esiti { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ins-griglia-larga { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* le aperture e i finali si dividono lo spazio in più della riga; sotto gli 830 px vanno uno sopra l'altro */
.ins-griglia-aperture { display: flex; flex-wrap: wrap; }
.ins-griglia-aperture > :first-child { flex: 1 1 520px; min-width: 0; }
.ins-griglia-aperture > :last-child { flex: 1 1 300px; min-width: 0; }
.ins-griglia-coetanei { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ---------- riquadro ---------- */
.ins-card { background: var(--color-surface); border-radius: 14px; padding: 16px 18px; box-shadow: 0 0 0 1px var(--color-neutral-800); }
.ins-card.is-ampia { padding: 18px 20px; }
.ins-card.is-spazio { margin-bottom: 12px; }
.ins-card.is-tabella { padding: 0; overflow: hidden; }

/* numero grande con il suo nome e la spiegazione */
.ins-kpi-nome { margin: 0 0 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tono, var(--color-accent)); }
.ins-griglia-tempo .ins-kpi-nome { margin-bottom: 10px; }
.ins-griglia-tattica .ins-kpi-nome, .ins-teoria .ins-kpi-nome { margin-bottom: 6px; }
.ins-griglia-esiti .ins-kpi-nome, .ins-griglia-larga .ins-kpi-nome, .ins-griglia-aperture .ins-kpi-nome { margin-bottom: 12px; }
.ins-kpi-valore { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
/* un valore col suo tono: verde se è meglio del confronto, rosso se è peggio, nel colore del testo in mezzo */
.ins-kpi-valore[data-tono] { color: var(--tono); }
.ins-kpi-valore[data-tono="neu"] { color: var(--color-text); }
.ins-kpi-valore.is-accento { color: var(--color-accent-400); }
.ins-griglia-tempo .ins-kpi-valore.is-con-righe { margin-bottom: 12px; }
.ins-unita { font-size: 16px; color: var(--color-neutral-600); font-weight: 400; }
.ins-kpi-testo { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-500); }
.ins-griglia-tattica .ins-kpi-testo { margin-top: 7px; }
.ins-griglia-tempo .ins-kpi-testo, .ins-griglia-esiti .ins-kpi-testo { margin-top: 10px; }
.ins-griglia-larga .ins-kpi-testo, .ins-griglia-aperture .ins-kpi-testo { margin-top: 11px; }
/* lo Stile di gioco: la scala in tre terzi, posizionale, universale e aggressivo, e il punto del giocatore. Nessuno stile
   è meglio di un altro: niente verde né rosso, solo il viola che cresce verso l'attacco */
.ins-stile-scala { position: relative; height: 8px; margin: 18px 7px 8px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ins-neu) 55%, transparent) 0 33.3%,
    color-mix(in srgb, var(--color-neutral-600) 80%, transparent) 33.3% 66.7%, color-mix(in srgb, var(--color-accent) 75%, transparent) 66.7%); }
.ins-stile-scala > i { position: absolute; top: 50%; left: var(--pct); width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--color-text); box-shadow: 0 0 0 3px var(--color-surface); }
.ins-stile-poli { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--color-neutral-500); }
/* lo Stile nel tempo: i tre terzi in fondo al grafico, tenui, e i loro nomi a destra al posto delle tacche */
.ins-stile-tempo { --h: 180px; }
.ins-grafico.is-stile { grid-template-columns: 16px 30px 1fr 74px; }
.ins-stile-fascia { fill: var(--tono); fill-opacity: .1; }
@media (max-width: 640px) {
  .ins-grafico.is-stile { grid-template-columns: 16px 26px 1fr 58px; column-gap: 6px; }
  .ins-grafico.is-stile .ins-tacche { font-size: 10px; }
  .ins-grafico.is-stile .ins-date > :nth-child(even) { display: none; }
}
/* testo in fondo a un riquadro, separato da un filo */
.ins-nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-500); border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); padding-top: 12px; }
.ins-nota.is-stretta { margin-top: 10px; }
/* dato del punto scelto in un grafico */
.ins-info { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-300); min-height: 19px; }

/* titolo di riquadro con la legenda o un'azione a destra */
.ins-card-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.ins-card-testa.is-base { align-items: baseline; gap: 12px; }
.ins-card-testa.is-centro { align-items: center; gap: 12px; }
.ins-card-testa.is-andamento { margin-bottom: 8px; }
.ins-card-testa.is-overview { margin-bottom: 10px; }
.ins-card-testa.is-debolezze { margin-bottom: 14px; }
.ins-card-testa.is-tempo-gioco { margin-bottom: 16px; }
.ins-card-testa.is-tempo-gioco .ins-opzioni { flex-wrap: nowrap; }
.ins-card-titolo { margin: 0; font-size: 15px; font-weight: 500; }
.ins-card-sotto { margin: 2px 0 0; font-size: 12.5px; color: var(--color-neutral-600); }
.ins-card-dato { margin: 0; font-size: 13px; color: var(--color-neutral-600); }
.ins-card-dato.is-accento { color: var(--color-accent-400); }
.ins-card-testo { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.ins-card-testo.is-solo { margin-bottom: 14px; }
/* il ? che apre nel centro assistenza la guida della sezione, nel punto giusto */
.ins-aiuto { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%; vertical-align: 2px;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--color-neutral-500);
  box-shadow: inset 0 0 0 1px var(--color-neutral-700); text-decoration: none; }
.ins-aiuto:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent); }
.ins-card-testo + .ins-card-sotto { margin: 0 0 14px; }
.ins-legenda { display: flex; gap: 14px; font-size: 11.5px; color: var(--color-neutral-500); padding-top: 4px; }
.ins-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.ins-legenda i { width: 14px; height: 2px; background: var(--color-accent); display: inline-block; }
.ins-legenda i.is-chiara { background: var(--color-neutral-300); }

/* ---------- grafici: titolo asse | tacche | grafico | tacche | titolo asse ---------- */
.ins-grafico { display: grid; grid-template-columns: 16px 36px 1fr 36px 16px; column-gap: 8px; margin-top: 10px; }
.ins-grafico.is-tre { grid-template-columns: 16px 36px 1fr; }
.ins-asse-titolo { grid-row: 1; display: flex; align-items: center; justify-content: center; }
.ins-asse-titolo > span { writing-mode: vertical-rl; font-size: 11px; color: var(--color-neutral-500); letter-spacing: .02em; }
.ins-asse-titolo.is-sinistra > span { transform: rotate(180deg); }
.ins-tacche { grid-row: 1; position: relative; height: var(--h); font-size: 11px; color: var(--color-neutral-600); }
.ins-tacche > span { position: absolute; right: 0; top: var(--y); transform: translateY(-50%); line-height: 1; }
.ins-tacche.is-destra > span { right: auto; left: 0; }
.ins-grafico-area { grid-row: 1; position: relative; height: var(--h); }
.ins-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ins-sess { --h: 190px; }
.ins-andamento { --h: 200px; }
.ins-dist { --h: 170px; }
.ins-svg-griglia { stroke: var(--color-neutral-800); }
.ins-svg-chiara { stroke: var(--color-neutral-300); }
.ins-svg-accento { stroke: var(--color-accent); }
.ins-svg-tenue { stroke: var(--color-neutral-500); }
.ins-stop { stop-color: var(--color-accent); stop-opacity: 0.28; }
.ins-stop.is-fine { stop-opacity: 0; }
.ins-stop.is-dist { stop-opacity: 0.22; }
.ins-stop.is-dist.is-fine { stop-opacity: 0.02; }
.ins-date { grid-row: 2; grid-column: 3; position: relative; height: 16px; margin-top: 8px; font-size: 11px; color: var(--color-neutral-600); }
.ins-date > span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.ins-asse-x { grid-row: 3; grid-column: 3; text-align: center; margin: 4px 0 4px; font-size: 11px; color: var(--color-neutral-500); letter-spacing: .02em; }
.ins-andamento .ins-asse-x { margin-bottom: 8px; }
/* linea verticale: la partita scelta, o dove sei tu */
.ins-guida { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--color-neutral-600); display: none; }
.ins-guida.is-on { display: block; }
.ins-guida.is-tu { width: 2px; margin-left: -1px; background: var(--color-accent); }
.ins-tu { position: absolute; top: -4px; left: var(--x); transform: translate(6px,0); font-size: 11px; color: var(--color-accent-400); white-space: nowrap; display: none; }
.ins-tu.is-on { display: block; }
/* un punto cliccabile del grafico, a --x/--y */
.ins-punto {
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; transform: translate(-50%,-50%);
  border-radius: 50%; padding: 0; cursor: pointer; background: var(--color-surface); border: 2px solid var(--c);
}
.ins-punto.is-tempo { --c: var(--color-neutral-300); }
.ins-punto.is-prec { --c: var(--color-accent); }
.ins-punto.is-attivo { width: 12px; height: 12px; background: var(--c); }
.ins-punto.is-incerto { opacity: .45; }
.ins-punto.is-dist { --c: transparent; width: 8px; height: 8px; background: var(--color-neutral-600); }
.ins-punto.is-dist.is-mia { background: var(--color-accent-400); }
.ins-punto.is-dist.is-attivo { width: 12px; height: 12px; background: var(--color-accent); border-color: var(--color-surface); }
.ins-grafico-area .ins-punto:hover { background: var(--color-accent-400); }
/* l'andamento si clicca tutto: sceglie il giorno più vicino, i pallini lo segnano */
.ins-grafico-area.is-cliccabile { cursor: pointer; }
.ins-grafico-area.is-cliccabile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }
.ins-grafico-area.is-cliccabile .ins-punto { pointer-events: none; }
.ins-punto.is-elo { --c: var(--color-accent); }
.ins-punto.is-chiaro { --c: var(--color-neutral-300); }
/* barre del periodo: due cursori sulla stessa traccia, acceso il tratto fra i due */
.ins-periodo { grid-row: 4; grid-column: 3; display: none; margin-bottom: 10px; }
.ins-periodo.is-on { display: block; }
.ins-periodo-barre { position: relative; height: 22px; }
.ins-periodo-barre::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--color-neutral-800) var(--da), var(--color-accent) var(--da) var(--a), var(--color-neutral-800) var(--a));
}
.ins-periodo-barre > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ins-periodo-barre > input.is-sopra { z-index: 1; }
.ins-periodo-barre > input::-webkit-slider-runnable-track { background: none; }
.ins-periodo-barre > input::-moz-range-track { background: none; }
.ins-periodo-barre > input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 8px; height: 22px; border-radius: 3px; background: var(--color-accent-400); cursor: ew-resize; }
.ins-periodo-barre > input::-moz-range-thumb { pointer-events: auto; width: 8px; height: 22px; border: 0; border-radius: 3px; background: var(--color-accent-400); cursor: ew-resize; }
.ins-periodo-barre > input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-text); outline-offset: 1px; }
.ins-periodo-barre > input:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-text); outline-offset: 1px; }
.ins-periodo-date { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--color-neutral-600); }
.ins-andamento-piede { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-neutral-600); border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); padding-top: 11px; margin-top: 4px; }
.ins-andamento-piede .is-accento { color: var(--color-accent-400); }

/* ---------- tabella dopo un risultato ---------- */
.ins-tab-riga { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 0 10px; padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); font-size: 14px; align-items: center; }
.ins-tab-riga.is-testa { align-items: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); padding: 11px 18px; border-bottom-color: color-mix(in srgb, var(--color-text) 12%, transparent); }
.ins-tab-riga > .is-num { text-align: right; color: var(--color-neutral-300); font-variant-numeric: tabular-nums; }
.ins-tab-riga.is-testa > .is-num { color: inherit; font-variant-numeric: normal; }
.ins-tab-nome { display: inline-flex; align-items: center; gap: 9px; color: var(--color-neutral-300); font-size: 13.5px; }
.ins-tab-nome > i { width: 6px; height: 6px; border-radius: 999px; background: var(--ins-neu); display: inline-block; }
[data-chiave="vittoria"] .ins-tab-nome > i { background: var(--ins-pos); }
[data-chiave="sconfitta"] .ins-tab-nome > i { background: var(--ins-neg); }
/* la precisione dopo un risultato: verde o rossa contro la media abituale */
.ins-tab-riga > .is-prec:not([data-tono="neu"]) { color: var(--tono); }
.ins-tab-nota { margin: 0; padding: 13px 18px; font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-500); }

/* ---------- barre ---------- */
.ins-barra { height: 6px; border-radius: 999px; background: var(--color-neutral-900); overflow: hidden; }
.ins-barra > div { height: 100%; width: var(--pct); background: var(--tono); border-radius: 999px; }
/* allocazione del pensiero */
.ins-voce { margin-bottom: 9px; }
.ins-voce-testa { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-neutral-300); margin-bottom: 4px; }
.ins-voce-testa > .is-valore { color: var(--tono); font-variant-numeric: tabular-nums; }
[data-cat] { --tono: var(--color-neutral-600); }
[data-cat="critiche"] { --tono: var(--color-accent); }
[data-cat="forzate"] { --tono: var(--ins-warn); }
[data-cat="teoria"] { --tono: var(--ins-mid); }
/* zeitnot */
/* zeitnot: nome, barra e precisione sopra; sotto gli errori gravi e la precisione della fascia. Precisione ed errori
   verdi o rossi contro la riga con più di 30 secondi */
.ins-zeit { display: grid; grid-template-columns: 96px minmax(0, 1fr) 84px; gap: 3px 12px; align-items: center; margin-bottom: 12px; }
.ins-zeit-nome { font-size: 12.5px; color: var(--color-neutral-300); }
.ins-zeit-barra { height: 22px; border-radius: 6px; background: var(--color-neutral-900); overflow: hidden; position: relative; }
.ins-zeit-barra > div { height: 100%; width: var(--pct); background: var(--ins-neg); opacity: .85; }
[data-chiave="normale"] .ins-zeit-barra > div { background: var(--color-accent); }
[data-chiave="sotto30"] .ins-zeit-barra > div { background: var(--ins-mid); }
.ins-zeit-prec { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--color-text); }
.ins-zeit-err { grid-column: 2; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--color-neutral-500); }
.ins-zeit-prec:not([data-tono="neu"]), .ins-zeit-err:not([data-tono="neu"]) { color: var(--tono); }

/* ---------- debolezze e chi era al tuo posto ---------- */
.ins-bottone-bordo { font-size: 13px; font-weight: 500; padding: 5px 13px; border-radius: 8px; border: 1px solid var(--color-accent); color: var(--color-accent); }
.ins-bottone-bordo:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.ins-debolezza { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ins-debolezza-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.ins-debolezza-nome { font-size: 14px; color: var(--color-text); }
.ins-debolezza-conti { font-size: 12px; color: var(--color-neutral-600); }
.ins-debolezza-riga { display: flex; align-items: center; gap: 12px; }
.ins-debolezza-riga > .ins-barra { flex: 1; height: 8px; }
.ins-debolezza-esito { flex: 0 0 140px; text-align: right; font-size: 12.5px; color: var(--tono); }
.ins-coetanei { background: linear-gradient(180deg, var(--color-section), var(--color-accent-900)); border-radius: 14px; box-shadow: 0 0 0 1px var(--color-section-glow); padding: 20px; }
.ins-coetanei .ins-kpi-nome { margin-bottom: 4px; color: var(--color-accent-400); }
.ins-coetanei-titolo { margin: 0 0 14px; font-size: 15px; font-weight: 500; }
.ins-coetaneo { background: color-mix(in srgb, var(--color-bg) 45%, transparent); border-radius: 10px; padding: 14px 15px; }
.ins-coetaneo-nome { margin: 0 0 6px; font-size: 13.5px; color: var(--color-text); }
.ins-coetaneo-azione { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-300); }
.ins-coetaneo-esito { margin: 0; font-size: 12px; color: var(--color-accent-400); }

/* ---------- bilancio per colore ---------- */
.ins-bilancio { margin-top: 12px; }
.ins-bilancio-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-neutral-500); margin-bottom: 6px; }
.ins-bilancio-colore { display: inline-flex; align-items: center; gap: 8px; color: var(--color-neutral-300); }
.ins-bilancio-colore > i { width: 12px; height: 12px; border-radius: 3px; background: #2b2d3a; box-shadow: inset 0 0 0 1px var(--color-neutral-600); display: inline-block; }
.ins-bilancio-colore.is-bianco > i { background: #e8e6df; }
.ins-bilancio-barra { display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; }
.ins-bilancio-barra > div { flex: var(--n); display: flex; align-items: center; justify-content: center; font-size: 12.5px; }
.ins-bilancio-barra > div.is-vuoto { display: none; }
.ins-bilancio-barra > .is-v { background: rgba(134,217,180,.28); box-shadow: inset 0 0 0 1px rgba(134,217,180,.5); color: #86d9b4; }
.ins-bilancio-barra > .is-p { background: rgba(178,182,202,.2); box-shadow: inset 0 0 0 1px rgba(178,182,202,.4); color: #b2b6ca; }
.ins-bilancio-barra > .is-s { background: rgba(224,139,139,.24); box-shadow: inset 0 0 0 1px rgba(224,139,139,.45); color: #e08b8b; }
.ins-bilancio-barra > .is-nessuna { flex: 1; background: var(--color-neutral-900); color: var(--color-neutral-600); }

/* ---------- game result, aperture, finali, qualita', pezzi ---------- */
/* quanto è affidabile un dato: tre tacche come quelle del segnale, piene secondo il livello; senza il dato restano
   nascoste ma tengono il posto, così le colonne non si spostano */
/* la tendenza: le ultime partite contro quelle di prima, una freccia nel colore di quello che vuol dire; senza, non c'è. Nelle
   righe ha una colonna sua, anche vuota, così le altre restano in fila */
.ins-tend { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--tono); white-space: nowrap;
  font-variant-numeric: tabular-nums; vertical-align: middle; cursor: help; }
.ins-tend:empty { display: none; }
.ins-tend.is-colonna, .ins-tend.is-colonna:empty { display: block; flex: 0 0 44px; margin-left: 0; text-align: right; }
.ins-affid { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; flex: none; margin-left: 6px; vertical-align: -1px; cursor: help; }
.ins-affid > i { width: 3px; border-radius: 1px; background: var(--color-neutral-800); }
.ins-affid > i:nth-child(1) { height: 40%; }
.ins-affid > i:nth-child(2) { height: 70%; }
.ins-affid > i:nth-child(3) { height: 100%; }
.ins-affid[data-livello="alta"] > i { background: var(--ins-pos); }
.ins-affid[data-livello="media"] > i:nth-child(-n+2) { background: var(--ins-mid); }
.ins-affid[data-livello="bassa"] > i:nth-child(1) { background: var(--ins-neg); }
.ins-affid[data-livello="nessuno"] { visibility: hidden; }
.ins-intro .ins-affid { margin: 0 3px 0 1px; cursor: default; }
.ins-bilancio-colore > .ins-affid, .ins-apertura > .ins-affid, .ins-pezzo > .ins-affid, .ins-qualita > .ins-affid, .ins-finale-testa > .ins-affid { margin-left: 0; }
.ins-esito-voce { margin-bottom: 10px; }
.ins-esito-voce .ins-voce-testa { font-size: 12.5px; }
.ins-esito-voce .ins-voce-testa > .is-valore { color: var(--color-text); }
.ins-esito-voce .ins-barra { height: 5px; }
.ins-esito-voce .ins-barra > div { opacity: .8; }
.ins-teoria { margin-bottom: 12px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.ins-teoria-filo { width: 1px; height: 44px; background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.ins-teoria-testo { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-500); }
/* le tre fasi divise da un filo, col valore nel colore della precisione */
.ins-fase + .ins-fase { padding-left: 24px; border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.ins-card-testa.is-aperture { justify-content: flex-start; margin-bottom: 6px; }
.ins-card-testa.is-aperture .is-ordine { margin-left: auto; }
.ins-card-sotto.is-aperture { margin: 0 0 10px; }
.ins-card-testa.is-aperture .ins-kpi-nome { margin: 0; }
/* barra sottile color accento, staccata dalle righe; Firefox usa le proprietà standard */
.ins-aperture { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-accent) 55%, transparent) transparent; }
@supports selector(::-webkit-scrollbar) { .ins-aperture { scrollbar-width: auto; scrollbar-color: auto; } }
.ins-aperture::-webkit-scrollbar { width: 4px; }
.ins-aperture::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ins-aperture::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-text) 5%, transparent); border-radius: 999px; }
.ins-aperture::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-accent) 55%, transparent); border-radius: 999px; }
.ins-aperture::-webkit-scrollbar-thumb:hover { background: var(--color-accent-400); }
.ins-apertura { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); cursor: pointer; }
/* larga quanto un intervallo (B00–C40), così i nomi partono tutti dallo stesso punto */
.ins-apertura-eco { flex: 0 0 54px; white-space: nowrap; font-size: 11px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.ins-apertura-nome { flex: 1; min-width: 0; font-size: 13px; color: var(--color-neutral-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il numero di partite con le tacche dell'affidabilità degli esiti */
.ins-apertura-partite { flex: 0 0 56px; text-align: right; white-space: nowrap; font-size: 12px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
/* vinte, pareggi e perse: tre numeri colorati, ognuno in un terzo della colonna così restano in fila */
.ins-apertura-esiti { flex: 0 0 96px; display: flex; padding-left: 10px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-apertura-esiti > span { flex: 1; }
.ins-apertura-esiti > .is-v { color: var(--ins-pos); }
.ins-apertura-esiti > .is-p { color: var(--ins-neu); }
.ins-apertura-esiti > .is-s { color: var(--ins-neg); }
.ins-apertura-esiti > .is-zero { color: var(--color-neutral-700); }
/* l'intestazione delle colonne, ferma in cima alla lista */
.ins-apertura.is-testa { position: sticky; top: 0; z-index: 1; background: var(--color-surface); cursor: default; border-top: 0;
  padding: 0 0 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-apertura.is-testa > * { font-size: inherit; color: inherit; cursor: help; }
.ins-apertura-prec { flex: 0 0 72px; text-align: right; white-space: nowrap; font-size: 12px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
/* contro avversari più forti, pari e più deboli: una riga per fascia, con le colonne delle aperture */
.ins-forza { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); }
.ins-forza.is-testa { border-top: 0; padding: 0 0 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-forza.is-testa > * { font-size: inherit; color: inherit; cursor: help; }
.ins-forza-nome { flex: 1; min-width: 0; font-size: 13px; color: var(--color-neutral-300); }
.ins-forza-nome > small { display: block; font-size: 11px; color: var(--color-neutral-600); }
.ins-forza-scarto { flex: 0 0 90px; text-align: right; font-size: 13px; color: var(--tono); font-variant-numeric: tabular-nums; }
/* sul telefono restano nome, partite ed esiti, e le fasi vanno una sotto l'altra senza il filo */
@media (max-width: 640px) {
  .ins-apertura-eco, .ins-apertura-prec { display: none; }
  .ins-fase + .ins-fase { padding-left: 0; border-left: 0; }
  .ins-forza .ins-apertura-partite { flex-basis: 48px; }
  .ins-forza .ins-apertura-esiti { flex-basis: 84px; }
  .ins-forza-scarto { flex-basis: 72px; }
  .ins-forza-nome > small { display: none; }
  .ins-card-testa.is-tempo-gioco .ins-opzioni { flex-wrap: wrap; }
  .ins-tend.is-colonna, .ins-tend.is-colonna:empty { display: none; }
  /* dopo un risultato: il nome su una riga sua, i numeri sotto */
  .ins-tab-riga { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 6px; padding: 12px 14px; }
  .ins-tab-riga > :first-child { grid-column: 1 / -1; }
  .ins-tab-riga.is-testa > :first-child { display: none; }
  .ins-tab-riga.is-testa { font-size: 9.5px; letter-spacing: .03em; }
}
.ins-valore { flex: 0 0 46px; text-align: right; font-size: 13px; color: var(--tono); font-variant-numeric: tabular-nums; }
.ins-finale { padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent); }
.ins-finale-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ins-finale-nome { flex: 1; font-size: 13px; color: var(--color-neutral-300); }
.ins-finale-testa > .ins-valore { flex: initial; text-align: initial; }
.ins-finale-dati { margin: 3px 0 0; font-size: 11.5px; color: var(--color-neutral-600); }
[data-qualita] { --tono: var(--ins-neu); }
[data-qualita="brillante"] { --tono: #7fd1c1; }
[data-qualita="best"] { --tono: var(--color-accent); }
[data-qualita="excellent"] { --tono: var(--color-neutral-400); }
[data-qualita="good"] { --tono: var(--color-neutral-600); }
[data-qualita="inaccuracy"] { --tono: var(--ins-mid); }
[data-qualita="mistake"] { --tono: var(--ins-warn); }
[data-qualita="blunder"] { --tono: var(--ins-neg); }
.ins-qualita-barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.ins-qualita-barra > div { flex: var(--n); background: var(--tono); opacity: .85; }
.ins-qualita { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.ins-qualita > i { width: 8px; height: 8px; border-radius: 2px; background: var(--tono); display: inline-block; flex: none; }
.ins-qualita-nome { flex: 1; color: var(--color-neutral-300); }
.ins-qualita-mosse { color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.ins-qualita-prec { flex: 0 0 84px; text-align: right; font-size: 12px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.ins-qualita-pct { flex: 0 0 46px; text-align: right; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ins-pezzo { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.ins-pezzo-simbolo { flex: 0 0 22px; font-size: 19px; line-height: 1; color: var(--color-neutral-300); }
.ins-pezzo-nome { flex: 0 0 62px; font-size: 13px; color: var(--color-neutral-300); }
.ins-pezzo > .ins-barra { flex: 1; height: 7px; }
.ins-pezzo > .ins-valore { flex: 0 0 42px; }

/* ---------- tempo di gioco ---------- */
.ins-ore { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-bottom: 8px; }
.ins-ora { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.ins-ora > div { height: var(--h); background: color-mix(in srgb, var(--color-accent) 42%, transparent); border-radius: 5px 5px 2px 2px; min-height: 3px; }
.ins-ora.is-picco > div { background: var(--color-accent); }
.ins-ora > span { font-size: 10.5px; color: var(--color-neutral-600); text-align: center; }
.ins-nota.is-tempo-gioco { margin-top: 10px; }
.ins-forza.is-staccata { margin-top: 14px; }

/* ---------- storico ---------- */
.ins-filtri-storico { margin-bottom: 14px; }
.ins-filtro-riga { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ins-filtro-nome { flex: 0 0 74px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-filtro-spazio { height: 4px; }
.ins-selettori { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ins-selettore { display: flex; flex-direction: column; gap: 5px; }
.ins-selettore > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-selettore > select { width: 100%; min-height: 36px; padding: 6px 10px; font-size: 13.5px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-neutral-800); border-radius: 8px; }
.ins-selettore > input[type=range] { width: 100%; accent-color: var(--color-accent); height: 36px; }
.ins-conteggio { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12.5px; color: var(--color-neutral-600); }
.ins-azzera { appearance: none; background: transparent; border: 0; color: var(--color-accent); font-size: 12.5px; cursor: pointer; padding: 0; }
.ins-partite { display: flex; flex-direction: column; gap: 8px; }
.ins-partita { background: var(--color-surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--color-neutral-800); padding: 13px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ins-partita:hover { box-shadow: 0 0 0 1px var(--color-neutral-700); }
.ins-esito { flex: none; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; color: var(--tono); }
/* fondo: la tinta dell'esito con trasparenza 0x22 */
.ins-esito[data-tono="pos"] { background: #86d9b422; }
.ins-esito[data-tono="neg"] { background: #e08b8b22; }
.ins-esito[data-tono="neu"] { background: #b2b6ca22; }
.ins-partita-chi { flex: 1 1 190px; min-width: 0; }
.ins-partita-avversario { margin: 0; font-size: 13.5px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-partita-meta { margin: 2px 0 0; font-size: 11.5px; color: var(--color-neutral-600); }
.ins-partita-numeri { flex: 0 0 auto; text-align: right; }
.ins-partita-prec { margin: 0; font-size: 13px; color: var(--color-neutral-300); font-variant-numeric: tabular-nums; }
.ins-partita-delta { margin: 2px 0 0; font-size: 11.5px; color: var(--tono); font-variant-numeric: tabular-nums; }
.ins-partita-analisi { flex: none; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--color-neutral-800); color: var(--color-neutral-300); }
.ins-partita-analisi:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- coach ---------- */
.ins-coach { flex: 1 1 300px; max-width: 360px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; margin-right: calc(-1 * max(0px, (100vw - 1240px) / 2 + 4px)); }
.ins-coach-box { position: sticky; bottom: 20px; background: var(--color-surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--color-neutral-800), var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.ins-coach-testa { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.ins-coach-luce { width: 7px; height: 7px; border-radius: 999px; background: var(--color-accent); display: block; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent); flex: none; }
.ins-coach-nome { margin: 0; font-size: 14px; font-weight: 500; flex: 1; }
.ins-coach-nota { font-size: 11px; color: var(--color-neutral-600); }
.ins-coach-apri { appearance: none; cursor: pointer; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-300); font-size: 13px; line-height: 1; }
.ins-coach-apri:hover, .ins-coach-domanda:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ins-coach-corpo { display: flex; flex-direction: column; min-height: 0; }
.ins-coach-messaggi { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: min(46vh, 340px); }
/* bolla del coach a sinistra, dell'utente a destra */
.ins-bolla { max-width: 88%; align-self: flex-start; background: var(--color-neutral-900); color: var(--color-neutral-300); border-radius: 10px 10px 10px 3px; padding: 10px 13px; font-size: 13px; line-height: 1.55; }
.ins-bolla.is-utente { align-self: flex-end; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-text); border-radius: 10px 10px 3px 10px; }
.ins-bolla.is-errore { color: var(--ins-neg); }
.ins-bolla.is-attesa { font-style: italic; color: var(--color-neutral-500); }
.ins-coach-domanda:disabled, .ins-coach-invia:disabled { opacity: .5; cursor: default; }
.ins-coach-domande { padding: 0 16px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.ins-coach-domanda { appearance: none; cursor: pointer; font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-300); }
.ins-coach-scrivi { padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); display: flex; gap: 8px; }
.ins-coach-campo { flex: 1; min-width: 0; min-height: 36px; padding: 6px 11px; font-size: 13px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-neutral-800); border-radius: 8px; }
.ins-coach-invia { appearance: none; cursor: pointer; flex: none; min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); }
.ins-coach-invia:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* fascia "caricamento / errore + Riprova", fissa in basso */
.ins-stato {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-neutral-800), 0 8px 24px rgba(0,0,0,.35);
}
.ins-stato-riprova { border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

/* ---------- Migliora: la settimana, l'obiettivo e dove perdi punti ---------- */
.ins-griglia-punti { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ins-voce-punti { display: flex; flex-direction: column; }
.ins-voce-punti > .ins-kpi-testo { flex: 1; }
.ins-voce-confronto { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-400); }
.ins-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ins-bottone-piano { appearance: none; font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-neutral-800); background: transparent; color: var(--color-neutral-400); }
.ins-bottone-piano:hover { color: var(--color-text); border-color: var(--color-neutral-600); }
.ins-bottone-piano.is-scelto { border-color: var(--color-accent); color: var(--color-accent); cursor: default; }
.ins-bottone-piano.is-piccolo { font-size: 12px; padding: 3px 8px; }
.ins-sett-riga { display: grid; grid-template-columns: minmax(110px, 1.2fr) 1fr 1fr; gap: 12px; padding: 9px 0; font-size: 13.5px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ins-sett-riga.is-testa { border-top: 0; padding-top: 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-sett-nome { color: var(--color-neutral-400); }
.ins-sett-ora { color: var(--tono, var(--color-text)); font-variant-numeric: tabular-nums; }
.ins-sett-ora[data-tono="neu"] { color: var(--color-text); }
.ins-sett-prima { color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.ins-obiettivo-confronto { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 14px; }
.ins-obiettivo-confronto .ins-etichetta { display: block; margin-bottom: 7px; }
.ins-kpi-testo.is-primo { margin-top: 0; }
/* il piano dell'obiettivo: una riga per esercizio, col pulsante a destra; verde quando è fatto */
.ins-piano { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ins-piano-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.ins-piano-riga > .ins-voce-testa, .ins-piano-riga > .ins-barra { grid-column: 1; }
.ins-piano-riga > a { grid-column: 2; grid-row: 1 / span 2; }
.ins-piano-riga .ins-voce-testa { gap: 12px; font-size: 13.5px; }
.ins-piano-riga .is-valore { white-space: nowrap; color: var(--color-neutral-400); }
.ins-piano-riga { --tono: var(--color-accent); }
.ins-piano-riga.is-fatto .ins-barra > div { background: var(--ins-pos); }
.ins-etichetta.is-risultato { display: block; margin-top: 20px; }
/* Rigioca i tuoi errori: per gravità, un collegamento, quante restano e quante sono corrette senza e con un aiuto */
.ins-rigioca-riga { display: grid; grid-template-columns: minmax(96px, 1.2fr) repeat(3, 1fr); gap: 10px; align-items: baseline; max-width: 620px;
  padding: 8px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--color-neutral-300);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ins-rigioca-riga.is-testa { margin-top: 12px; border-top: 0; padding-top: 0; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-neutral-600); }
.ins-rigioca-riga a { color: var(--color-neutral-300); text-decoration: none; }
.ins-rigioca-riga a:hover { color: var(--color-accent); }
.ins-rigioca-riga b { color: var(--color-text); font-weight: 600; }
.ins-tutte-riga { display: grid; grid-template-columns: minmax(0, 2.4fr) .8fr .8fr 140px; gap: 10px; align-items: center; padding: 8px 0;
  font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.ins-tutte-riga.is-testa { margin-top: 12px; border-top: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.ins-tutte-riga .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ins-tutte-riga .is-num[data-tono] { color: var(--tono); }
.ins-tutte-riga .is-num[data-tono="neu"] { color: var(--color-neutral-400); }
@media (max-width: 560px) {
  .ins-tutte-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .ins-tutte-riga > :nth-child(3), .ins-tutte-riga > :nth-child(4) { display: none; }
  .ins-sett-riga { grid-template-columns: minmax(90px, 1fr) 1fr 1fr; gap: 8px; font-size: 12.5px; }
  .ins-rigioca-riga { grid-template-columns: minmax(84px, 1.1fr) repeat(3, 1fr); gap: 8px; font-size: 12.5px; }
}
/* le sezioni a cui portano i collegamenti di Migliora restano sotto le schede, che stanno in cima */
[id^="ins-"] { scroll-margin-top: 112px; }
/* la fascia: il valore dei giocatori del proprio livello accanto a un numero, in grigio */
.ins-fascia { display: block; margin-top: 4px; font-size: 11.5px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.ins-fascia:empty { display: none; }
.ins-fascia.is-riga { display: inline; margin: 0 0 0 8px; }
.ins-fascia.is-colonna { display: inline; flex: 0 0 76px; margin: 0; text-align: right; }
.ins-zeit .ins-fascia.is-riga { margin: 0; text-align: right; }
.ins-fascia-nota { margin: 0 0 -8px; font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-500); max-width: 72ch; }
.ins-conversione { margin-top: 12px; }
.ins-conversione .ins-esito-voce { margin-top: 12px; }
@media (max-width: 640px) {
  .ins-fascia.is-colonna, .ins-zeit .ins-fascia.is-riga { display: none; }
  .ins-zeit { grid-template-columns: 84px minmax(0, 1fr) 48px; }
}