/* RIC-178 — token di tema condivisi di Ricognita.
 *
 * Un'unica fonte per colori e tipografia, linkata da ogni pagina (`<link rel="stylesheet"
 * href="tokens.css">`, nessun build step). Prima ogni file HTML ridichiarava il proprio
 * blocco `:root`, con nomi divergenti tra la Scrivania (`--bg` / `--text` / `--muted`) e la
 * landing + manuale (`--ground` / `--ink` / `--stone`). Ora i nomi sono uniformi ovunque.
 *
 * Chi tocca questo file: sono i colori del prodotto intero — verifica le pagine principali
 * (index, app, campo, sorveglianza, manuale) prima di considerare fatta una modifica. */
:root {
  color-scheme: dark;

  /* superfici */
  --bg: #0e1512;
  --panel: #151d19;
  --panel2: #1a2420;
  --border: #283530;

  /* testo */
  --text: #eef2ee;
  --muted: #93a89d;
  --muted-dim: #798b80;

  /* accento */
  --accent: #45c17f;
  --accent-deep: #1f6b45;
  --accent-soft: rgba(69, 193, 127, .15);
  /* RIC-426: due tinte in più solo per il bordo a gradiente dell'Assistente AI (sotto) —
     analoghe all'accento, non un secondo sistema di colori: --ai-2 è un teal vicino
     all'accento, --ai-3 riusa lo stesso ambra già presente sopra (--amber). */
  --ai-2: #45c1b8;

  /* colori semantici / naturalistici */
  --danger: #e0684f;
  --warn: #e0b84f;
  --earth: #c98a4b;
  --amber: #e0c56b;

  /* stati dei campi nella Scrivania (calcolato / bozza AI / da inserire, + avviso) */
  --green-bg: #173321;  --green-bd: #2f6b45;  --green-tx: #7fd99a;
  --yellow-bg: #332d17; --yellow-bd: #7a6a2f; --yellow-tx: #e0c56b;
  --red-bg: #331717;    --red-bd: #7a2f2f;    --red-tx: #e08a8a;
  --orange-bg: #332217; --orange-bd: #7a4f2f; --orange-tx: #e0a06b;

  /* tipografia */
  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* RIC-333 — box di controllo mappa condiviso: stesso aspetto e stessa struttura ovunque ci
 * sia una mappa (Scrivania, Campo, le mappe di sola lettura di mapview.js — Archivio,
 * dettaglio item, anteprima Pubblica, Sorveglianza). Prima ogni pagina aveva il proprio CSS
 * quasi identico (o, per mapview.js, controlli Leaflet a tema chiaro che non seguivano affatto
 * il tema scuro del resto del prodotto). Un solo posto per cambiare l'aspetto del box ovunque:
 * ricerca, coordinate, sfondo, zoom (sempre verticale — non è un'azione binaria come il
 * segmentato dello sfondo), GPS, livelli e misura usano tutti queste classi, non stili propri
 * per pagina. Nomi generici (mapCtrl*) apposta: non presuppongono quali controlli una pagina
 * userà, solo come deve apparire il box che li contiene. */
.mapCtrlBox{background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.4);padding:8px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text);}
.mapCtrlRow{display:flex;gap:6px;align-items:center;}
.mapCtrlToolsRow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;}
/* RIC-334: min-width:0 (non un floor reale) faceva collassare a 0 la larghezza "shrink to
 * fit" del box intero — un elemento flex:1 con min-width:0 contribuisce 0 al calcolo del
 * contenuto massimo del box quando il box stesso ha larghezza automatica (non più fissa a
 * 400px, vedi sotto). Un floor concreto (90px, abbastanza per lat/lon) risolve senza
 * impedire comunque all'input di allargarsi quando il box è più largo per via di altre righe. */
.mapCtrlBox input{flex:1;min-width:90px;padding:7px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;font-family:inherit;}
/* Bug reale corretto (revisione UX): padding aumentato per avvicinare il tap target reale
 * alle soglie minime raccomandate per un uso a pollice (44pt iOS/48dp Android) — prima
 * restava sotto i 34px, proprio nel box toccato più spesso mentre si cammina sul campo. */
.mapCtrlBtn{padding:11px 13px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px;white-space:nowrap;display:flex;align-items:center;font-family:inherit;}
.mapCtrlBtn:hover{border-color:var(--muted);}
.mapCtrlBtn[aria-pressed="true"]{background:var(--accent);color:#0c150f;border-color:var(--accent);}
.mapCtrlBtnPrimary{background:var(--accent);color:#0c150f;font-weight:600;border-color:var(--accent);}
.mapCtrlSeg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.mapCtrlSeg button{padding:8px 11px;border:none;border-left:1px solid var(--border);border-radius:0;background:var(--panel2);color:var(--muted);font-size:12.5px;cursor:pointer;font-family:inherit;}
.mapCtrlSeg button:first-child{border-left:none;}
.mapCtrlSeg button[aria-pressed="true"]{background:var(--accent);color:#0c150f;font-weight:700;}
.mapCtrlZoom{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.mapCtrlZoom button{padding:10px 15px;border:none;border-top:1px solid var(--border);border-radius:0;background:var(--panel2);color:var(--text);cursor:pointer;font-size:16px;line-height:1;font-weight:700;font-family:inherit;}
.mapCtrlZoom button:first-child{border-top:none;}
.mapCtrlHint{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:11.5px;color:var(--muted);}
/* RIC-334: banner "modalità attiva" (misura, disegno, interrogazione GNA…) — sempre in-flow
 * dentro il box, mai un overlay a posizione fissa: un overlay può finire sopra ai bottoni
 * degli strumenti stessi e bloccarne il click (bug reale, misura: il banner copriva 📏,
 * impedendo di rispegnerla). La × chiude sempre la modalità attiva, non solo il messaggio. */
.mapCtrlModeHint{display:none;align-items:center;gap:8px;background:var(--accent);color:#0c150f;font-weight:600;border-radius:8px;padding:8px 10px;font-size:12.5px;}
.mapCtrlModeHintClose{flex-shrink:0;margin-left:auto;background:none;border:none;color:#0c150f;font-size:17px;line-height:1;cursor:pointer;padding:0 2px;}
.mapCtrlInfo{color:var(--green-tx);font-weight:600;font-size:12.5px;}
.mapCtrlInfo:empty{display:none;}
.mapCtrlPopover{display:none;position:absolute;z-index:20;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.4);font-size:13px;color:var(--text);}
/* RIC-345: avatar del pulsante Account (Scrivania + Campo) — un cerchio con l'iniziale
   quando loggato, resta l'icona persona di default (markup statico) finché non loggato. */
.headerAvatar{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;margin-right:6px;flex-shrink:0;}
.headerAvatar.filled{background:var(--accent-deep);color:#eafff2;font-size:10px;font-weight:700;text-transform:uppercase;}
.headerAvatar.filled svg{display:none;}
/* RIC-350: pulsante "pillola" di header condiviso — prima Scrivania (.headerGhostBtn, in
   app.html) e Campo (.brandBackLink, in campo.html) ridichiaravano a mano lo stesso ruolo
   (icona/testo nell'header, stesso posto visivo) con raggio e riempimento leggermente
   diversi. Un solo posto da cui cambiare l'aspetto per entrambe le pagine. Il collasso a
   sola icona su mobile resta locale ad app.html (unico posto dove ogni pulsante ha
   un'icona SVG propria — "Manuale" in Campo è solo testo, non avrebbe nulla da mostrare). */
.headerPillBtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);cursor:pointer;font-size:12.5px;white-space:nowrap;text-decoration:none;font-family:inherit;}
.headerPillBtn:hover{border-color:var(--muted);}
.mapCtrlPopover .lp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.mapCtrlPopover .lp-title{font-weight:700;}
.mapCtrlPopover .lp-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:0;}
.mapCtrlPopover .lp-group{margin-bottom:14px;}
.mapCtrlPopover .lp-group + .lp-group{border-top:1px solid var(--border);padding-top:12px;}
.mapCtrlPopover .lp-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;}
.mapCtrlPopover label.lp-check{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;}
.mapCtrlPopover input[type=file]{width:100%;font-size:11px;margin-bottom:6px;}
.mapCtrlPopover .lp-note{margin-top:5px;color:var(--muted);font-size:11px;}

/* RIC-421→426 — card condivisa "Assistente AI": Materiale + Appunti/Genera come righe
 * statiche (mai collassabili, RIC-422) di un solo componente, letteralmente lo stesso in GNA
 * (#aiAssistCard, app.html) e nel report di Sorveglianza (#sorvAiAssistCard, app.html) —
 * definito una sola volta qui, come .mapCtrlBox sopra, non due copie da tenere allineate a
 * mano. Segnale grafico dell'AI (RIC-426, richiesta esplicita del founder — "qualcosa di
 * grafico", non altro testo): un bordo a gradiente animato che respira lentamente, invece del
 * riquadro verde in tinta unita di RIC-421/422. Richiede un <div class="aiAssistCardInner">
 * subito dentro (il gradiente vive sul contenitore esterno, il pannello vero è quello
 * interno — tecnica standard per un bordo sfumato con angoli arrotondati).
 */
.aiAssistCard{margin:14px 22px;border-radius:15px;padding:1.4px;background:linear-gradient(115deg,var(--accent),var(--ai-2) 45%,var(--amber) 80%,var(--accent) 100%);background-size:280% 280%;animation:aiEdgeFlow 14s ease infinite;box-shadow:0 16px 40px -26px rgba(69,193,127,.4);}
@keyframes aiEdgeFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@media (prefers-reduced-motion: reduce){.aiAssistCard{animation:none;}}
.aiAssistCardInner{background:var(--panel);border-radius:13.6px;overflow:hidden;}
.aiAssistRow{padding:14px 16px;}
.aiAssistRow + .aiAssistRow{border-top:1px solid var(--border);}
.aiAssistRowHead{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--text);}
.aiAssistRowHead svg{flex-shrink:0;color:var(--muted);}
.aiAssistRow label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin:0 0 5px;}
/* la sparkle a gradiente (riempimento url(#aiGrad), definito una volta nell'HTML) con un
 * bagliore che pulsa piano — solo sulla riga "Genera", l'unico punto dove l'AI agisce
 * davvero: non ha senso farla respirare anche accanto a "Materiale", che è solo selezione. */
.aiSparkle{width:17px;height:17px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(69,193,127,.5));animation:aiPulse 3.2s ease-in-out infinite;}
@keyframes aiPulse{0%,100%{filter:drop-shadow(0 0 3px rgba(69,193,127,.3));}50%{filter:drop-shadow(0 0 7px rgba(69,193,127,.6));}}
@media (prefers-reduced-motion: reduce){.aiSparkle{animation:none;filter:drop-shadow(0 0 3px rgba(69,193,127,.4));}}
/* Appunti e "Genera con l'AI" — stessa classe in GNA e Sorveglianza (prima erano stili
 * indipendenti: una textarea con CSS inline in GNA contro .field in Sorveglianza, un bottone
 * su .llmbox button contro .phaseCta — differenze reali, non solo percepite). */
.aiField{width:100%;resize:vertical;min-height:74px;border-radius:9px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-family:inherit;font-size:13px;line-height:1.5;padding:9px 11px;margin-bottom:8px;}
.aiField::placeholder{color:var(--muted-dim);}
.aiField:focus-visible{outline:none;border-color:var(--accent);}
.btnGenerate{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;border:none;background:linear-gradient(115deg,var(--accent),var(--ai-2) 70%);color:#0c150f;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;box-shadow:0 6px 16px -9px rgba(69,193,127,.6);}
.btnGenerate:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.btnGenerate svg{width:13px;height:13px;flex-shrink:0;}