/*
 * Layout condiviso di sito e pannello: sistema "Vivace" dell'app (docs/06,
 * ui/README.md → Design) adattato al web.
 *
 * Regole (come nell'app):
 * - solo token di tokens.css: niente colori esadecimali qui (test
 *   `static_css_uses_only_tokens`);
 * - --c-grad solo per righe, barre e bordi, mai sotto il testo; il
 *   pulsante principale usa --c-grad-btn con --c-on-grad;
 * - controlli senza fondo pieno con bordo --c-control-line (≥ 3:1);
 * - focus sempre visibile, bersagli di almeno 40 px (--target);
 * - nessuno stile in linea (CSP style-src 'self').
 *
 * Mappa: base.css = layout, testata, piede, tipografia, pulsanti, campi,
 * avvisi, schede; site.css = pagine del sito; admin.css = pannello.
 */

/* --- Reset e tipografia ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}
h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--c-info);
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}

.lead {
  font-size: 1.125rem;
  color: var(--c-text-dim);
  max-width: 62ch;
}

.hint {
  color: var(--c-text-dim);
  font-size: var(--fs-small);
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-caps);
  font-weight: 600;
  color: var(--c-text-faint);
}

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 0.05em 0.35em;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-small);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--c-panel);
  color: var(--c-text);
  box-shadow: var(--c-shadow);
}
.skip-link:focus {
  top: var(--space-3);
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.main {
  flex: 1 0 auto;
}
.main:focus {
  outline: none;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Logotipo (disegno di Wordmark, docs/06) --------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 1.375rem;
  line-height: 1;
}
.wordmark__svg {
  height: 1em;
  width: auto;
  overflow: visible;
}
.logo__ink {
  stroke: var(--c-logo-ink);
}
.logo__blue {
  stroke: var(--c-brand-blue);
}
.logo__blue-fill {
  fill: var(--c-brand-blue);
}
.logo__green {
  stroke: var(--c-brand-green);
}

/* --- Testata ----------------------------------------------------------- */
.topbar {
  position: relative;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-side);
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-grad);
  opacity: 0.7;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  flex-wrap: wrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: inherit;
  text-decoration: none;
}
.topnav {
  flex: 1 1 auto;
}
.topnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.topnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--c-text-dim);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.topnav__link:hover {
  background: var(--c-hover);
  color: var(--c-text);
}
.topnav__link[aria-current='page'] {
  color: var(--c-text);
  background: var(--c-raised);
  box-shadow: inset 0 -2px 0 var(--c-brand-green);
}

/* Interruttori rapidi di lingua e tema (QuickSwitches dell'app). */
.quick {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--c-control-line);
  border-radius: var(--radius-pill);
}
.quick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--target);
  min-height: calc(var(--target) - 6px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.quick__btn:hover {
  background: var(--c-hover);
}
.quick__btn[hidden] {
  display: none;
}
.theme-toggle__sun {
  display: none;
}
:root[data-theme='light'] .theme-toggle__sun {
  display: block;
}
:root[data-theme='light'] .theme-toggle__moon {
  display: none;
}

/* --- Piede ------------------------------------------------------------- */
.footer {
  margin-top: var(--space-7);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-side);
  color: var(--c-text-dim);
  font-size: var(--fs-small);
}
.footer__inner {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--c-text-dim);
}
.footer__nav a[aria-current='page'] {
  color: var(--c-text);
}
.footer__owner,
.footer__mark {
  margin: 0 0 var(--space-1);
}

/* --- Pulsanti ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn--primary {
  background: var(--c-grad-btn);
  color: var(--c-on-grad);
  box-shadow: var(--c-glow);
}
.btn--primary:hover {
  background: var(--c-grad-btn-hover);
  box-shadow: var(--c-glow-strong);
  transform: translateY(-1px);
}
.btn--secondary {
  background: transparent;
  border-color: var(--c-control-line);
  color: var(--c-text);
}
.btn--secondary:hover {
  background: var(--c-hover);
}
.btn--large {
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: 1.0625rem;
}
.btn--small {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
}
.btn--block {
  width: 100%;
}
.btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- Avvisi, distintivi, schede ---------------------------------------- */
.notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-panel);
}
.notice--info {
  border-left: 3px solid var(--c-info);
}
.notice--warn {
  border-color: var(--c-warn);
  background: var(--c-warn-bg);
  color: var(--c-text);
}
.notice--danger {
  border-color: var(--c-danger);
  background: var(--c-danger-bg);
  color: var(--c-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  background: var(--c-raised);
  color: var(--c-text-dim);
}
.badge--warn {
  background: var(--c-warn-bg);
  color: var(--c-warn);
}

.panel,
.card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--c-shadow);
}
.panel {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--c-grad);
}
.card {
  padding: var(--space-5);
}
.card__title {
  margin-bottom: var(--space-2);
}
.card p:last-child {
  margin-bottom: 0;
}

/* --- Campi dei moduli (pannello) --------------------------------------- */
.form {
  display: grid;
  gap: var(--space-4);
}
.field {
  display: grid;
  gap: var(--space-1);
}
.field__label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--c-text-dim);
}
.input {
  width: 100%;
  min-height: var(--target);
  padding: 0 var(--space-3);
  border: 1px solid var(--c-control-line);
  border-radius: var(--radius);
  background: var(--c-raised);
  color: var(--c-text);
  font: inherit;
}
.input:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

/* --- Sezioni e pagina d'errore ----------------------------------------- */
.section {
  padding-top: var(--space-7);
}
.page-head {
  max-width: 820px;
}

.error-page {
  padding-top: var(--space-7);
  max-width: 720px;
}
.error-page__code {
  margin-bottom: var(--space-2);
}

/* Sfondo con bagliori e trama a puntini (sblocco dell'app). */
.stage {
  position: relative;
  background:
    radial-gradient(60% 80% at 15% 0%, var(--c-halo-blue) 0%, transparent 70%),
    radial-gradient(50% 70% at 90% 20%, var(--c-halo-green) 0%, transparent 70%),
    radial-gradient(var(--c-dots) 1px, transparent 1px) 0 0 / 22px 22px;
}

@media (max-width: 720px) {
  .topbar__inner {
    gap: var(--space-2);
  }
  .topnav {
    order: 3;
    flex-basis: 100%;
  }
  .topnav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }
  .topnav__link {
    white-space: nowrap;
  }
  .panel {
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover {
    transform: none;
  }
}