/* =============================================================
   bestrussiancasinos.com — tema del sito informativo in russo.
   Si carica dopo caratteri.css:
       <link href="/css/caratteri.css?v=20261011" rel="stylesheet">
       <link href="/css/tema-ru.css?v=20261011" rel="stylesheet">

   Tre regole che governano tutto il foglio:
   1. il colore porta un significato solo — il viola e' la struttura, il
      vermiglio dice «vietato», il verde dice «autorizzato»; nessun colore
      decora e basta;
   2. due caratteri dividono il lavoro per tipo di informazione, non per
      ornamento — PT Serif legge, Golos Text conta;
   3. niente schede: una tabella e' una tabella perche' sono dati, la legge
      e' prosa perche' e' prosa.

   Le classi .ed-article, .ed-legal, .ed-faq e .ed-nota sono quelle che
   misura_voce.py riconosce: la prosa dell'autore sta in .ed-article, le
   citazioni di legge in .ed-legal e le domande in .ed-faq, cosi' che la
   misura della voce prenda il testo scritto e non quello citato.
   ============================================================= */

:root {
  /* inchiostro e carta */
  --ink: #241E4E;          /* testo corrente: violaceo, non un nero virato */
  --znak: #3B2F7A;         /* il viola del marchio, struttura e titoli */
  --stamp: #5B4FA0;        /* viola chiaro: filetti, secondario */
  --muted: #5E5878;        /* testo di servizio */
  --paper: #FCFCFD;
  --band: #EFEDF6;         /* fascia violacea per tabelle e riquadri */
  --linea: #D8D3E8;

  /* i due soli colori semantici */
  --zapret: #9E2B1E;       /* vietato */
  --zapret-fon: #FBF0EE;
  --razresh: #1C5742;      /* autorizzato */
  --razresh-fon: #ECF3F0;

  /* misure */
  --misura: 34rem;         /* ~66 segni cirillici per riga */
  --largo: 58rem;
  --gutter: 1rem;

  /* scala tipografica, base 19px */
  --t-xs: 0.78rem;
  --t-s: 0.88rem;
  --t-m: 1.2rem;
  --t-l: 1.5rem;
  --t-xl: 2rem;
  --t-2xl: clamp(1.82rem, 5.2vw, 3.2rem);
  --t-cifra: clamp(2.6rem, 7vw, 4.2rem);

  --serif: 'PT Serif', 'Times New Roman', Times, serif;
  --grot: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetlaya"]) {
    --ink: #E6E3F2;
    --znak: #BFB4EE;
    --stamp: #9A8ED6;
    --muted: #A49CC4;
    --paper: #16132B;
    --band: #211D3F;
    --linea: #342E5C;
    --zapret: #F0938A;
    --zapret-fon: #2E1B1B;
    --razresh: #7FC9AC;
    --razresh-fon: #142A24;
  }
}
:root[data-tema="temnaya"] {
  --ink: #E6E3F2;
  --znak: #BFB4EE;
  --stamp: #9A8ED6;
  --muted: #A49CC4;
  --paper: #16132B;
  --band: #211D3F;
  --linea: #342E5C;
  --zapret: #F0938A;
  --zapret-fon: #2E1B1B;
  --razresh: #7FC9AC;
  --razresh-fon: #142A24;
}

/* ------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.62 var(--serif);
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

@media (max-width: 40rem) { body { font-size: 17.5px; } }

a { color: var(--znak); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--stamp); }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; border-radius: 2px; }

img, svg { max-width: 100%; height: auto; }

/* il russo ha parole lunghe: senza sillabazione «конфиденциальности» sfora a 320 px */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--znak); line-height: 1.22; margin: 0 0 0.5em;
  overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.012em; color: var(--ink); }
h2 { font-size: var(--t-xl); margin-top: 2.1em; }
h3 { font-size: var(--t-m); margin-top: 1.8em; color: var(--ink); }
h2 + h3 { margin-top: 1em; }

p { margin: 0 0 1.05em; }

/* ------------------------------------------------------------- impaginato */

.obolochka { max-width: var(--largo); margin: 0 auto; padding: 0 var(--gutter); }
.uzkaya { max-width: var(--misura); }
.ed-article { max-width: var(--misura); }
.ed-article > p + h2,
.ed-article > p + h3 { margin-top: 2em; }

/* ------------------------------------------------------------- testata */

.shapka {
  border-bottom: 2px solid var(--znak);
  background: var(--paper);
}
.shapka__ryad {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0.8rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.marka__znak { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
.marka__slovo {
  font-family: var(--grot);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.marka__slovo span { display: block; font-weight: 400; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.01em; }

.navigaciya { margin-left: auto; }
.navigaciya ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: 0; padding: 0; }
.navigaciya a {
  font-family: var(--grot);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.navigaciya a:hover,
.navigaciya a[aria-current="page"] { border-bottom-color: var(--znak); color: var(--znak); }

/* ------------------------------------------------------------- apertura */

.vvod { padding: 3.2rem 0 0; }
.vvod h1 { max-width: 20ch; margin-bottom: 0.45em; }
.vvod__norma {
  font-family: var(--grot);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--muted);
  padding-top: 0.7rem;
  border-top: 2px solid var(--znak);
}
.vvod__vvedenie { max-width: var(--misura); margin-top: 1.6rem; }

/* il paio verdetto: vietato a sinistra, l'eccezione a destra */
/* Le due colonne hanno ciascuna la propria altezza: la colonna dei divieti e'
   piu' lunga di quella delle eccezioni, e questo e' il contenuto, non un caso. */
.verdikt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1.5rem;
  margin: 2.4rem 0 0;
}
@media (max-width: 38rem) { .verdikt { grid-template-columns: 1fr; } }
.verdikt__stolb { padding: 1.2rem 1.25rem 1.3rem; border: 1px solid var(--linea); }
.verdikt__stolb--net { background: var(--zapret-fon); border-color: var(--zapret); }
.verdikt__stolb--da { background: var(--razresh-fon); border-color: var(--razresh); }
.verdikt__shapka {
  font-family: var(--grot);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.8rem;
}
.verdikt__stolb--net .verdikt__shapka { color: var(--zapret); }
.verdikt__stolb--da .verdikt__shapka { color: var(--razresh); }
.verdikt ul { list-style: none; margin: 0; padding: 0; font-family: var(--grot); font-size: 0.95rem; }
.verdikt li { padding: 0.34rem 0; border-bottom: 1px solid rgba(94, 88, 120, 0.22); }
.verdikt li:last-child { border-bottom: 0; }
.verdikt__snoska { font-family: var(--grot); font-size: var(--t-xs); color: var(--muted); margin: 0.9rem 0 0; line-height: 1.45; }

/* le due cifre */
.cifry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.8rem 2.6rem;
  margin: 2.8rem 0 0;
  padding: 1.7rem 0 0;
  border-top: 2px solid var(--znak);
}
.cifra__znachenie {
  font-family: var(--grot);
  font-weight: 600;
  font-size: var(--t-cifra);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--znak);
  display: block;
}
.cifra__podpis {
  font-family: var(--grot);
  font-size: var(--t-s);
  color: var(--ink);
  display: block;
  margin-top: 0.55rem;
  max-width: 24ch;
  line-height: 1.4;
}
.cifra__istochnik { font-size: var(--t-xs); color: var(--muted); display: block; margin-top: 0.3rem; }

/* ------------------------------------------------------------- corpo */

.razdel { padding: 3.4rem 0; }
.razdel + .razdel { padding-top: 0; }
/* dopo l'apertura il respiro c'e' gia': il blocco non lo raddoppia */
.vvod + .razdel { padding-top: 2.2rem; }
.vvod:has(.verdikt) + .razdel,
.vvod:has(.cifry) + .razdel { padding-top: 3.4rem; }
.razdel--fon { background: var(--band); margin-top: 3.4rem; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

/* citazione di legge: non e' prosa dell'autore, e la misura della voce la salta */
.ed-legal {
  font-family: var(--grot);
  font-size: var(--t-s);
  line-height: 1.5;
  background: var(--band);
  border-left: 3px solid var(--znak);
  padding: 1rem 1.15rem;
  margin: 1.8rem 0;
  max-width: var(--misura);
}
.ed-legal p { margin: 0 0 0.6em; }
.ed-legal p:last-child { margin-bottom: 0; }
.ed-legal cite { display: block; font-style: normal; color: var(--muted); font-size: var(--t-xs); margin-top: 0.5rem; }
.ed-legal q { quotes: "«" "»" "„" "“"; }

/* nota di servizio */
.ed-nota {
  font-family: var(--grot);
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.5;
  max-width: var(--misura);
  margin: 1.4rem 0;
}

/* ------------------------------------------------------------- registro */

.reestr-obertka { overflow-x: auto; margin: 1.8rem 0; }
table.reestr {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--grot);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}
table.reestr caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--muted);
  padding-bottom: 0.6rem;
  line-height: 1.5;
}
table.reestr th, table.reestr td { text-align: left; padding: 0.52rem 0.7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.reestr thead th { border-bottom: 2px solid var(--znak); font-weight: 600; color: var(--znak); white-space: nowrap; }
table.reestr td:first-child { color: var(--muted); width: 2.4rem; }
table.reestr tbody tr:nth-child(even) { background: var(--band); }
table.reestr a { word-break: break-word; }

/* ------------------------------------------------------------- domande */

.ed-faq { max-width: var(--misura); margin: 2rem 0 0; }
.ed-faq details { border-bottom: 1px solid var(--linea); }
.ed-faq summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font-family: var(--grot);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::before {
  content: "+";
  font-family: var(--grot);
  color: var(--stamp);
  font-weight: 600;
  flex: 0 0 auto;
}
.ed-faq details[open] summary::before { content: "\2212"; }
.ed-faq details > div { padding: 0 0 1rem 1.4rem; font-size: 0.95rem; }
.ed-faq details > div p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- aiuto */

.pomoshch { max-width: var(--largo); }
.pomoshch__spisok { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.pomoshch__spisok li { background: var(--paper); padding: 1rem 1.15rem; }
.pomoshch__imya { font-family: var(--grot); font-weight: 600; display: block; }
.pomoshch__kontakt { font-family: var(--grot); font-size: 1.15rem; font-weight: 600; color: var(--znak); display: block; margin: 0.3rem 0; font-variant-numeric: tabular-nums; }
.pomoshch__opisanie { font-family: var(--grot); font-size: var(--t-s); color: var(--muted); display: block; line-height: 1.45; }

/* ------------------------------------------------------------- collegamenti in fondo alla pagina */

.dalshe { border-top: 2px solid var(--znak); margin-top: 3.4rem; padding-top: 1.6rem; }
.dalshe h2 { margin-top: 0; font-size: var(--t-l); }
.dalshe ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.7rem 2rem; }
.dalshe li { border-top: 1px solid var(--linea); padding-top: 0.55rem; }
.dalshe a { font-family: var(--grot); font-size: 0.96rem; font-weight: 500; text-decoration: none; }
.dalshe a:hover { text-decoration: underline; }
.dalshe span { display: block; font-family: var(--grot); font-size: var(--t-xs); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }

/* ------------------------------------------------------------- firma e piede */

.podpis {
  font-family: var(--grot);
  font-size: var(--t-xs);
  color: var(--muted);
  border-top: 1px solid var(--linea);
  margin-top: 2.6rem;
  padding-top: 0.9rem;
  max-width: var(--misura);
}

.podval {
  border-top: 2px solid var(--znak);
  background: var(--band);
  margin-top: 3.6rem;
  padding: 2.4rem 0 2.8rem;
  font-family: var(--grot);
  font-size: var(--t-s);
  line-height: 1.55;
}
.podval__setka { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.8rem 2.4rem; }
.podval h2 { font-family: var(--grot); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.7rem; }
.podval ul { list-style: none; margin: 0; padding: 0; }
.podval li { padding: 0.17rem 0; }
.podval a { color: var(--ink); text-decoration: none; }
.podval a:hover { color: var(--znak); text-decoration: underline; }
.podval__otvet { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--linea); color: var(--muted); max-width: 52rem; }
.vozrast {
  display: inline-block;
  font-weight: 700;
  color: var(--zapret);
  border: 2px solid var(--zapret);
  border-radius: 50%;
  width: 2.3rem; height: 2.3rem;
  line-height: 2rem;
  text-align: center;
  font-size: var(--t-s);
  margin-right: 0.6rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------- consenso */

.soglasie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 2px solid var(--znak);
  padding: 1.1rem var(--gutter) 1.2rem;
  font-family: var(--grot);
  font-size: var(--t-s);
  line-height: 1.5;
  box-shadow: 0 -6px 24px rgba(36, 30, 78, 0.13);
}
.soglasie[hidden] { display: none; }
.soglasie__ryad { max-width: var(--largo); margin: 0 auto; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.soglasie p { margin: 0; flex: 1 1 22rem; }
.knopka {
  font-family: var(--grot);
  font-size: var(--t-s);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--znak);
  background: var(--znak);
  color: #FFFFFF;
  cursor: pointer;
  border-radius: 3px;
}
.knopka--tihaya { background: transparent; color: var(--znak); }
.knopka:hover { background: var(--stamp); border-color: var(--stamp); color: #FFFFFF; }

/* ------------------------------------------------------------- servizio */

.skip {
  position: absolute; left: -9999px;
  background: var(--znak); color: #fff; padding: 0.7rem 1rem;
  font-family: var(--grot); font-size: var(--t-s); z-index: 90;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .shapka, .navigaciya, .soglasie, .dalshe { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* =============================================================
   I visivi: SVG dentro la pagina, disegnati da visivi.py.

   Il colore sta qui e non nel disegno, per due ragioni che vale la
   pena ricordare: la Content-Security-Policy del sito blocca gli
   stili in linea, e le variabili del tema fanno seguire al disegno
   il modo chiaro e quello scuro senza un secondo disegno.

   Regola che governa tutte queste classi: il testo porta sempre un
   colore di testo, mai il colore della serie. Il colore della serie
   sta nel segno accanto alla parola, e la parola c'e' sempre.
   ============================================================= */

.vis { margin: 1.6rem 0; max-width: var(--largo); }
.vis__disegno { display: block; width: 100%; height: auto; overflow: visible; }
.vis__podpis { margin-top: 0.45rem; }

.v-barra { fill: var(--znak); }
.v-fondo { fill: var(--band); }
.v-riga  { fill: var(--band); }
.v-box   { fill: var(--band); stroke: var(--linea); stroke-width: 1; }
.v-box--net { fill: var(--zapret-fon); }
.v-box--ok  { fill: var(--razresh-fon); }
.v-asse  { stroke: var(--linea); stroke-width: 1; }
.v-punto { fill: var(--znak); }
.v-strelka { fill: none; stroke: var(--stamp); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.v-testo { font-family: var(--grot); font-size: 13px; fill: var(--ink); }
.v-testo--muted { font-size: 12px; fill: var(--muted); }
.v-testo--num { font-variant-numeric: tabular-nums; font-weight: 600; }
.v-cifra { font-family: var(--grot); font-weight: 700; font-size: 38px; fill: var(--znak); font-variant-numeric: tabular-nums; }
.v-cifra--net { fill: var(--zapret); }
.v-segno { font-family: var(--grot); font-size: 15px; }

.v-ok     { fill: var(--razresh); }
.v-net    { fill: var(--zapret); }
.v-neutro { fill: var(--stamp); }

/* Il corpo del testo dentro un disegno sta in unita' del disegno: se lo si
   ingrandisce, si allarga anche, e l'etichetta esce dal riquadro. Percio' qui
   non si tocca, e la leggibilita' sul telefono si ottiene impedendo al disegno
   di rimpicciolirsi oltre la soglia in cui le parole non si leggono piu':
   sotto quella la figura scorre in orizzontale, come le tabelle larghe del
   sito, e la didascalia resta al suo posto. */

.vis__disegno { min-width: 32rem; }

@media (max-width: 36rem) {
  .vis { overflow-x: auto; }
  .vis__podpis { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter)); }
}

/* =============================================================
   La struttura visibile delle pagine di prosa.

   Queste regole non toccano il testo: lavorano su quello che le
   pagine gia' hanno. Il primo paragrafo di ogni pagina e' per
   costruzione la risposta breve, e qui la si tratta come tale; i
   titoli di sezione prendono un segno che li fa leggere come
   stacchi e non come righe in grassetto; la prima riga di cifre di
   un paragrafo resta prosa, ma il numero si vede.
   ============================================================= */

/* il primo paragrafo e' il verdetto: si legge prima e si vede prima */
.ed-article > p:first-of-type {
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--znak);
  padding: 0.1rem 0 0.1rem 1rem;
  margin-bottom: 1.4rem;
}

/* i titoli di sezione: un segno corto sopra, non un grassetto piu' grande */
.ed-article h2 {
  margin-top: 2.1rem;
  padding-top: 0.9rem;
  position: relative;
}
.ed-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 3px;
  background: var(--stamp);
}

/* i numeri dentro la prosa restano prosa, ma si contano a colpo d'occhio */
.ed-article b, .ed-article strong { font-family: var(--grot); font-weight: 600; font-variant-numeric: tabular-nums; }

/* le pagine lunghe respirano: una campitura ogni tanto, non una scheda */
.razdel--fon { background: var(--band); padding: 1.6rem 0; }

@media (max-width: 34rem) {
  .ed-article > p:first-of-type { font-size: 1.05em; padding-left: 0.8rem; }
  .ed-article h2 { margin-top: 1.7rem; }
}

/* =============================================================
   L'impaginazione della pagina lunga.

   La misura di lettura resta quella giusta — una sessantina di segni
   cirillici per riga — ma la colonna sta al centro dell'involucro e
   non appoggiata a sinistra, altrimenti su uno schermo largo meta'
   pagina resta vuota e il testo sembra un blog. Le figure e le
   tabelle escono dalla colonna e prendono tutta la larghezza
   dell'involucro: e' la differenza fra una pagina impaginata e una
   colonna di testo.
   ============================================================= */

.ed-article { margin-inline: auto; }

.vis,
.ed-article > table,
.reestr-obertka {
  width: min(var(--largo), calc(100vw - 2 * var(--gutter)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

@media (max-width: 58rem) {
  .vis,
  .ed-article > table,
  .reestr-obertka { width: 100%; left: auto; transform: none; }
}

/* le figure delle pagine dei giochi */
.v-ruota { fill: none; stroke: var(--znak); stroke-width: 2; }
.v-ruota--debole { stroke: var(--linea); }
.v-tacca { stroke: var(--stamp); stroke-width: 2; }
.v-tacca--debole { stroke: var(--linea); }
.v-zero { stroke: var(--zapret); stroke-width: 3; }
.v-cifra--debole { fill: var(--muted); }


/* =============================================================
   Le figure a barre, fatte di testo.

   Un disegno SVG ha una larghezza propria e si rimpicciolisce
   tutto insieme: sul telefono le parole scendono sotto i sette
   pixel e non si leggono piu'. Una barra non ha bisogno di
   geometria, solo di una proporzione, e qui il testo resta testo:
   va a capo da solo, resta della sua misura a ogni larghezza, e
   chi legge con la voce lo sente come parole e numeri, non come
   un'immagine. La larghezza della barra non puo' stare in uno
   style= (il CSP del sito non ammette stili in linea): sta in una
   classe, gr-w-0 ... gr-w-100, scritte qui sotto una volta sola.
   ============================================================= */

.gr { margin: 0; }
.gr__asse {
  margin: 0 0 0.7rem; font-family: var(--grot); font-size: 0.9rem;
  color: var(--muted); max-width: none;
}
.gr__riga {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center; gap: 0 0.8rem; padding: 0.28rem 0;
}
.gr__nome {
  font-family: var(--grot); font-size: 0.9rem; color: var(--ink);
  line-height: 1.35; text-align: right;
}
.gr__pista { background: var(--band); border-radius: 3px; height: 1.25rem; }
.gr__barra {
  display: block; height: 100%; background: var(--accento);
  border-radius: 3px; min-width: 2px;
}
.gr__barra--debole { background: var(--debole); }
.gr__cifra {
  font-family: var(--grot); font-weight: 600; font-size: 0.9rem;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* La scala delle combinazioni legge dal numero al nome. */
.gr--scala .gr__riga { grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem); }
.gr--scala .gr__nome { order: 3; text-align: left; }
.gr--scala .gr__cifra { order: 1; }
.gr--scala .gr__pista { order: 2; }

/* Sul telefono il nome prende la sua riga: la barra non si stringe
   fino a sparire e nessuna parola finisce fuori schermo. */
@media (max-width: 36rem) {
  .gr__riga { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.7rem; padding: 0.4rem 0; }
  .gr__nome { grid-column: 1 / -1; text-align: left; }
  .gr--scala .gr__riga { grid-template-columns: auto minmax(0, 1fr); }
  .gr--scala .gr__nome { order: 0; }
  .gr--scala .gr__cifra { order: 1; }
  .gr--scala .gr__pista { order: 2; }
}


.gr { --accento: var(--znak); --debole: var(--linea); }

/* la larghezza della barra, una classe per punto percentuale */
.gr-w-0 { width: 0%; }
.gr-w-1 { width: 1%; }
.gr-w-2 { width: 2%; }
.gr-w-3 { width: 3%; }
.gr-w-4 { width: 4%; }
.gr-w-5 { width: 5%; }
.gr-w-6 { width: 6%; }
.gr-w-7 { width: 7%; }
.gr-w-8 { width: 8%; }
.gr-w-9 { width: 9%; }
.gr-w-10 { width: 10%; }
.gr-w-11 { width: 11%; }
.gr-w-12 { width: 12%; }
.gr-w-13 { width: 13%; }
.gr-w-14 { width: 14%; }
.gr-w-15 { width: 15%; }
.gr-w-16 { width: 16%; }
.gr-w-17 { width: 17%; }
.gr-w-18 { width: 18%; }
.gr-w-19 { width: 19%; }
.gr-w-20 { width: 20%; }
.gr-w-21 { width: 21%; }
.gr-w-22 { width: 22%; }
.gr-w-23 { width: 23%; }
.gr-w-24 { width: 24%; }
.gr-w-25 { width: 25%; }
.gr-w-26 { width: 26%; }
.gr-w-27 { width: 27%; }
.gr-w-28 { width: 28%; }
.gr-w-29 { width: 29%; }
.gr-w-30 { width: 30%; }
.gr-w-31 { width: 31%; }
.gr-w-32 { width: 32%; }
.gr-w-33 { width: 33%; }
.gr-w-34 { width: 34%; }
.gr-w-35 { width: 35%; }
.gr-w-36 { width: 36%; }
.gr-w-37 { width: 37%; }
.gr-w-38 { width: 38%; }
.gr-w-39 { width: 39%; }
.gr-w-40 { width: 40%; }
.gr-w-41 { width: 41%; }
.gr-w-42 { width: 42%; }
.gr-w-43 { width: 43%; }
.gr-w-44 { width: 44%; }
.gr-w-45 { width: 45%; }
.gr-w-46 { width: 46%; }
.gr-w-47 { width: 47%; }
.gr-w-48 { width: 48%; }
.gr-w-49 { width: 49%; }
.gr-w-50 { width: 50%; }
.gr-w-51 { width: 51%; }
.gr-w-52 { width: 52%; }
.gr-w-53 { width: 53%; }
.gr-w-54 { width: 54%; }
.gr-w-55 { width: 55%; }
.gr-w-56 { width: 56%; }
.gr-w-57 { width: 57%; }
.gr-w-58 { width: 58%; }
.gr-w-59 { width: 59%; }
.gr-w-60 { width: 60%; }
.gr-w-61 { width: 61%; }
.gr-w-62 { width: 62%; }
.gr-w-63 { width: 63%; }
.gr-w-64 { width: 64%; }
.gr-w-65 { width: 65%; }
.gr-w-66 { width: 66%; }
.gr-w-67 { width: 67%; }
.gr-w-68 { width: 68%; }
.gr-w-69 { width: 69%; }
.gr-w-70 { width: 70%; }
.gr-w-71 { width: 71%; }
.gr-w-72 { width: 72%; }
.gr-w-73 { width: 73%; }
.gr-w-74 { width: 74%; }
.gr-w-75 { width: 75%; }
.gr-w-76 { width: 76%; }
.gr-w-77 { width: 77%; }
.gr-w-78 { width: 78%; }
.gr-w-79 { width: 79%; }
.gr-w-80 { width: 80%; }
.gr-w-81 { width: 81%; }
.gr-w-82 { width: 82%; }
.gr-w-83 { width: 83%; }
.gr-w-84 { width: 84%; }
.gr-w-85 { width: 85%; }
.gr-w-86 { width: 86%; }
.gr-w-87 { width: 87%; }
.gr-w-88 { width: 88%; }
.gr-w-89 { width: 89%; }
.gr-w-90 { width: 90%; }
.gr-w-91 { width: 91%; }
.gr-w-92 { width: 92%; }
.gr-w-93 { width: 93%; }
.gr-w-94 { width: 94%; }
.gr-w-95 { width: 95%; }
.gr-w-96 { width: 96%; }
.gr-w-97 { width: 97%; }
.gr-w-98 { width: 98%; }
.gr-w-99 { width: 99%; }
.gr-w-100 { width: 100%; }