/* Le pagine di accesso di FormaSolai: gli stessi colori, carattere e tasti dell'app (packages/app/DESIGN.md), in un
   foglio solo, al centro. Il tema è quello scelto nell'app (tema.js), o quello del sistema. */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(archivo.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: #e6edf3; --panel: #f3f7fa; --sheet: #ffffff; --line: #d8e1ea; --rule: #e5ebf1;
  --ink: #13202c; --ink2: #42546a; --ink3: #4f6175;
  --key: #ffffff; --edge: #bccad7; --on: #1c55a8; --on-ink: #ffffff; --on-edge: #123c7a;
  --accent: #1f5fbf; --accent-ink: #174a96; --soft: #e1ecfb; --hover: #e9f0f7;
  --err: #a8261e; --errbg: #fde8e6;
  --shadow-pop: 0 8px 22px rgba(16, 32, 48, 0.16);
  --font: "Archivo Variable", system-ui, "Segoe UI", sans-serif;
  --r: 7px; --r-isola: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-colori="ghiaccio"]) {
    --ground: #252b33; --panel: #2c333c; --sheet: #1e242b; --line: #3c4550; --rule: #343c46;
    --ink: #e6e9ed; --ink2: #bcc4cd; --ink3: #a9b2bc;
    --key: #3a424d; --edge: #171b21; --on: #2f6fd6; --on-ink: #ffffff; --on-edge: #1d4c99;
    --accent: #5b9bff; --accent-ink: #9cc2ff; --soft: #26374f; --hover: #343c47;
    --err: #ffb4ab; --errbg: #45201c;
    --shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

[data-colori="scuro"] {
  --ground: #252b33; --panel: #2c333c; --sheet: #1e242b; --line: #3c4550; --rule: #343c46;
  --ink: #e6e9ed; --ink2: #bcc4cd; --ink3: #a9b2bc;
  --key: #3a424d; --edge: #171b21; --on: #2f6fd6; --on-ink: #ffffff; --on-edge: #1d4c99;
  --accent: #5b9bff; --accent-ink: #9cc2ff; --soft: #26374f; --hover: #343c47;
  --err: #ffb4ab; --errbg: #45201c;
  --shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; }
body {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  font: 14px/1.5 var(--font); color: var(--ink); background: var(--ground);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-ink); }

.foglio {
  width: min(420px, 100%); padding: 28px 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-isola); box-shadow: var(--shadow-pop);
}

.marchio { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; margin-bottom: 20px; }
.mark { width: 22px; height: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; flex: none; }
.mark i { background: var(--on); border-radius: 2px; }
.mark i:nth-child(2) { background: var(--accent); }
[data-colori="scuro"] .mark i { background: var(--ink); }
[data-colori="scuro"] .mark i:nth-child(2) { background: var(--accent); }

h1 { font-size: 19px; font-weight: 650; line-height: 1.3; margin-bottom: 8px; }
p { color: var(--ink2); margin-bottom: 14px; }

form { display: grid; gap: 6px; margin-top: 4px; }
label { font-size: 13px; font-weight: 600; color: var(--ink2); margin-top: 6px; }
input {
  width: 100%; height: 38px; padding: 0 10px; font: inherit; color: inherit;
  background: var(--key); border: 1px solid var(--edge); border-radius: var(--r);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input.codice { font-size: 18px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

/* tasto con bordo, come nell'app: corsa di 2 px quando lo premi */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px;
  font: inherit; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--key); border: 1px solid var(--edge); border-bottom-width: 3px; border-radius: var(--r);
  transition: transform 90ms, border-bottom-width 90ms;
}
.key:hover { background: var(--hover); }
.key:active { transform: translateY(2px); border-bottom-width: 1px; }
.key.primario { background: var(--on); color: var(--on-ink); border-color: var(--on-edge); }
form .key { margin-top: 14px; width: 100%; }

.nota { padding: 9px 12px; border-radius: var(--r); font-size: 13px; }
.nota.errore { background: var(--errbg); color: var(--err); }
.nota.ok { background: var(--soft); color: var(--accent-ink); }
.sotto { margin: 16px 0 0; font-size: 13px; }

.passi { padding-left: 20px; color: var(--ink2); display: grid; gap: 10px; margin-bottom: 8px; }
/* il QR resta nero su bianco anche nel tema scuro: le app lo leggono meglio */
.qr { width: 176px; margin: 10px 0; padding: 6px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r); }
.qr svg { display: block; width: 100%; height: auto; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.chiave { display: inline-block; margin-top: 4px; padding: 2px 6px; background: var(--sheet); border-radius: 4px; color: var(--ink); word-break: break-all; }

.codici { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.codici code { display: block; padding: 6px 8px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; text-align: center; font-size: 14px; color: var(--ink); }
.tasti { display: flex; gap: 8px; }
.tasti .key { flex: 1; }