/* Centro assistenza: intestazione propria, home con la ricerca e le categorie, articoli con il menu della categoria a
   sinistra e l'indice a destra. Gli esempi nelle guide (tacche, frecce, colori) ridisegnano quelli degli insights. */

body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: radial-gradient(1000px 600px at 50% -160px, color-mix(in srgb, var(--color-accent-900) 95%, transparent), transparent 70%), var(--color-bg);
  --pos: #86d9b4; --neg: #e08b8b; --neu: #b2b6ca; --mid: #e8d48a;
}

/* ---------- intestazione e piede ---------- */
.as-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--color-divider); }
.as-marchio { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.as-marchio img { height: 34px; width: auto; }
.as-marchio-testo { padding-left: 12px; border-left: 1px solid var(--color-divider); font-size: 15px; color: var(--color-neutral-300); }
.as-sito { font-size: 13.5px; color: var(--color-neutral-400); }
.as-sito:hover { color: var(--color-text); }
.as-pagina { flex: 1; width: min(100%, 1180px); margin: 0 auto; padding: 0 16px 64px; }
.as-piede { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--color-divider); font-size: 12.5px; color: var(--color-neutral-600); }
.as-piede a { color: var(--color-neutral-500); }

/* ---------- home ---------- */
.as-eroe { max-width: 720px; margin: 0 auto; padding: clamp(40px, 9vh, 88px) 0 36px; text-align: center; }
.as-eroe h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 10px; }
.as-eroe > p { color: var(--color-neutral-400); font-size: 15.5px; margin-bottom: 26px; }
.as-categorie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 40px; }
.as-categoria { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-neutral-800); color: var(--color-neutral-400); font-size: 13.5px; line-height: 1.5;
  transition: box-shadow .15s, transform .15s; }
.as-categoria:hover { color: var(--color-neutral-300); box-shadow: 0 0 0 1px var(--color-accent-600); transform: translateY(-2px); }
.as-categoria strong { font-size: 17px; font-weight: 500; color: var(--color-text); }
.as-categoria em { font-style: normal; font-size: 12px; color: var(--color-accent-400); }
.as-icona { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.as-icona svg { width: 22px; height: 22px; }
.as-elenco { display: grid; gap: 10px; }
.as-elenco > h2 { font-size: 18px; margin: 0 0 4px; }
.as-voce { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 10px; background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: 0 0 0 1px var(--color-neutral-900); color: var(--color-neutral-500); font-size: 13.5px; }
.as-voce:hover { box-shadow: 0 0 0 1px var(--color-accent-700); color: var(--color-neutral-400); }
.as-voce strong { font-weight: 500; font-size: 15px; color: var(--color-text); }

/* ---------- ricerca ---------- */
.as-cerca { position: relative; text-align: left; margin-bottom: 22px; }
.as-cerca-campo { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--color-neutral-700); background: var(--color-surface);
  color: var(--color-text); font: inherit; font-size: 14.5px; }
.as-cerca-campo:focus { border-color: var(--color-accent); outline: none; }
.as-cerca.is-grande .as-cerca-campo { padding: 16px 20px; font-size: 16px; border-radius: 12px; }
.as-cerca-risultati { display: grid; gap: 2px; margin-top: 6px; }
.as-cerca-risultati:empty { display: none; }
.as-cerca-voce { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; background: var(--color-surface);
  color: var(--color-neutral-500); font-size: 13px; }
.as-cerca-voce:hover, .as-cerca-voce:focus-visible { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); }
.as-cerca-voce strong { font-weight: 500; color: var(--color-text); font-size: 14px; }
.as-cerca-vuoto { margin: 6px 4px; color: var(--color-neutral-500); font-size: 13.5px; }

/* ---------- categoria e articolo ---------- */
.as-categoria-pagina { max-width: 760px; margin: 0 auto; padding-top: 32px; }
.as-briciole { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--color-neutral-500); }
.as-briciole a { color: var(--color-neutral-400); }
.as-sommario { color: var(--color-neutral-400); font-size: 15.5px; margin-bottom: 22px; }
.as-categoria-pagina h1, .as-testo h1 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 8px; }

.as-articolo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 40px; padding-top: 32px; align-items: start; }
.as-laterale, .as-indice { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.as-laterale a { padding: 6px 10px; border-radius: 6px; color: var(--color-neutral-400); }
.as-laterale a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.as-laterale a.is-qui { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.as-laterale .as-laterale-titolo { padding-left: 10px; margin-bottom: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-400); background: none; }
.as-indice strong { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 6px; }
.as-indice a { padding: 4px 0 4px 10px; border-left: 2px solid var(--color-neutral-800); color: var(--color-neutral-500); }
.as-indice a:hover { color: var(--color-text); border-left-color: var(--color-accent); }

/* il testo delle guide */
.as-testo { min-width: 0; }
.as-corpo { font-size: 15px; line-height: 1.7; color: var(--color-neutral-200); }
/* i titoli delle sezioni: più grandi, con una linea sotto e un tratto di colore all'inizio */
.as-corpo h2 { position: relative; font-size: 24px; margin: 46px 0 16px; padding-bottom: 10px; scroll-margin-top: 20px; color: var(--color-text);
  border-bottom: 1px solid var(--color-divider); }
.as-corpo h2::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 56px; height: 3px; border-radius: 2px;
  background: var(--color-accent); }
.as-corpo > h2:first-child { margin-top: 8px; }
.as-corpo h2.is-evidenziato { color: var(--color-accent-300); }
.as-corpo h3 { font-size: 16px; font-weight: 600; margin: 24px 0 6px; color: var(--color-text); }
.as-corpo p, .as-corpo ul, .as-corpo ol { margin: 0 0 14px; }
.as-corpo ul, .as-corpo ol { padding-left: 22px; }
.as-corpo li { margin-bottom: 6px; }
.as-corpo strong { color: var(--color-text); font-weight: 600; }
.as-corpo table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14px; }
.as-corpo th, .as-corpo td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.as-corpo th { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.as-attesa { color: var(--color-neutral-500); }
/* un riquadro a parte: un consiglio o un'avvertenza */
.as-nota { margin: 6px 0 18px; padding: 14px 18px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-accent); font-size: 14.5px; }
.as-nota > :last-child { margin-bottom: 0; }
/* un esempio di come appare un dato nella pagina */
.as-esempio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 6px 0 18px; padding: 16px 18px; border-radius: 10px;
  background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); font-size: 14px; color: var(--color-neutral-300); }
.as-esempio > span { display: inline-flex; align-items: center; gap: 8px; }
.as-seguenti { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.as-seguenti a { display: flex; flex-direction: column; gap: 2px; max-width: 48%; font-size: 15px; color: var(--color-text); }
.as-seguenti a span { font-size: 12px; color: var(--color-neutral-500); }
.as-seguenti a.is-dopo { text-align: right; margin-left: auto; }

/* i simboli degli insights, per gli esempi: le tacche, le frecce, i numeri colorati */
.es-tacche { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.es-tacche > i { width: 3px; border-radius: 1px; background: var(--color-neutral-800); }
.es-tacche > i:nth-child(1) { height: 40%; }
.es-tacche > i:nth-child(2) { height: 70%; }
.es-tacche > i:nth-child(3) { height: 100%; }
.es-tacche[data-livello="alta"] > i { background: var(--pos); }
.es-tacche[data-livello="media"] > i:nth-child(-n+2) { background: var(--mid); }
.es-tacche[data-livello="bassa"] > i:nth-child(1) { background: var(--neg); }
.es-pos { color: var(--pos); } .es-neg { color: var(--neg); } .es-neu { color: var(--neu); } .es-mid { color: var(--mid); }
.es-zero { color: var(--color-neutral-700); }
.es-freccia { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.es-numeri { display: inline-flex; gap: 14px; font-variant-numeric: tabular-nums; }

/* ---------- schermi stretti ---------- */
@media (max-width: 1080px) {
  .as-articolo { grid-template-columns: 200px minmax(0, 1fr); }
  .as-indice { display: none; }
}
@media (max-width: 760px) {
  .as-articolo { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .as-laterale { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; order: 2; padding-top: 18px; border-top: 1px solid var(--color-divider); }
  .as-laterale .as-laterale-titolo { width: 100%; }
  .as-marchio img { height: 28px; }
  .as-corpo table { display: block; overflow-x: auto; }
}