/* =============================================================================
   RADA · guida.css — la pagina di documentazione

   Si appoggia a style.css, che resta l'unica fonte della palette: qui non c'è
   nessun colore scritto a mano, solo le variabili già definite là.

   La gerarchia dei rettangoli ricalca quella dell'interfaccia: il bordo pieno
   d'inchiostro è quello del riquadro dei quadranti e resta per le sezioni
   portanti; le celle minori usano il filo tenue delle pillole dei mood. Se
   avessero tutte lo stesso bordo la pagina diventerebbe una parete di scatole
   identiche, e la lettura non avrebbe più un ordine.
============================================================================= */

/* La pagina è lunga: il contenuto parte dall'alto invece di stare al centro,
   e la misura si stringe, perché una riga di mille pixel non si legge.      */
.stage.doc{justify-content:flex-start}
.wrap.doc{max-width:900px}

/* ------------------------------------------------------------- testata */
.logoLink{color:inherit;text-decoration:none}
.backLink{
  font-family:var(--sans);font-weight:400;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dust);text-decoration:none;transition:.2s;
}
.backLink:hover{color:var(--ink)}

/* --------------------------------------------------- rettangoli portanti
   Stesso bordo dei due riquadri dello strumento (`.loopCard` in style.css):
   le due pagine si aprono una di fila all'altra, e un bordo più scuro qui
   le farebbe sembrare due progetti.                                       */
.docCard{
  border:1.5px solid var(--scelto);
  border-radius:24px;
  padding:22px 26px 24px;
  margin-bottom:14px;
}
.docCard .cardHead{margin:0 0 10px}
.docCard h2.t{margin:0;font-weight:200;font-size:16px;letter-spacing:.1em}

/* Un corpo solo per tutta la pagina, ed è quello delle celle minori: 12,5px
   con interlinea 1,45. Prima ce n'erano quattro — 15 nell'apertura, 14 nei
   riquadri, 13 nelle introduzioni e negli elenchi, 12,5 nelle celle — e la
   scala non raccontava una gerarchia, raccontava soltanto l'ordine in cui i
   pezzi erano stati scritti. La gerarchia qui la fanno il peso, il colore e
   la spaziatura; il corpo può stare fermo.                                 */
.docCard p{
  margin:0 0 11px;
  font-size:12.5px;line-height:1.45;font-weight:300;
  color:var(--ink-2);
}
.docCard p:last-child{margin-bottom:0}
/* <em> qui non inclina: rialza soltanto il colore, perché la gerarchia del
   progetto è fatta di peso e spaziatura, non di corsivi.                   */
.docCard em{font-style:normal;color:var(--ink)}
/* <i> invece inclina davvero: serve per i termini tecnici citati in quanto
   termini — "coprimi" — dove il corsivo ha un significato preciso.         */
.docCard i{font-style:italic;color:var(--ink)}

/* Il terzo risalto, e il più raro: l'arancione. Non marca un termine tecnico
   né una parola importante — quelli hanno già l'inchiostro pieno — ma le
   poche parole che nella pagina fanno da eco al suono: "morbido", "affiora",
   "spartito", il filo "rosso" fra due gocce. E la "d" di Rada, dovunque il
   nome compaia nella prosa, che è la stessa "d" del logo.

   Serve la classe sull'`em` perché `.docCard em` porta già l'inchiostro, e a
   parità di elemento vince chi è più specifico. Vale ovunque nella pagina —
   riquadri, introduzioni, celle, elenchi — con una regola sola.          */
.amb, .docCard em.amb, .docList dd em.amb, .docCell p em.amb, .docIntro em.amb{
  font-style:normal;
  color:var(--amber);
}

/* nota di coda: più tenue del corpo, staccata da un filo */
.docNote{
  margin-top:14px !important;
  padding-top:12px;
  border-top:1px solid var(--hair);
  font-size:12.5px !important;
  color:var(--dust) !important;
}

/* ------------------------------------------------------------ giustificato
   I blocchi diventano rettangoli pieni: è la ragione per cui lo si vuole in
   un impianto minimale, dove il bordo del testo conta quanto il testo.

   Ha un prezzo, e la sillabazione è ciò che lo abbassa. Senza, il browser può
   solo allargare gli spazi fra le parole, e in una colonna stretta li allarga
   in modo grottesco. `hyphens:auto` usa i dizionari del browser, che seguono
   l'attributo lang del documento: cambiando lingua cambia anche il modo in
   cui le parole si spezzano. Il giapponese non ne ha bisogno — va già a capo
   fra qualunque coppia di caratteri — e infatti lì il giustificato è la norma.

   `text-align-last:left` tiene l'ultima riga com'era: giustificare anche
   quella spalanca l'ultimo rigo di ogni capoverso.                        */
.docCard p,
.docList dd,
.docIntro,
.docCell p{
  text-align:justify;
  text-align-last:left;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* Il colophon resta centrato: due righe corte, e giustificarle non avrebbe
   nulla da distribuire.

   Serve anche `text-align-last`, che è una proprietà a sé: la regola qui
   sopra la mette a `left` per tutta la pagina, e `text-align:center` da solo
   non la tocca. In un capoverso di una o due righe l'ultima riga è tutto il
   capoverso — quindi restava a sinistra, centrato per finta.              */
.docColophon p{text-align:center;text-align-last:center;hyphens:manual}

/* ----------------------------------------------- etichette di sezione */
.docLabel{
  margin:26px 0 10px 8px;
  font-family:var(--sans);font-weight:400;
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);
}
.docIntro{
  margin:0 8px 12px;
  font-size:12.5px;line-height:1.45;font-weight:300;color:var(--ink-2);
}
.docIntro em{font-style:normal;color:var(--ink)}

/* --------------------------------------------------------- celle minori */
.docGrid{display:grid;gap:10px;margin-bottom:14px}
.docGrid.g4{grid-template-columns:repeat(4,1fr)}

.docCell{
  border:1.5px solid var(--hair);
  border-radius:16px;
  padding:15px 16px 16px;
  display:flex;flex-direction:column;
}
.docCell .k{
  font-family:var(--sans);font-weight:400;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px;
}
.docCell p{
  margin:0;
  font-size:12.5px;line-height:1.45;font-weight:300;
  color:var(--ink-2);
}
/* il tempo di riallineamento, nello stesso arancione che lo mostra a schermo */
.docCell .mt{
  margin-top:auto;padding-top:10px;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-variant-numeric:tabular-nums;
}

/* -------------------------------------------- elenco dei cursori
   Etichetta a sinistra e testo a destra: la stessa lettura del pannello dei
   comandi, dove il nome sta accanto al valore.                             */
.docList{margin:0;display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:10px 22px}
.docList dt{
  font-family:var(--sans);font-weight:400;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding-top:3px;
}
.docList dd{
  margin:0;
  font-size:12.5px;line-height:1.45;font-weight:300;color:var(--ink-2);
}
.docList dd em{font-style:normal;color:var(--ink)}

/* ------------------------------------------------------ due affiancate */
.docPair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.docPair .docCard{margin-bottom:0}

.docEnd{margin-top:14px}

/* --------------------------------------------------------------- colophon
   Ultima cosa della pagina: una firma. Centrato perché il resto è allineato
   a sinistra, e questo scarto dice da solo «qui il discorso è finito».
   I recapiti non vanno in maiuscolo come le altre etichette minute: un
   indirizzo di posta in maiuscolo si legge peggio e sembra un errore.    */
.docCard.docColophon{margin-top:14px;text-align:center}
.docColophon p{font-size:12.5px;color:var(--ink-2)}
.docColophon .recapiti{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;margin-top:12px;
}
.docColophon a{
  font-family:var(--sans);font-weight:400;
  font-size:10px;letter-spacing:.1em;
  color:var(--dust);text-decoration:none;transition:.2s;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.docColophon a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.docColophon a:focus-visible{outline:1.5px solid var(--amber);outline-offset:3px;border-radius:2px}
.docColophon .sep{width:1px;height:10px;background:var(--hair);flex:none}
/* L'indirizzo non è cliccabile: stessa misura del collegamento accanto, ma
   senza il filo che compare al passaggio — non deve promettere un clic che
   non c'è. Resta selezionabile, che è come si usa.                        */
.docColophon .posta{
  font-family:var(--sans);font-weight:400;
  font-size:10px;letter-spacing:.1em;color:var(--dust);
  padding-bottom:2px;border-bottom:1px solid transparent;
}
@media (max-width:479px){
  .docColophon .sep{display:none}      /* a capo, il trattino resterebbe appeso */
  .docColophon .recapiti{gap:8px;flex-direction:column}
}

/* ------------------------------------------------------------- chiusura */
.docFoot{
  display:flex;align-items:center;gap:14px;
  margin:26px 8px 0;
}
.docFoot a{
  font-family:var(--sans);font-weight:400;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);text-decoration:none;transition:.2s;
}
.docFoot a:hover{color:var(--ink)}
.docFoot .sep{width:1px;height:10px;background:var(--hair);flex:none}

/* ---------------------------------------------------------- adattamenti */
@media (max-width:719px){
  .docGrid.g4{grid-template-columns:repeat(2,1fr)}
  .docPair{grid-template-columns:1fr}
  .docList{grid-template-columns:1fr;gap:4px 0}
  .docList dd{margin-bottom:10px}
  .docCard{padding:18px 18px 20px}
}
@media (max-width:479px){
  /* i gesti hanno testi lunghi e vanno in colonna singola; i mood no: due
     righe scarse ciascuno, e in colonna singola occuperebbero due schermate
     di puro scorrimento. Restano affiancati come le pillole nell'interfaccia. */
  .docGrid.g4{grid-template-columns:1fr}
  .docGrid.g4.moodGrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .moodGrid .docCell{padding:13px 13px 14px}
  /* Unica eccezione al giustificato di tutta la pagina, e per misura non per
     gusto: qui la colonna scende a 142 px, cioè ventun caratteri per riga.
     Sotto quella soglia il browser non ha più nulla da distribuire se non gli
     spazi fra le parole, e li spalanca — "poche  gocce  ben". Nemmeno la
     sillabazione basta, perché le parole restano più lunghe dello spazio che
     avanza. Meglio un bordo destro irregolare che una riga a buchi.       */
  .moodGrid .docCell p{font-size:12px;line-height:1.42;text-align:left}
}

/* -------------------------------- il giapponese, se un giorno tradurremo */
:lang(ja) .docLabel,
:lang(ja) .docCell .k,
:lang(ja) .docList dt,
:lang(ja) .backLink,
:lang(ja) .docFoot a{
  text-transform:none;
  letter-spacing:.08em;
}
:lang(ja) .docCard p,
:lang(ja) .docList dd{line-height:1.75;letter-spacing:.02em}

/* Nemmeno il corsivo esiste in giapponese: l'obliquo che il browser applica
   ai glifi CJK non è un carattere, è una deformazione calcolata. Per marcare
   un termine — 互いに素 — la tipografia giapponese usa i 圏点, i punti posti
   sopra i caratteri: stesso compito del nostro corsivo, altro strumento.   */
:lang(ja) .docCard i{
  font-style:normal;
  -webkit-text-emphasis:filled dot currentColor;
  text-emphasis:filled dot currentColor;
  -webkit-text-emphasis-position:over right;
  text-emphasis-position:over right;
}