/* ============================================================
   hud.css — tema "plancia" e vista HUD.

   Si attiva con data-theme="jarvis" sull'elemento radice.
   Ridefinisce le variabili del tema base, cosi tutta l'app cambia
   pelle, e aggiunge gli stili della vista dedicata.
   ============================================================ */

:root[data-theme="jarvis"] {
  /*
    Blu elettrico profondo, non ciano: è il colore del riferimento,
    ed è anche quello che distingue dai mille prodotti che usano tutti
    lo stesso azzurro acqua. L'ambra è la controparte calda — il
    contrasto freddo/caldo è quello che fa sembrare uno strumento
    vero invece di un disegno monocromatico.
  */
  --hud-1:    #3d8bff;
  --hud-2:    #1a5fd0;
  --hud-dim:  #12336b;
  --hud-deep: #071634;
  --hud-warn: #ffa227;
  --hud-bad:  #ff4d63;
  --hud-ok:   #2ff0a8;

  --caldo:      #ff9d2e;
  --caldo-tenue:#7a4a12;

  --bg:        #04070f;
  --bg-soft:   #070d1c;
  --card:      #091126;
  --card-2:    #0e1a35;
  --line:      #16336b;
  --line-soft: #0d1d3e;
  --text:      #d3e4ff;
  --text-dim:  #7d9ad0;
  --text-faint:#4a6296;

  --accent:      #3d8bff;
  --accent-soft: #0d1f47;
  --accent-text: #04070f;

  --ok:      #2ff0a8;
  --ok-soft: #052d24;
  --warn:    #ffb02e;
  --warn-soft:#2e2107;
  --danger:  #ff4d63;
  --danger-soft:#2e0d13;

  --shadow: 0 0 0 1px rgba(61,139,255,.07), 0 6px 26px rgba(0,0,0,.55);
  --shadow-lg: 0 0 40px rgba(61,139,255,.16), 0 18px 50px rgba(0,0,0,.7);

  --font: "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

/* Reticolo di fondo: appena percettibile, da' profondita' allo schermo. */
:root[data-theme="jarvis"] body {
  background-image:
    linear-gradient(rgba(61,139,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,139,255,.032) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(61,139,255,.07), transparent 62%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
}

:root[data-theme="jarvis"] .topbar h1,
:root[data-theme="jarvis"] .section-title,
:root[data-theme="jarvis"] .nav-btn,
:root[data-theme="jarvis"] .tab {
  letter-spacing: .06em;
  text-transform: uppercase;
}
:root[data-theme="jarvis"] .topbar h1 { font-size: 18px; }

:root[data-theme="jarvis"] .card,
:root[data-theme="jarvis"] .task,
:root[data-theme="jarvis"] .goal-card,
:root[data-theme="jarvis"] .set-row,
:root[data-theme="jarvis"] .day-col,
:root[data-theme="jarvis"] .appunto {
  border-radius: 4px;
  border-color: var(--line);
  background-image: linear-gradient(180deg, rgba(61,139,255,.035), transparent 60%);
}

:root[data-theme="jarvis"] .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; }
:root[data-theme="jarvis"] .btn-primary { box-shadow: 0 0 14px rgba(61,139,255,.4); }
:root[data-theme="jarvis"] .quick-input { border-radius: 3px; }
:root[data-theme="jarvis"] .mic { border-radius: 3px; }
:root[data-theme="jarvis"] .check { border-radius: 2px; }
:root[data-theme="jarvis"] .pill { border-radius: 2px; }
:root[data-theme="jarvis"] .ring-fg,
:root[data-theme="jarvis"] .bar-fill { filter: drop-shadow(0 0 5px var(--hud-1)); }

/* ============================================================
   Vista HUD
   ============================================================ */

.hud {
  --hud-1: var(--accent);
  color: var(--text);
  font-family: "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

/* ============================================================
   Fotogrammi condivisi

   L'unico resto della vecchia plancia a pannelli: i selettori se ne
   sono andati, i fotogrammi restano.

   hud-gira e hud-respira li chiamano reattore.css e scena.css, ma
   entrambi i file li ridefiniscono anche per conto proprio e, venendo
   caricati dopo questo, sono quelle versioni ad avere l'ultima parola.
   Queste tre valgono quindi come rete di sicurezza: hud-pulsa, in
   particolare, oggi non la chiama piu' nessuno.
   ============================================================ */

@keyframes hud-gira    { to { transform: rotate(360deg); } }
@keyframes hud-pulsa   { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes hud-respira { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ============================================================
   Reazione all'ascolto e alla voce

   Il reattore reagisce per conto suo (reattore.css). Qui restano solo
   i due punti fuori dalla plancia dove si deve comunque capire che
   sta succedendo qualcosa: il microfono si spegne mentre il modello
   ragiona, il marchio si accende mentre parla.
   ============================================================ */

body.sta-pensando .mic { opacity: .5; pointer-events: none; }

body.sta-ascoltando .mic,
body.sta-parlando .brand svg { filter: drop-shadow(0 0 10px var(--accent)); }

/* ---------- Taratura del microfono ---------- */

.mic-livello {
  height: 10px; background: var(--card-2);
  border-radius: 2px; overflow: hidden;
  position: relative; margin-top: 8px;
}
.mic-livello .barra {
  height: 100%; background: var(--accent);
  transition: width .06s linear;
}
.mic-livello .soglia {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px; background: var(--danger);
}

/* ============================================================
   Sequenza di avvio
   ============================================================ */

.avvio {
  position: fixed; inset: 0; z-index: 300;
  background: #030a0e;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  font-family: "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
  background-image:
    linear-gradient(rgba(61,139,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,139,255,.035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(61,139,255,.1), transparent 62%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
.avvio[hidden] { display: none; }
.avvio.esce { animation: avvio-via .55s ease forwards; }
@keyframes avvio-via { to { opacity: 0; visibility: hidden; } }

.avvio-anello svg { width: 132px; height: 132px; }
.av-base   { fill: none; stroke: #0d3f4a; stroke-width: 2; }
.av-vivo {
  fill: none; stroke: #29e0f2; stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 78 236;
  transform-origin: 60px 60px;
  filter: drop-shadow(0 0 8px #29e0f2);
  animation: av-gira 1.1s cubic-bezier(.5,.1,.5,.9) infinite;
}
@keyframes av-gira { to { transform: rotate(360deg); } }
.av-nucleo {
  fill: rgba(61,139,255,.14); stroke: #29e0f2; stroke-width: 1;
  animation: av-batte 1.6s ease-in-out infinite;
  transform-origin: 60px 60px;
}
@keyframes av-batte {
  0%,100% { opacity: .45; transform: scale(.9); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

.avvio-nome {
  font-size: 26px; font-weight: 700;
  letter-spacing: .55em; text-indent: .55em;
  color: #cdf5fb;
  text-shadow: 0 0 24px #29e0f2;
}

.avvio-righe {
  font-size: 11.5px; letter-spacing: .1em;
  color: #4e9dad;
  min-height: 92px; width: min(340px, 84vw);
  display: flex; flex-direction: column; gap: 4px;
}
.avvio-riga { display: flex; gap: 9px; animation: av-entra .22s ease; }
.avvio-riga .ok { color: #2ff0a8; }
.avvio-riga .val { margin-left: auto; color: #cdf5fb; }
@keyframes av-entra { from { opacity: 0; transform: translateX(-8px); } }