/* Estetica allineata al design system AuraNova Group.
   Un solo accento azzurro su navy, Archivo ai due estremi (900 / 400),
   motivo a barre inclinate di -24 gradi, nessuna ombra morbida, nessun blur.
   Solo presentazione: classi e id usati da app.js restano invariati. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&display=swap");

:root {
  /* --- base --- */
  --navy: #0a1626;
  --navy-lift: #0d1d33;
  --navy-deep: #080f1d;
  --aura: #00adef;
  --white: #ffffff;

  /* --- stato: solo quando porta informazione --- */
  --green-confirm: #3ddc84;
  --red-error: #ff7a7a;
  --amber-warning: #ffc24b;

  /* --- rampa alpha su fondo scuro --- */
  --white-72: rgba(255, 255, 255, .72);
  --white-45: rgba(255, 255, 255, .45);
  --white-28: rgba(255, 255, 255, .28);
  --white-16: rgba(255, 255, 255, .16);
  --white-12: rgba(255, 255, 255, .12);
  --white-06: rgba(255, 255, 255, .06);
  --white-035: rgba(255, 255, 255, .035);

  /* --- superfici --- */
  --surface-page: var(--navy);
  --surface-deep: var(--navy-deep);
  --surface-card: var(--white-035);
  --surface-field: var(--white-06);
  --surface-hover: rgba(255, 255, 255, .05);
  --bg-immersive:
    radial-gradient(70% 55% at 22% 18%, rgba(0, 173, 239, .10), transparent 65%),
    linear-gradient(170deg, #0b1b31, var(--navy-deep) 60%);

  /* --- testo --- */
  --text-primary: var(--white);
  --text-secondary: var(--white-72);
  --text-muted: var(--white-45);
  /* alias necessario: app.js scrive color:var(--muted) inline sulla nota OCR */
  --muted: var(--white-45);

  /* --- linee e accento --- */
  --line: var(--white-12);
  --line-strong: var(--white-16);
  --line-hover: var(--white-28);
  --accent: var(--aura);
  --state-confirm: var(--green-confirm);
  --state-error: var(--red-error);
  --state-warning: var(--amber-warning);

  /* --- tipografia --- */
  --font-core: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-black: 900;
  --weight-bold: 800;
  --weight-semi: 600;
  --weight-regular: 400;
  --type-title-size: clamp(25px, 3.2vw, 34px);
  --type-eyebrow-tracking: .16em;
  --type-body-size: 15px;
  --type-body-leading: 1.5;
  --type-field-size: 15px;
  --measure-title: 16ch;
  --measure-body: 52ch;

  /* --- spaziatura: 8 / 14 / 24 / 40 / 64 / 104 --- */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
  --gutter: clamp(24px, 5vw, 64px);
  --shell: 720px;
  --stack: clamp(16px, 3vh, 26px);

  /* --- raggi --- */
  --radius-field: 10px;
  --radius-button: 12px;
  --radius-card: 14px;
  --radius-bar: 6px;
  --radius-bar-tight: 2px;

  /* --- effetti: le uniche due ombre del sistema sono aloni azzurri --- */
  --skew-signature: -24deg;
  --glow-accent: 0 14px 40px color-mix(in srgb, var(--aura) 45%, transparent);
  --glow-accent-strong: 0 20px 52px color-mix(in srgb, var(--aura) 60%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--aura) 22%, transparent);
  --focus-outline: 3px solid var(--white);
  --focus-outline-offset: 3px;

  /* --- movimento --- */
  --motion-ui: .25s;
  --motion-reveal: .7s;
  --motion-reveal-shift: 28px;
  --motion-drift: 9s;
  --motion-lift: 3px;
  --ease-core: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-ui: 0s;
    --motion-reveal: 0s;
    --motion-reveal-shift: 0px;
  }
}

/* --- base --- */
* { box-sizing: border-box; }

/* l'attributo hidden deve battere il display dei bottoni (#zip, #results) */
[hidden] { display: none !important; }

html { background: var(--navy); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-core);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  text-wrap: pretty;
  background: var(--bg-immersive);
  background-color: var(--navy);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

body.centered {
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

h1, h2 {
  margin: 0;
  font-weight: var(--weight-black);
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion-ui) var(--ease-core);
}
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--white); }

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* la seconda metà del titolo vira in azzurro: unico accento tonale nel testo */
.accent { color: var(--accent); }

.muted { color: var(--text-muted); }
.error { color: var(--state-error); }

/* --- il motivo: tre barre ascendenti, sempre sotto al testo --- */
.motif {
  position: fixed;
  right: 0;
  bottom: 0;
  width: min(52vw, 560px);
  height: min(64vh, 620px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.motif i {
  position: absolute;
  bottom: -8%;
  width: clamp(56px, 9vw, 104px);
  border-radius: var(--radius-bar);
  transform: skewX(var(--skew-signature));
  animation: auranova-drift var(--motion-drift) var(--ease-core) infinite;
}
.motif i:nth-child(1) {
  right: 44%;
  height: 58%;
  background: linear-gradient(to top, rgba(0, 173, 239, .10), transparent 92%);
  animation-delay: -3s;
}
.motif i:nth-child(2) {
  right: 24%;
  height: 78%;
  background: linear-gradient(to top, rgba(0, 173, 239, .14), transparent 92%);
  animation-delay: -1.5s;
}
.motif i:nth-child(3) {
  right: 4%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 173, 239, .20), transparent 92%);
}
/* il filo azzurro sul bordo della barra più alta */
.motif::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: -8%;
  width: 2px;
  height: 100%;
  border-radius: var(--radius-bar-tight);
  background: linear-gradient(to top, var(--aura), transparent 92%);
  opacity: .55;
  transform: skewX(var(--skew-signature));
  animation: auranova-drift var(--motion-drift) var(--ease-core) infinite;
}

@keyframes auranova-drift {
  0%, 100% { transform: skewX(var(--skew-signature)) translateY(0); }
  50%      { transform: skewX(var(--skew-signature)) translateY(-22px); }
}

/* lo stesso gesto, piccolo: il marchio a tre barre */
.mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  flex: none;
}
.mark i {
  display: block;
  width: 4px;
  border-radius: var(--radius-bar-tight);
  background: var(--aura);
  transform: skewX(var(--skew-signature));
}
.mark i:nth-child(1) { height: 10px; opacity: .5; }
.mark i:nth-child(2) { height: 15px; opacity: .75; }
.mark i:nth-child(3) { height: 20px; }

/* --- shell --- */
header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-deep);
  border-bottom: 1px solid var(--line);
}

.bar, main {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 19px; line-height: 1; }

main { padding-block: clamp(var(--space-4), 7vh, var(--space-5)) var(--space-6); }

/* --- dropzone: allineata a sinistra, l'asimmetria è il punto --- */
.dropzone {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: clamp(var(--space-3), 5vw, var(--space-5));
  text-align: left;
  transition:
    border-color var(--motion-ui) var(--ease-core),
    background-color var(--motion-ui) var(--ease-core),
    background-image var(--motion-ui) var(--ease-core);
}
/* l'azzurro arriva come luce, non come campitura */
.dropzone.over {
  border-color: var(--accent);
  background-color: var(--surface-card);
  background-image: radial-gradient(120% 110% at 50% 100%, rgba(0, 173, 239, .16), transparent 62%);
}
.dropzone p { margin: 0; }

.big {
  max-width: var(--measure-title);
  font-size: var(--type-title-size);
  font-weight: var(--weight-black);
  letter-spacing: -.02em;
  line-height: 1.05;
  text-wrap: balance;
  margin-bottom: var(--space-2) !important;
}
.dropzone .muted {
  max-width: var(--measure-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
.dropzone button { margin-top: var(--space-3); }

/* --- azioni --- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-core);
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--glow-accent);
  transition:
    transform var(--motion-ui) var(--ease-core),
    filter var(--motion-ui) var(--ease-core),
    box-shadow var(--motion-ui) var(--ease-core),
    border-color var(--motion-ui) var(--ease-core),
    background-color var(--motion-ui) var(--ease-core),
    color var(--motion-ui) var(--ease-core);
}
button:hover, .button:hover {
  transform: translateY(calc(var(--motion-lift) * -1));
  filter: brightness(1.08);
  box-shadow: var(--glow-accent-strong);
  color: var(--white);
}
button:active, .button:active { transform: translateY(-1px); }
button:disabled, .button:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: var(--glow-accent);
}

.button.ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--line-strong);
  box-shadow: none;
}
.button.ghost:hover {
  background: var(--surface-hover);
  border-color: var(--line-hover);
  color: var(--text-primary);
  box-shadow: none;
}

button.link {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:hover {
  background: none;
  box-shadow: none;
  transform: none;
  filter: none;
  color: var(--accent);
}

/* --- risultati --- */
#results { margin-top: var(--space-5); }

.results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.results-head h2 { font-size: 22px; }
/* il trattino dell'occhiello: lo stesso gesto delle barre */
.results-head h2::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: var(--radius-bar-tight);
  background: var(--aura);
  transform: skewX(var(--skew-signature));
}
.actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.actions .button { padding: 10px 18px; font-size: 13px; box-shadow: none; }
.actions .button:hover { box-shadow: var(--glow-accent); }
.actions .button.ghost:hover { box-shadow: none; }

.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* card piatte: hairline, 14px, riempimento bianco al 3.5%, nessuna ombra */
.job {
  display: flex;
  flex-wrap: wrap;   /* il messaggio d'errore va a capo invece di schiacciare il nome */
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color var(--motion-ui) var(--ease-core);
}
.job:hover { border-color: var(--line-hover); }
.job .name {
  order: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-semi);
}
.job .state { order: 2; }
.job .button { order: 3; }
.job .msg { order: 4; }

/* lo stato porta il colore solo perché porta informazione */
.job .state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 0;
}
.job.uploading .state,
.job.queued .state,
.job.running .state { color: var(--accent); }
.job.done .state { color: var(--state-confirm); }
.job.failed .state { color: var(--state-error); }

/* pallino a barra sugli stati fermi; su quelli in corso il posto è dello spinner */
.job.done .state::before,
.job.failed .state::before {
  content: "";
  width: 8px;
  height: 3px;
  flex: none;
  border-radius: var(--radius-bar-tight);
  background: currentColor;
  transform: skewX(var(--skew-signature));
}

.job .msg {
  flex: 1 0 100%;
  font-size: 13px;
  line-height: var(--type-body-leading);
  color: var(--state-error);
}
.job .button { padding: 8px 14px; font-size: 13px; box-shadow: none; }
.job .button:hover { box-shadow: var(--glow-accent); }
.job .button.ghost:hover { box-shadow: none; }

/* segno di vita: una barra della firma che pulsa, non una rotella */
.spinner {
  width: 4px;
  height: 13px;
  flex: none;
  display: inline-block;
  border-radius: var(--radius-bar-tight);
  background: currentColor;
  transform: skewX(var(--skew-signature));
  animation: auranova-pulse 1.2s var(--ease-core) infinite;
}
@keyframes auranova-pulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.footnote {
  max-width: var(--measure-body);
  margin-top: var(--space-4);
  font-size: 13px;
  line-height: var(--type-body-leading);
}
.footnote strong { color: var(--state-warning); font-weight: var(--weight-bold); }

/* --- accesso --- */
.card {
  position: relative;
  z-index: 3;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.login {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.login .mark { margin-bottom: var(--space-1); }
.login h1 { font-size: var(--type-title-size); letter-spacing: -.025em; }
.login .muted { max-width: var(--measure-body); }
.login input {
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface-field);
  color: var(--text-primary);
  font-family: var(--font-core);
  font-size: var(--type-field-size);
  transition:
    border-color var(--motion-ui) var(--ease-core),
    box-shadow var(--motion-ui) var(--ease-core),
    background-color var(--motion-ui) var(--ease-core);
}
.login input::placeholder { color: var(--text-muted); }
.login input:focus,
.login input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.login button { margin-top: var(--space-1); }

@media (max-width: 640px) {
  /* 16px sui campi, altrimenti iOS zooma al focus */
  .login input { font-size: 16px; }
}

@media (max-width: 560px) {
  /* il nome del file si prende la riga: stato e azioni scendono sotto */
  .job .name { flex: 1 0 100%; }
}

/* --- entrata: 28px in salita, in ordine di lettura --- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes auranova-rise {
    from { opacity: 0; transform: translateY(var(--motion-reveal-shift)); }
  }
  header,
  .dropzone,
  .footnote,
  .login > * {
    animation: auranova-rise var(--motion-reveal) var(--ease-core) both;
  }
  .dropzone { animation-delay: .13s; }
  .footnote { animation-delay: .32s; }
  .login > *:nth-child(1) { animation-delay: .05s; }
  .login > *:nth-child(2) { animation-delay: .18s; }
  .login > *:nth-child(3) { animation-delay: .32s; }
  .login > *:nth-child(4) { animation-delay: .46s; }
  .login > *:nth-child(5) { animation-delay: .59s; }
  .login > *:nth-child(6) { animation-delay: .72s; }
}

/* stampa ed export: il contenuto resta visibile, mai congelato a opacità 0 */
@media print {
  *, *::before, *::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .motif { display: none; }
}