/* Robot Chef: la pagina dell'app (robot-chef.html) e le sue pagine legali.

   Stesso tema di Azmar Quest: palette, sezioni, elenchi, screenshot e FAQ
   vengono da home.css, barra e footer da chrome.css (partial rc-topbar e
   rc-footer). Qui c'e' solo il colore di Robot Chef e quello che home.css
   non ha. Si carica dopo home.css.

   Niente JavaScript, niente font esterni, nessuna risorsa di terzi. */

:root {
    /* il blu lavanda della testa del robot, preso dall'icona dell'app.
       Contrasto 6,8:1 sul fondo (--bg), 6,3:1 su --bg-soft e 5,7:1 su --card:
       AA anche per il testo piccolo. Barra e footer non lo vedono, hanno i
       loro colori chrome- in chrome.css. */
    --accent: #919dc4;
}

/* in home.css il filetto sotto i collegamenti di testo e' l'oro, scritto a mano */
.textlink { border-bottom-color: rgba(145, 157, 196, .35); }

/* ------------------------------------------------------------------- eroe */
/* Su Azmar il titolo dell'eroe e' nascosto, al suo posto c'e' il logo.
   Qui c'e' l'icona, e il titolo si vede. */

.rchero .icon { display: block; width: 132px; height: 132px; margin: 0 auto 1.5rem; }

.rchero h1 {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; white-space: normal;
    max-width: 20ch; margin: 0 auto;
    font-size: 2.6rem; font-weight: 600; line-height: 1.15;
    letter-spacing: -.02em; color: var(--ink);
    /* righe di lunghezza simile: niente "name" da solo sull'ultima riga a 320px */
    text-wrap: balance;
}

/* niente parola sola sull'ultima riga */
.rchero .tagline { margin: 1.3rem auto 2.3rem; text-wrap: pretty; }

/* due negozi invece di tre */
.rchero .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; }

.rchero .platforms { margin-top: 1.3rem; }

/* l'avviso sull'AI sta nell'eroe, sotto i pulsanti: si legge prima di scaricare */
.ainote {
    max-width: 62ch; margin: 1.6rem auto 0; padding: .85rem 1.15rem;
    border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft);
    font-size: .9rem; line-height: 1.55; color: var(--ink-body);
}

.ainote strong { color: var(--ink); font-weight: 600; }

/* i numeri qui non hanno una fascia dipinta sopra: la riga li chiude anche in alto */
.rcstats { border-top: 1px solid var(--line-soft); }

/* titoli e introduzioni delle sezioni senza una parola sola sull'ultima riga:
   "free" sotto "Tokens, and how to get them for" a 390px, "six." a 1280px */
.head h2 { text-wrap: balance; }
.head p { text-wrap: pretty; }

/* il paragrafo che introduce un elenco, sotto un titoletto */
.lead { margin: 0 0 .75rem; }

/* due gruppi uno sopra l'altro nella stessa colonna di .split */
.stack > * + * { margin-top: 2.2rem; }

/* ------------------------------------------------------------ come funziona */
/* Elenco numerato vero: il numero e' il marcatore della lista, quindi lo
   screen reader lo legge una volta sola, come numero del passaggio. */

.steps {
    margin: 0; padding: 0; list-style: decimal inside;
    display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps > li {
    margin: 0; padding: 1.05rem 1.25rem 1.3rem;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
}

.steps > li::marker { color: var(--accent); font-size: 1.35rem; font-weight: 600; }

.steps h3 { margin: .3rem 0 .45rem; font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.steps p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* ------------------------------------------------------------ screenshot */
/* le figure hanno una didascalia visibile sotto l'immagine */

.shots figure { margin: 0; }
.shots figcaption { margin-top: .6rem; font-size: .85rem; line-height: 1.4; color: var(--ink-mute); }
.shots img { border-radius: 8px; }

/* ----------------------------------------------------------------- lingue */

.langs { columns: 3; column-gap: 2rem; }
.langs li { break-inside: avoid; }
.langs span { color: var(--ink-mute); }

/* -------------------------------------------------------------- sicurezza */
/* e' un avvertimento, non una caratteristica: filetto ambra invece del lavanda */

.quote.warn { border-left-color: var(--accent-warm); max-width: 72ch; }
.quote.warn .bullets li::before { background: var(--accent-warm); }
.quote.warn .bullets { margin-bottom: 1.1rem; }

/* ----------------------------------------------------------------- tablet */

@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .langs { columns: 2; }
    /* home.css qui passa a due colonne: con schermate di telefono alte il
       doppio della larghezza, a 820px la sezione diventava alta 1500px.
       Quattro in fila fino al telefono, poi due. */
    .rcshots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- telefono */

@media (max-width: 620px) {
    .rchero .icon { width: 104px; height: 104px; margin-bottom: 1.2rem; }
    .rchero h1 { font-size: 1.9rem; }
    .rchero .tagline { margin: 1.1rem auto 1.8rem; }
    /* un negozio per riga, come su Azmar: nome a sinistra, sistema a destra */
    .rchero .stores { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .rcshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ainote { text-align: left; }
}