/* ════════════════════════════════════════════════════════════════════════
   Veriax — Agente · Generale · DIREZIONE E — LIGHT
   Reinterpreta il linguaggio "scheda di sistema vivente" su superficie chiara:
   pannelli a VETRO SMERIGLIATO bianco con bordo-luce, campo cool-white con
   bloom pastello, telemetria mono, accent IRIDESCENTE (più profondo per il
   contrasto su bianco) riservato agli stati live. Nessuna modifica strutturale
   o JS: si ridichiarano i token [data-dir="e"] e si ritoccano i pochi punti che
   inchiodano un esadecimale scuro. Caricato dopo styles-light.css.
   ════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"][data-dir="e"] {
  /* Iridescenza profonda per leggibilità su bianco */
  --cyan:        #0e96b8;
  --cyan-soft:   rgba(14, 150, 184, 0.12);
  --violet:      #7c5cf0;
  --irid:        linear-gradient(100deg, #4e7cff 0%, #19a6c2 52%, #8b6cf0 100%);
  --irid-soft:   linear-gradient(100deg, rgba(78,124,255,.12), rgba(25,166,194,.10) 52%, rgba(139,108,240,.12));
  --irid-text:   linear-gradient(100deg, #3a63e0 0%, #0e8fb0 50%, #6e49d6 100%);

  /* Vetro smerigliato bianco: i pannelli si sollevano dal campo grigio-chiaro */
  --glass-bg:    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,253,.96));
  --glass-bg-2:  linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,247,251,.86));
  --glass-edge:  inset 0 0 0 1px rgba(120,150,255,.16), 0 1px 2px rgba(24,26,44,.05), 0 10px 30px -18px rgba(40,60,140,.22);
  --glass-line:  rgba(120,140,200,.20);
  --glow-irid:   0 0 0 1px rgba(25,166,194,.35), 0 16px 44px -18px rgba(78,124,255,.32);
  --glow-cyan:   0 0 18px -4px rgba(14,150,184,.40);
  --bloom:       radial-gradient(760px 380px at 22% -4%, rgba(78,124,255,.10), transparent 66%),
                 radial-gradient(620px 420px at 96% 2%, rgba(139,108,240,.07), transparent 70%);
}

/* ── Campo chiaro sul contenitore di scroll ─────────────────────────────── */
html[data-theme="light"][data-dir="e"].app { background: #eef1f6; }
html[data-theme="light"][data-dir="e"] .main {
  background-color: #eef1f6;
  background-image:
    var(--bloom),
    linear-gradient(rgba(70,90,170,.045) 1px, transparent 1px),
    radial-gradient(rgba(70,90,170,.07) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 104px, 26px 26px;
  background-attachment: fixed, scroll, scroll;
  background-position: 0 0, 0 0, -1px -1px;
}

/* ── Chrome sticky: vetro bianco ────────────────────────────────────────── */
html[data-theme="light"][data-dir="e"] .ae-chrome {
  background: color-mix(in oklab, #ffffff 78%, transparent);
  backdrop-filter: blur(12px); border-bottom-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .ae-formfoot {
  background: color-mix(in oklab, #ffffff 80%, transparent);
  backdrop-filter: blur(12px); border-top-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .ae-head-thumb {
  background: radial-gradient(circle at 50% 25%, rgba(25,166,194,.20), rgba(78,124,255,.18));
  color: #0c4f7a;
  box-shadow: inset 0 0 0 1px rgba(78,124,255,.34), var(--glow-cyan);
}
html[data-theme="light"][data-dir="e"] .ae-head-sub { color: var(--text-faint); }

/* live pill */
html[data-theme="light"][data-dir="e"] .ge-livepill {
  background: var(--irid-soft); border-color: rgba(25,166,194,.40); color: var(--cyan);
}
html[data-theme="light"][data-dir="e"] .ge-livepill .d {
  background: var(--cyan); box-shadow: 0 0 8px 0 rgba(14,150,184,.6);
}

/* ── Scheda sistema — thumb ─────────────────────────────────────────────── */
html[data-theme="light"][data-dir="e"] .ge-ro-thumb {
  color: #0c4f7a;
  background: radial-gradient(circle at 50% 25%, rgba(25,166,194,.22), rgba(78,124,255,.18));
  box-shadow: inset 0 0 0 1px rgba(78,124,255,.34), var(--glow-cyan);
}

/* pills / strip su superficie chiara */
html[data-theme="light"][data-dir="e"] .ge-pill {
  background: #ffffff; border-color: var(--glass-line); color: var(--text-muted);
}
html[data-theme="light"][data-dir="e"] .ge-pill .d { background: var(--text-faint); }

/* mini-connessioni — tile chiare */
html[data-theme="light"][data-dir="e"] .ge-conn-ico {
  background: #ffffff; box-shadow: inset 0 0 0 1px var(--glass-line); color: var(--text-muted);
}
html[data-theme="light"][data-dir="e"] .ge-conn-ico.lit {
  color: var(--cyan); background: var(--cyan-soft); box-shadow: inset 0 0 0 1px rgba(14,150,184,.4);
}

/* code inline nell'anteprima */
html[data-theme="light"][data-dir="e"] .ge-prev code {
  background: #ffffff; border-color: var(--glass-line); color: var(--cyan);
}

/* ── Form: input / prefisso / has-pfx ───────────────────────────────────── */
html[data-theme="light"][data-dir="e"] .idn-input,
html[data-theme="light"][data-dir="e"] .idn-textarea {
  background: #ffffff; border-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .idn-input:focus,
html[data-theme="light"][data-dir="e"] .idn-textarea:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft);
}

/* segmented priorità + tipo cards */
html[data-theme="light"][data-dir="e"] .ge-seg {
  background: #ffffff; border-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .ge-seg button.on {
  background: var(--irid-soft); color: var(--text-strong); box-shadow: inset 0 0 0 1px rgba(25,166,194,.32);
}
html[data-theme="light"][data-dir="e"] .ty-card {
  background: #ffffff; border-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .ty-card:hover {
  border-color: transparent; background: #f7f9fd;
  box-shadow: var(--glass-edge), 0 0 0 1px rgba(25,166,194,.32);
}
html[data-theme="light"][data-dir="e"] .ty-card.on {
  border-color: transparent; background: #f7f9fd;
  box-shadow: 0 0 0 1px var(--cyan), var(--glow-cyan);
}

/* kbd footer + primary button (l'override scuro di E è illeggibile su bianco) */
html[data-theme="light"][data-dir="e"] .cap-foot-hint .kbd {
  background: #ffffff; border-color: var(--glass-line);
}
html[data-theme="light"][data-dir="e"] .ae-dirty.saved .dot {
  background: var(--cyan); box-shadow: 0 0 0 3px rgba(14,150,184,.2);
}
html[data-theme="light"][data-dir="e"] .btn.primary {
  background: var(--accent); border: 1px solid var(--accent); color: #ffffff;
}
html[data-theme="light"][data-dir="e"] .btn.primary:hover {
  background: var(--accent-2); border-color: var(--accent-2); color: #ffffff;
}

/* annotation card */
html[data-theme="light"][data-dir="e"] .skin-annot {
  border-color: var(--glass-line); background: var(--glass-bg-2);
}
html[data-theme="light"][data-dir="e"] .skin-annot .nb-tag {
  color: var(--cyan); background: transparent; border: 1px solid rgba(14,150,184,.4);
}