/* Testo lungo (.prose): informative, condizioni, testi legali. Righe da 60–75 caratteri, titoli con aria sopra,
   elenchi, riquadro di avviso (.callout), tabelle larghe che scorrono dentro il loro riquadro (.table) e link
   sottolineati. Pensato per leggere, non per scorrere: niente colonne, niente decorazioni. */

@layer components {
  .prose {
    max-width: 68ch;
    font-size: var(--step-body);
    line-height: 1.65;

    & > * + * { margin-top: 1em; }

    & h2 {
      margin-top: 2.4em;
      font-size: var(--step-lead);
      line-height: 1.2;
      letter-spacing: -0.01em;
      scroll-margin-top: 96px;
    }
    & h2:first-child { margin-top: 0; }
    & h2 + * { margin-top: .8em; }
    & h3 { margin-top: 1.8em; font-size: var(--step-body); font-family: var(--font); font-weight: 600; letter-spacing: 0; }

    & ul, & ol { padding-left: 1.3em; }
    & li + li { margin-top: .45em; }
    & li::marker { color: var(--accent); }

    & strong { font-weight: 600; }
    & code {
      padding: 1px 6px;
      border-radius: 6px;
      background: var(--tint);
      font-size: .875em;
      overflow-wrap: anywhere;
    }

    /* link: anche quelli con colore scritto nel testo prendono il colore del sistema */
    & a, & a[style] {
      color: var(--accent) !important;
      font-weight: 500;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
      overflow-wrap: anywhere;
    }
    & a:hover { color: var(--ink) !important; }

    /* riquadro di avviso */
    & .callout {
      padding: 18px 22px;
      border-radius: var(--r-md);
      background: var(--tint);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    /* tabella: piu' larga del testo se serve, scorre dentro il suo riquadro sul telefono */
    & .table {
      max-width: none;
      overflow-x: auto;
      border-radius: var(--r-md);
      box-shadow: inset 0 0 0 1px var(--line);
    }
    & table {
      width: 100%;
      min-width: 640px;
      border-collapse: collapse;
      font-size: var(--step-small);
      line-height: 1.5;
    }
    & th, & td { padding: 12px 16px; text-align: left; vertical-align: top; }
    & thead th { background: var(--tint); font-weight: 600; }
    & tbody tr + tr td { border-top: 1px solid var(--line); }
    & td:first-child { white-space: nowrap; }

    & hr { margin-block: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
    & .foot { font-size: var(--step-small); color: var(--ink-soft); }
  }
}