/* pj_aspetto — stile del pannello «Aspetto» e livelli del testo.
   Nessun colore qui: il progetto definisce le variabili (vedi README.md)
     --asp-sfondo --asp-testo --asp-tenue --asp-bordo --asp-accento --asp-accento-testo --asp-campo
   Il testo cresce con font-size su <html>: il progetto deve usare rem per caratteri e spazi. */
html[data-testo="87"]{font-size:87.5%}
html[data-testo="112"]{font-size:112.5%}
html[data-testo="125"]{font-size:125%}
html[data-testo="150"]{font-size:150%}
html[data-testo="175"]{font-size:175%}
html[data-testo="200"]{font-size:200%}

.aspetto{position:relative;display:inline-block}
/* Il tasto «Aa» cresce poco con il testo (fino a 52px, carattere fino a 20px): è quello che
   serve per tornare indietro e deve restare sullo schermo anche al 200% su un telefono. */
.asp-apri{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:clamp(44px,2.75rem,52px);height:clamp(44px,2.75rem,52px);
  border-radius:50%;border:1px solid var(--asp-bordo);background:var(--asp-sfondo);color:var(--asp-testo);
  font-family:inherit;font-weight:600;font-size:clamp(16px,1rem,20px);line-height:1;cursor:pointer;padding:0}
.asp-apri:hover,.asp-apri[aria-expanded="true"]{background:var(--asp-campo)}
.asp-pannello{position:absolute;right:0;top:calc(100% + .4rem);z-index:60;min-width:15rem;max-width:calc(100vw - 2rem);
  background:var(--asp-sfondo);color:var(--asp-testo);border:1px solid var(--asp-bordo);border-radius:1rem;
  padding:.6rem .8rem .8rem;box-shadow:0 .4rem 1.2rem rgb(0 0 0 / .18)}
.asp-pannello[hidden]{display:none}
.asp-gruppo{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.3rem}
.asp-etichetta{width:100%;margin:.2rem 0 0;font-size:.85rem;font-weight:600;color:var(--asp-tenue)}
.asp-tasto{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .5rem;
  border-radius:999px;border:1px solid var(--asp-bordo);background:var(--asp-sfondo);color:var(--asp-testo);
  font:inherit;font-weight:600;cursor:pointer}
.asp-tasto:hover{background:var(--asp-campo)}
.asp-tasto:disabled{cursor:not-allowed;color:var(--asp-tenue);border-style:dashed;background:var(--asp-sfondo)}
.asp-tasto[aria-pressed="true"]{background:var(--asp-accento);border-color:var(--asp-accento);color:var(--asp-accento-testo)}
.asp-misura{min-width:4.2rem;font-variant-numeric:tabular-nums}
.asp-grande{font-size:1.2em}
.asp-icona{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.asp-icona .asp-pieno{fill:currentColor;stroke:none}
.asp-apri:focus-visible,.asp-tasto:focus-visible{outline:3px solid var(--asp-accento);outline-offset:2px}
.asp-annuncio{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (max-width:30rem){.asp-pannello{position:fixed;left:1rem;right:1rem;top:auto;min-width:0}}
@media print{.aspetto{display:none}}