/*
  Camillo — foglio di stile del sito.

  SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
  Copyright (c) 2026 Contardo Molteni

  IL SITO È UNA PRESENTAZIONE, NON UNA SCHEDA TECNICA. Si racconta cosa fa l'app,
  in prosa, con le figure accanto al testo che le riguarda. Niente tabelle di
  campi, niente numeri di capitolo, niente etichette in maiuscoletto: erano la
  forma di un documento di specifica, che dice al lettore «leggi le voci» invece
  di «guarda com'è».

  Il fondo è panna, non bianco: una pagina bianca è un foglio di lavoro, mentre
  la panna scalda quello che c'è sopra senza toglierle il contrasto. I titoli
  hanno le grazie, il testo no: è il tono di un libro di casa, non quello di un
  gestionale di magazzino: questa app tiene i dati di un animale di casa.

  IL TEMA È UNO SOLO, chiaro. Non c'è il blocco `prefers-color-scheme`, quindi
  `color-scheme: light` sotto dice al browser di non invertire niente: il sito
  resta panna anche su un sistema in tema scuro. È una scelta del 29 agosto 2026,
  non una dimenticanza.

  I colori vengono dall'app: l'ambra di `flutter/lib/app/theme.dart`
  (`camilloAmberLight` #D97706, lo stesso valore dell'asset `AccentColor`) e le
  otto tinte identitarie di `Camillo/Models/PetTint.swift`. L'ambra piena non
  basta come colore di testo su fondo chiaro (2,79:1 sulla panna): per testo e
  collegamenti si usa `--ambra-scritta` (5,19:1), mentre l'ambra piena resta per
  filetti e campiture, dove il contrasto non è in questione.

  NIENTE STILE IN LINEA, da nessuna parte: la `Content-Security-Policy` del
  server block dichiara `style-src 'self'`, che blocca gli attributi `style`. Le
  larghezze delle barre dei wireframe stanno quindi in classi (`.w-25` … `.w-85`)
  invece che negli attributi.
*/

:root {
  color-scheme: light;

  /* Panna, nei suoi tre toni */
  --panna: #F7EFE0;
  --panna-chiara: #FDF8EF;
  --panna-scura: #F0E5D2;
  --riga: #E3D6BE;
  --riga-tenue: #EDE3D2;

  /* Inchiostro, dai toni caldi dell'icona */
  --inchiostro: #2C2621;
  --inchiostro-2: #5C5348;
  --inchiostro-3: #6A6155;

  /* AccentColor / theme.dart */
  --ambra: #D97706;
  --ambra-scritta: #96530A;

  /* Il contorno dell'icona: la pietra scura dell'icona stessa, non un grigio
     qualunque. */
  --contorno-icona: #4A4744;

  /* PetTint.swift, le otto tinte identitarie */
  --tinta-ambra: #D97706;
  --tinta-terracotta: #C0603F;
  --tinta-rosa: #C2708C;
  --tinta-prugna: #8A6BA8;
  --tinta-indaco: #5A76B8;
  --tinta-petrolio: #3E8E8E;
  --tinta-salvia: #6E9A63;
  --tinta-sabbia: #8A7B66;

  /* La colonna di testo si ferma a 34rem, intorno ai 65 caratteri per riga. */
  --misura: 34rem;
  --pagina: 54rem;
  --raggio: 14px;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype",
           Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--panna);
  color: var(--inchiostro);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Il selettore di lingua nasconde una delle due versioni solo se JavaScript è
   vivo: senza, la pagina resta leggibile in entrambe, una sotto l'altra. */
html.js[data-lang="it"] [lang="en"],
html.js[data-lang="en"] [lang="it"] { display: none; }

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ambra-scritta);
  text-decoration-color: rgba(150, 83, 10, .35);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }

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

.wrap {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Barra in cima ───────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 239, 224, .93);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--riga);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.4rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--inchiostro);
  font: 600 1.1rem/1 var(--serif);
  text-decoration: none;
  margin-right: auto;
}
/* L'icona è quella dell'app, con il suo fondo pietra: sulla panna serve un
   contorno scuro, altrimenti il quadrato grigio galleggia sulla pagina senza
   appoggiarsi a niente. */
.brand img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--contorno-icona);
}

.top nav { display: flex; align-items: center; gap: 1.1rem; }
.top nav a { color: var(--inchiostro-2); text-decoration: none; font-size: .95rem; }
.top nav a:hover { color: var(--ambra-scritta); }

.lang-switch {
  display: inline-flex;
  background: rgba(44, 38, 33, .07);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--inchiostro-2);
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .04em;
  padding: .4rem .7rem;
  border-radius: 999px;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--panna-chiara); color: var(--inchiostro); }
html:not(.js) .lang-switch { display: none; }

/* ── Testata ─────────────────────────────────────────────────────────────── */

/* Una fascia appena più calda della pagina, non un blocco di colore pieno:
   l'app si presenta, non si annuncia. */
.hero {
  background: var(--panna-scura);
  border-bottom: 1px solid var(--riga);
  padding: 3.25rem 0 2.75rem;
  text-align: center;
}
.hero img {
  width: 92px;
  height: 92px;
  border-radius: 21px;
  border: 1.5px solid var(--contorno-icona);
  margin: 0 auto 1.35rem;
}
.hero h1 {
  margin: 0;
  font: 400 clamp(2.7rem, 8vw, 3.9rem)/1 var(--serif);
  letter-spacing: -.015em;
}
.hero .claim {
  margin: .85rem auto 0;
  max-width: 28rem;
  font: 400 clamp(1.1rem, 3vw, 1.35rem)/1.5 var(--serif);
  color: var(--inchiostro-2);
}
/* La riga che dice cosa fa l'app: sta sotto al claim, che invece dice il tono.
   Non è una didascalia, quindi non va rimpicciolita fino a sembrarlo. */
.hero .in-breve {
  margin: 1.5rem auto 0;
  max-width: 33rem;
  color: var(--inchiostro-2);
  font-size: 1.02rem;
}

/* ── Distribuzione ───────────────────────────────────────────────────────── */

/* I due distintivi non portano da nessuna parte: l'app non è pubblicata, quindi
   non esiste una scheda da aprire. Sono `<span>` e non collegamenti proprio per
   questo, perché un collegamento che non porta altrove è una promessa mancata,
   mentre la riga sotto dice a voce quello che il grigio suggerisce.

   Il distintivo di Apple si usa com'è: nessuna ombra, nessun angolo, nessun
   effetto al passaggio del mouse, altezza sopra i 40 px di minimo, spazio libero
   intorno pari almeno a un quarto dell'altezza. Vale lo stesso per quello di
   Google, che porta il proprio margine dentro l'immagine: le due localizzazioni
   ne hanno una quantità diversa, quindi si rendono a due altezze diverse perché
   il distintivo visibile risulti alto uguale (circa 50 px in tutti e quattro i
   casi). Ritagliare il margine sarebbe una modifica dell'opera, che le linee
   guida vietano. */
.distribuzione { padding: 2.25rem 0 0; }
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0 0 1.1rem;
}
.stores .badge { display: inline-block; line-height: 0; }
.stores .badge img { width: auto; }
.stores .badge-apple img { height: 50px; }
.stores .badge-google[lang="it"] img { height: 65px; }
.stores .badge-google[lang="en"] img { height: 74px; }
.stores .badge-soon { opacity: .5; filter: grayscale(1); }

.distribuzione p {
  margin: 0 auto .5rem;
  max-width: 33rem;
  text-align: center;
}
.distribuzione .minuta { color: var(--inchiostro-3); font-size: .88rem; }

/* ── Sezioni ─────────────────────────────────────────────────────────────── */

section { padding: 3.25rem 0 0; }
h2 {
  margin: 0 0 .8rem;
  font: 400 clamp(1.6rem, 4.5vw, 2.15rem)/1.2 var(--serif);
  letter-spacing: -.01em;
}
h3 {
  margin: 0 0 .5rem;
  font: 400 1.3rem/1.35 var(--serif);
}
section > .wrap > p { max-width: var(--misura); margin: 0 0 1rem; }
.lede {
  font: 400 1.25rem/1.6 var(--serif);
  color: var(--inchiostro);
  max-width: 36rem;
}
strong { font-weight: 640; }

/* ── Le cinque schermate ─────────────────────────────────────────────────── */

/* Testo e figura affiancati, con la figura che si specchia da una schermata
   all'altra. Sotto i 52rem tornano in colonna, con la figura sopra al testo. */
.schermata {
  display: grid;
  gap: 1.5rem 2.5rem;
  padding: 2.5rem 0 0;
}
.schermata .testo p { max-width: var(--misura); margin: 0 0 .9rem; }
.schermata .testo p:last-child { margin-bottom: 0; }
.schermata .figura { margin: 0 0 .5rem; max-width: 13rem; }

@media (min-width: 52rem) {
  .schermata {
    grid-template-columns: 1fr 13rem;
    /* Testo e figura partono dalla stessa riga: centrandoli, il testo corto
       scendeva in mezzo alla colonna e sopra restava un buco. */
    align-items: start;
    padding: 3rem 0 0;
  }
  .schermata .figura { margin: 0; max-width: none; }
  .schermata.specchiata { grid-template-columns: 13rem 1fr; }
  .schermata.specchiata .figura { order: -1; }
}

/* ── Wireframe delle schermate ───────────────────────────────────────────── */

/* Non è una cattura di schermo e non finge di esserlo: è l'impianto della
   schermata, disegnato con div e filetti. Le righe di testo sono barre, perché
   una barra non ha una lingua e non promette parole che l'app non dice; quello
   che invece è vero sta tutto qui dentro, cioè l'anello sulla dose consigliata,
   i pallini di stato, le tinte identitarie, i segni di spunta.

   La misura di base è il `font-size` del contenitore: tutto il resto è in `em`,
   quindi il wireframe si ingrandisce e si rimpicciolisce in blocco. */
.telefono {
  font-size: 9px;
  border: 1px solid var(--riga);
  border-radius: 1.9em;
  background: var(--panna-chiara);
  padding: .55em;
  overflow: hidden;
}
@media (min-width: 52rem) {
  .telefono { font-size: 10.5px; }
}
.telefono .schermo {
  border-radius: 1.5em;
  background: var(--panna-scura);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.telefono .barra-titolo {
  padding: 1.1em .9em .7em;
  font: 700 1.15em/1 var(--sans);
  background: var(--panna-chiara);
  border-bottom: 1px solid var(--riga-tenue);
}
.telefono .corpo { flex: 1; padding: .7em .6em; }
.telefono .gruppo {
  background: var(--panna-chiara);
  border: 1px solid var(--riga-tenue);
  border-radius: .8em;
  margin-bottom: .7em;
  overflow: hidden;
}
.telefono .intestazione { padding: .1em .2em .45em; }
.telefono .riga {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .6em .7em;
}
.telefono .riga + .riga { border-top: 1px solid var(--riga-tenue); }
.telefono .colonna { flex: 1; display: flex; flex-direction: column; gap: .35em; }
.telefono .barra { height: .5em; border-radius: .25em; background: var(--riga); }
.telefono .barra.tenue { background: var(--riga-tenue); }
.w-25 { width: 25%; } .w-35 { width: 35%; } .w-45 { width: 45%; }
.w-55 { width: 55%; } .w-70 { width: 70%; } .w-85 { width: 85%; }

.telefono .anello { flex: none; width: 2.6em; height: 2.6em; }
/* L'anello di progresso sulla dose consigliata è l'unico elemento della
   schermata Oggi che qui non è una barra: è la cosa che quella schermata fa. */
.telefono .anello .traccia { stroke: var(--riga); }
.telefono .anello .arco { stroke: var(--ambra); }
.telefono .pallino { flex: none; width: .75em; height: .75em; border-radius: 50%; }
.telefono .avatar {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 1px solid rgba(44, 38, 33, .08);
}
.telefono .spunta {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: .12em solid var(--riga);
}
.telefono .spunta.fatta { border-color: var(--tinta-salvia); background: var(--tinta-salvia); }
.telefono .data {
  flex: none;
  color: var(--inchiostro-3);
  font: 700 1.1em/1 var(--sans);
}
.telefono .segmenti {
  display: flex;
  gap: .25em;
  background: var(--riga-tenue);
  border-radius: .5em;
  padding: .2em;
  margin-bottom: .7em;
}
.telefono .segmenti span { flex: 1; height: 1.1em; border-radius: .35em; }
.telefono .segmenti .attivo { background: var(--panna-chiara); }
.telefono .tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: .6em 0 .8em;
  background: var(--panna-chiara);
  border-top: 1px solid var(--riga-tenue);
}
.telefono .tabbar i { width: 1.1em; height: 1.1em; border-radius: .3em; background: var(--riga); }
.telefono .tabbar i.qui { background: var(--ambra); }

.figura figcaption {
  margin: .55rem 0 0;
  color: var(--inchiostro-3);
  font-size: .8rem;
  text-align: center;
}

/* Tinte identitarie: servono agli avatar e ai pallini di stato dentro i
   wireframe: restano le stesse otto che l'app propone per un animale. */
.t-ambra { background: var(--tinta-ambra); }
.t-terracotta { background: var(--tinta-terracotta); }
.t-rosa { background: var(--tinta-rosa); }
.t-prugna { background: var(--tinta-prugna); }
.t-indaco { background: var(--tinta-indaco); }
.t-petrolio { background: var(--tinta-petrolio); }
.t-salvia { background: var(--tinta-salvia); }
.t-sabbia { background: var(--tinta-sabbia); }

/* ── Domande ─────────────────────────────────────────────────────────────── */

/* Le otto voci in coda sono domande di chi legge, con la risposta sotto. Sono
   riquadri e non righe di tabella: una tabella si consulta, un riquadro si
   legge di sfuggita, che è quello che si fa in fondo a una pagina. */
.domande {
  display: grid;
  gap: 1rem;
  /* Due colonne, non tre: in tre la riga si accorcia sotto i quaranta caratteri
     e la risposta diventa un colonnino da giornale. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.domanda {
  background: var(--panna-chiara);
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  padding: 1.15rem 1.3rem;
}
.domanda h3 {
  margin: 0 0 .4rem;
  font: 400 1.15rem/1.35 var(--serif);
  color: var(--ambra-scritta);
}
.domanda p { margin: 0; font-size: .95rem; color: var(--inchiostro-2); }

/* ── Nota ────────────────────────────────────────────────────────────────── */

.nota {
  margin: 1.5rem 0 0;
  max-width: 42rem;
  border: 1px solid var(--riga);
  border-left: 3px solid var(--ambra);
  border-radius: var(--raggio);
  background: var(--panna-chiara);
  padding: 1.35rem 1.5rem;
}
.nota h3 { margin: 0 0 .6rem; }
.nota p { margin: 0 0 .7rem; max-width: var(--misura); }
.nota ul { margin: 0 0 .7rem; padding-left: 1.15rem; color: var(--inchiostro-2); max-width: var(--misura); }
.nota li { margin-bottom: .35rem; }
.nota p:last-child, .nota ul:last-child { margin-bottom: 0; }

/* ── Piè di pagina ───────────────────────────────────────────────────────── */

footer {
  margin-top: 4rem;
  border-top: 1px solid var(--riga);
  padding: 2rem 0 3rem;
  color: var(--inchiostro-3);
  font-size: .9rem;
}
footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
footer p { max-width: var(--misura); margin: 0 0 .6rem; }
/* La firma è quella che l'app stampa in fondo ai suoi PDF. */
footer .firma { margin-top: 1.25rem; color: var(--inchiostro-3); }

/* ── Pagine di documento (informativa, note legali) ──────────────────────── */

.doc { padding-top: 2.75rem; }
.doc h1 {
  margin: 0 0 .3rem;
  font: 400 clamp(1.9rem, 5vw, 2.5rem)/1.2 var(--serif);
  letter-spacing: -.01em;
}
.doc .sub { margin: 0 0 2.5rem; color: var(--inchiostro-3); font-size: .95rem; }
.doc h2 {
  margin: 2.5rem 0 .6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--riga-tenue);
  font: 600 1.05rem/1.4 var(--sans);
}
.doc h3 { margin: 1.5rem 0 .35rem; font-size: 1.05rem; }
.doc p { max-width: var(--misura); margin: 0 0 1rem; }
.doc ul { max-width: var(--misura); margin: 0 0 1rem; padding-left: 1.15rem; }
.doc li { margin-bottom: .45rem; }
.doc code {
  font: .88em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panna-scura);
  border-radius: 3px;
  padding: .1em .35em;
}