/* Il finto sito fornitori. Deliberatamente **non** somiglia a open-form: se
   somigliasse, guardando la pagina non si capirebbe dove finisce il sito
   ospitante e dove comincia il questionario incorporato — che è la sola cosa
   che questa simulazione deve far vedere. */
:root {
  --sito-fg: #1c1917;
  --sito-fg-tenue: #78716c;
  --sito-fondo: #faf9f7;
  --sito-carta: #ffffff;
  --sito-bordo: #e7e5e4;
  --sito-accento: #7c2d12;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Georgia, "Times New Roman", serif;
  background: var(--sito-fondo); color: var(--sito-fg); line-height: 1.6;
}
.sito-testa {
  border-bottom: 3px double var(--sito-bordo); background: var(--sito-carta);
  padding: 1.1rem 1.5rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.sito-marchio { font-size: 1.25rem; letter-spacing: .02em; }
.sito-marchio span { color: var(--sito-fg-tenue); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.sito-nav { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; font-size: .9rem; }
.sito-nav a { color: var(--sito-accento); }
.sito-utente { color: var(--sito-fg-tenue); font-size: .85rem; }
.sito-corpo { max-width: 78rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.sito-corpo--largo { max-width: 88rem; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; font-weight: normal; }
.sito-sottotitolo { margin: 0 0 2rem; color: var(--sito-fg-tenue); }
.riquadro {
  background: var(--sito-carta); border: 1px solid var(--sito-bordo);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.riquadro h2 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: normal; }
.riquadro p.aiuto { margin: 0 0 1rem; color: var(--sito-fg-tenue); font-size: .9rem; }
label { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sito-fg-tenue); margin-bottom: .3rem; }
input[type="text"] {
  font: inherit; padding: .5rem .6rem; width: 100%; max-width: 26rem;
  border: 1px solid var(--sito-bordo); background: var(--sito-carta); color: inherit;
}
button {
  font: inherit; padding: .5rem 1.1rem; cursor: pointer; background: var(--sito-accento);
  color: #fff; border: 1px solid var(--sito-accento);
}
button.tenue { background: transparent; color: var(--sito-accento); }
button:disabled { opacity: .5; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--sito-bordo);
  vertical-align: top; }
th { font-weight: normal; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em;
  color: var(--sito-fg-tenue); }
code, .mono { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .85em; }
.vuoto { color: var(--sito-fg-tenue); font-style: italic; }

/* Il confine fra il sito e il questionario: si vede, ed è il punto. */
.incorporato {
  border: 1px dashed var(--sito-bordo); padding: 1.25rem; background: var(--sito-carta);
}
.incorporato-etichetta {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sito-fg-tenue); margin-bottom: .8rem;
}

/* Il cancello: quello che si vede prima del login, o quando va storto. */
.of-gate {
  max-width: 34rem; margin: 6rem auto; padding: 2rem; background: var(--sito-carta);
  border: 1px solid var(--sito-bordo); font-family: system-ui, sans-serif;
}
.of-gate h1 { font-size: 1.15rem; margin: 0 0 .6rem; }
.of-gate p { margin: 0; color: var(--sito-fg-tenue); }

@media (prefers-color-scheme: dark) {
  :root {
    --sito-fg: #f5f5f4; --sito-fg-tenue: #a8a29e; --sito-fondo: #1c1917;
    --sito-carta: #262322; --sito-bordo: #44403c; --sito-accento: #fdba74;
  }
  button { color: #1c1917; }
}