/* ============================================================
   WORKSPACE PANEL v4 — BASE
   I tag nudi: la pagina, il testo, i bottoni, i campi.

   Niente classi qui. Quello che sta in questo file vale per un
   <button> qualunque scritto al volo in una pagina nuova: e' il
   modo per restare uniformi senza ricordarsi una classe.
   ============================================================ */

/* 62.5% fa 1rem = 10px con le impostazioni di fabbrica, e resta una percentuale
   apposta: chi ha alzato il testo nel browser vede tutto piu' grande. */
html { font-size: calc(62.5% * var(--ui-scale)); }

* { box-sizing: border-box; }

/* Un'applicazione, non un documento: la pagina non scorre, scorrono i pezzi.
   overscroll-behavior toglie il rimbalzo elastico del telefono. */
html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Due luci appena accennate: viola in alto a destra, azzurra in basso a sinistra.
   Sono l'unica decorazione della pagina, e stanno sul body perche' tutto il resto
   (la spalla di vetro, i pannelli) ci si appoggia sopra. */
body {
  margin: 0;
  background:
    radial-gradient(90rem 50rem at 85% -20rem, var(--accent-haze), transparent 70%),
    radial-gradient(70rem 40rem at 10% 110%, var(--info-haze), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 1.4rem/1.5 var(--sans);
  /* Le varianti di Inter con l'1 e la l distinguibili. Su un font che non le ha
     non fanno niente. */
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Scrollbar ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar { width: 1rem; height: 1rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--thumb);
  border: 2px solid transparent;
  border-radius: var(--pill);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--thumb-hover); background-clip: padding-box; }

/* Nascosto vuol dire nascosto: scritto due volte pesa piu' di qualunque
   `display` di un componente, senza bisogno di !important. */
[hidden][hidden] { display: none; }

/* ---- Titoli e link -------------------------------------------------------
   Piu' grandi e piu' stretti della classica: il titolo di pagina adesso e' una
   cosa che si guarda, non solo un'etichetta. */
h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 1.4rem; font-weight: 600; }
/* Solo i link nudi, quelli nel testo: i componenti con una classe decidono da soli. */
a:not([class]) { color: var(--accent); }

/* ---- Bottoni -------------------------------------------------------------
   Spenti, come nella classica. L'unico bottone acceso e' .nv-primary (in
   03-componenti), e c'e' al massimo una volta per schermata. */
button, input, select, textarea { font: inherit; }
button {
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
button:hover { background: var(--elevated); border-color: var(--line-hover); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
button:disabled { cursor: not-allowed; opacity: 0.45; }
button:disabled:hover { background: var(--panel-2); border-color: var(--line); }
/* Il distruttivo si accende in rosso solo col dito sopra. */
button.danger:hover { border-color: var(--red); color: var(--red); }

/* ---- Campi ---------------------------------------------------------------
   Il fondo e' il piu' scuro di tutti (--sunken): un campo e' un buco. */
input, select, textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select { cursor: pointer; }
textarea { resize: vertical; }

/* Il tasto da premere, scritto come un tasto: «Ctrl K», «Esc». */
kbd {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--panel-2);
  color: var(--muted);
  font: 600 1rem/1 var(--sans);
}

/* ---- Chi non vuole animazioni --------------------------------------------
   L'unico !important del kit: deve battere qualunque transizione. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}