/* Los Cibos — il mondo visivo è quello della mensa: vassoio verde-petrolio, bancone d'acciaio,
   buono pasto giallo, scontrino. Un solo font (Bricolage Grotesque, ospitato in locale: nessuna
   richiesta a server di terzi). */

@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --vassoio: #0F6B5C;
  --vassoio-scuro: #0A4D42;
  --acciaio: #E8EDEE;
  --carta: #FFFFFF;
  --inchiostro: #12252B;
  --grigio: #5B6E73;
  --linea: #CBD5D7;
  --buono: #FFD23F;
  --buono-testo: #2B2200;
  --sugo: #C9342A;
  --su-vassoio: #FFFFFF;
  --raggio: 14px;
  --barra-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vassoio: #2FA48F; --vassoio-scuro: #0F6B5C; --acciaio: #0B1B1D; --carta: #132A2D;
    --inchiostro: #E6F0EE; --grigio: #9DB3B5; --linea: #25444A; --sugo: #FF6B5E; --su-vassoio: #04211C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --vassoio: #2FA48F; --vassoio-scuro: #0F6B5C; --acciaio: #0B1B1D; --carta: #132A2D;
  --inchiostro: #E6F0EE; --grigio: #9DB3B5; --linea: #25444A; --sugo: #FF6B5E; --su-vassoio: #04211C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--acciaio); color: var(--inchiostro);
  font: 400 1rem/1.5 "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + 24px);
  min-height: 100dvh;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }
h2 { font-size: 1.125rem; line-height: 1.25; font-weight: 700; }
a { color: var(--vassoio); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--buono); outline-offset: 2px; border-radius: 6px; }
#vista:focus, #vista:focus-visible { outline: none; }  /* il focus programmatico dopo ogni cambio vista non va evidenziato */
[hidden] { display: none !important; }

.testata, main, .avviso { max-width: 34rem; margin-inline: auto; padding-inline: 1rem; }
.testata { display: flex; align-items: baseline; justify-content: space-between; padding-block: 1rem 0.5rem; }
.marchio { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; text-decoration: none; color: var(--vassoio); }
.testata-io { font-size: 0.9375rem; font-weight: 600; }
main { display: grid; gap: 1.25rem; padding-top: 0.5rem; }
.caricamento { color: var(--grigio); padding-block: 3rem; text-align: center; }
.sotto { color: var(--grigio); font-size: 0.9375rem; }

/* avvisi di errore: sempre visibili, mai silenziosi */
.avviso { margin-block: 0.5rem; }
.avviso > div { background: var(--sugo); color: #fff; border-radius: var(--raggio); padding: 0.75rem 1rem; font-weight: 600; }

/* superfici */
.foglio { background: var(--carta); border-radius: var(--raggio); padding: 1rem; }
.foglio + .foglio { margin-top: -0.5rem; }

/* pulsanti */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
  min-height: 3rem; padding: 0.625rem 1rem; border: 0; border-radius: var(--raggio);
  background: var(--vassoio); color: var(--su-vassoio); font-weight: 700; text-decoration: none; text-align: center;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-buono { background: var(--buono); color: var(--buono-testo); }
.btn-quieto { background: transparent; color: var(--vassoio); border: 2px solid var(--linea); }
.btn-pericolo { background: var(--sugo); color: #fff; }
.btn-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* il "buono": invito principale a votare, con i fori del talloncino */
.buono {
  position: relative; display: block; text-decoration: none; background: var(--buono); color: var(--buono-testo);
  border-radius: var(--raggio); padding: 1.125rem 1.5rem;
}
.buono::before, .buono::after {
  content: ""; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: var(--acciaio); transform: translateY(-50%);
}
.buono::before { left: -9px; } .buono::after { right: -9px; }
.buono strong { display: block; font-size: 1.25rem; line-height: 1.2; font-weight: 750; }
.buono span { font-size: 0.9375rem; }

/* liste con barra del voto */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linea); border-radius: var(--raggio); overflow: hidden; }
.lista > li, .lista > li > button { background: var(--carta); }
.riga { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.75rem 1rem; }
.riga-pos { font-weight: 700; color: var(--grigio); text-align: center; }
.riga-nome { font-weight: 650; line-height: 1.25; }
.riga-media { font-weight: 750; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.riga-meta { grid-column: 2 / -1; display: flex; align-items: center; gap: 0.75rem; color: var(--grigio); font-size: 0.875rem; }
.misura { flex: 1; height: 8px; border-radius: 4px; background: var(--acciaio); overflow: hidden; }
.misura > i { display: block; height: 100%; background: var(--vassoio); border-radius: 4px; }

button.scelta {
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; width: 100%;
  border: 0; text-align: left; padding: 0.875rem 1rem; min-height: 3.25rem;
}
button.scelta[disabled] { color: var(--grigio); cursor: not-allowed; }
.scelta-nome { font-weight: 650; line-height: 1.25; }
.scelta-info { color: var(--grigio); font-size: 0.875rem; white-space: nowrap; }

/* filtri a pastiglia */
.pastiglie { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 4px; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
.pastiglie::-webkit-scrollbar { display: none; }
.pastiglia {
  flex: none; border: 2px solid var(--linea); background: var(--carta); border-radius: 999px;
  padding: 0.5rem 0.875rem; font-weight: 600; white-space: nowrap; min-height: 2.75rem;
}
.pastiglia[aria-pressed="true"] { background: var(--vassoio); border-color: var(--vassoio); color: var(--su-vassoio); }

/* campi */
.campo { display: grid; gap: 0.375rem; }
.campo label { font-weight: 650; }
.campo input[type="search"], .campo input[type="text"], .campo textarea {
  width: 100%; border: 2px solid var(--linea); border-radius: var(--raggio); background: var(--carta);
  padding: 0.75rem 1rem; min-height: 3rem;
}
.campo textarea { min-height: 5.5rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--vassoio); outline: none; }
.contatore { justify-self: end; font-size: 0.875rem; color: var(--grigio); font-variant-numeric: tabular-nums; }
.contatore.oltre { color: var(--sugo); font-weight: 700; }
.errore-campo { color: var(--sugo); font-weight: 600; font-size: 0.9375rem; }

/* il voto */
.voto-grande { text-align: center; }
.voto-grande output { display: block; font-size: 4.5rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.voto-grande p { min-height: 1.5em; font-weight: 600; }
input[type="range"] { width: 100%; height: 3rem; accent-color: var(--vassoio); margin: 0; }
.tacche { display: flex; justify-content: space-between; color: var(--grigio); font-size: 0.8125rem; padding-inline: 0.375rem; font-variant-numeric: tabular-nums; }

/* commenti */
.commento { display: grid; gap: 0.5rem; }
.commento-capo { display: flex; justify-content: space-between; gap: 0.75rem; font-weight: 650; line-height: 1.25; }
.commento-capo b { font-weight: 750; white-space: nowrap; }
.commento blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.45; overflow-wrap: anywhere; }
.commento-piede { display: flex; justify-content: space-between; align-items: center; color: var(--grigio); font-size: 0.875rem; }
.cuore { border: 2px solid var(--linea); background: transparent; border-radius: 999px; padding: 0.375rem 0.875rem; min-height: 2.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cuore[aria-pressed="true"] { border-color: var(--sugo); color: var(--sugo); }

/* lo scontrino: l'unico posto dove il design alza la voce */
.scontrino {
  background: #FFFDF5; color: #1d1d1d; padding: 1.5rem 1.25rem 2rem; margin-inline: 0.5rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 0.9375rem;
  --dente: 10px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--dente)) 51% repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente)) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--dente)) 51% repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente)) no-repeat;
}
.scontrino h1 { font: inherit; font-weight: 700; font-size: 1.125rem; text-align: center; letter-spacing: 0; }
.scontrino hr { border: 0; border-top: 2px dashed #1d1d1d55; margin: 0.875rem 0; }
.scontrino dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 1rem; }
.scontrino dt { overflow-wrap: anywhere; } .scontrino dd { margin: 0; text-align: right; font-weight: 700; }
.scontrino .totale { font-size: 1.5rem; }
.scontrino p { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .scontrino { animation: stampa 0.6s cubic-bezier(.2,.8,.2,1) both; transform-origin: top; }
  @keyframes stampa { from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); } to { clip-path: inset(0); transform: none; } }
}

/* testi lunghi (policy, aiuto) */
.prosa { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.55; }
.prosa code { font-family: inherit; font-weight: 700; user-select: all; }

/* barra di navigazione */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--carta); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom); height: calc(var(--barra-h) + env(safe-area-inset-bottom));
}
.barra a { display: grid; place-content: center; justify-items: center; gap: 2px; text-decoration: none; color: var(--grigio); font-size: 0.75rem; font-weight: 600; }
.barra a span { font-size: 1.25rem; line-height: 1; filter: grayscale(1); opacity: 0.75; }
.barra a[aria-current="page"] { color: var(--vassoio); }
.barra a[aria-current="page"] span { filter: none; opacity: 1; }
.barra .barra-vota { color: var(--buono-testo); }
.barra .barra-vota span { filter: none; opacity: 1; background: var(--vassoio); width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-content: center; margin-top: -1.375rem; border: 4px solid var(--carta); font-size: 1.375rem; }
.barra .barra-vota, .barra .barra-vota[aria-current="page"] { color: var(--inchiostro); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + 12px); transform: translate(-50%, 8px);
  background: var(--inchiostro); color: var(--acciaio); padding: 0.625rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.9375rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem); z-index: 20;
}
.toast.visibile { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }