/* ════════════════════════════════════════════════════════════════════════
   Veriax — Agente · Generale · DIREZIONE D ("HUD / terminale di sistema")
   Direzione altamente tecnologica: la modifica agente come CONSOLE DI SISTEMA.
   Telemetria mono, cornici a parentesi (corner brackets), LED di stato,
   decrypt all'avvio, gauge di integrità, scan-sweep. Stessa logica live di C,
   stesso chrome/footer, accent #4e7cff — più un cyan di telemetria, parsimonioso.
   ════════════════════════════════════════════════════════════════════════ */
@import url("home.css");
@import url("next-theme.css");

:root {
  --hud-line:     rgba(110,150,235,.22);
  --hud-line-2:   rgba(110,150,235,.10);
  --hud-cyan:     #56d4ea;
  --hud-cyan-soft:rgba(86,212,234,.14);
  --hud-bg:       #07070c;
  --hud-panel-bg: rgba(19,21,32,.66);
  --hud-readout:  rgba(13,16,26,.78);
}
html[data-theme="light"] {
  --hud-line:     rgba(40,70,160,.26);
  --hud-line-2:   rgba(40,70,160,.10);
  --hud-cyan:     #0e88a0;
  --hud-cyan-soft:rgba(14,136,160,.12);
  --hud-bg:       #eaecf3;
  --hud-panel-bg: rgba(255,255,255,.82);
  --hud-readout:  rgba(255,255,255,.9);
}

/* ── Background: scanline + grid + glow ─────────────────────────────────── */
.main {
  background-color: var(--hud-bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(120,160,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(var(--hud-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-line-2) 1px, transparent 1px),
    radial-gradient(820px 460px at 82% -6%, rgba(78,124,255,.13), transparent 70%);
  background-size: 100% 3px, 100% 40px, 40px 100%, 100% 100%;
  background-attachment: fixed, scroll, scroll, fixed;
}
html[data-theme="light"] .main { background-image:
    repeating-linear-gradient(0deg, rgba(40,70,160,.022) 0 1px, transparent 1px 3px),
    linear-gradient(var(--hud-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hud-line-2) 1px, transparent 1px),
    radial-gradient(820px 460px at 82% -6%, rgba(78,124,255,.10), transparent 70%);
  background-size: 100% 3px, 100% 40px, 40px 100%, 100% 100%; }

/* fixed scan sweep overlay (element in JSX) */
.hud-scan {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(86,212,234,.05) 48%, rgba(86,212,234,.10) 50%, transparent 52%);
  background-size: 100% 220px; background-repeat: no-repeat;
  mix-blend-mode: screen; opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .hud-scan { animation: hudScan 7s linear infinite; }
  @keyframes hudScan { 0% { background-position: 0 -240px; } 100% { background-position: 0 100vh; } }
}
html[data-still] .hud-scan { display: none; }

/* mono everywhere it counts */
.ae-page, .hud-mono { font-feature-settings: "tnum" 1; }
.hud-mono { font-family: var(--mono); }

/* ── Chrome restyle (mono, technical) ───────────────────────────────────── */
.ae-chrome { background: color-mix(in oklab, var(--hud-bg) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hud-line); }
.breadcrumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.ae-head-thumb { background-image: var(--grad-accent); box-shadow: var(--glow-accent), inset 0 0 0 1px rgba(255,255,255,.12); border-radius: 10px; }
.ae-head-title { font-family: var(--mono); letter-spacing: -.01em; font-weight: 600; }
.ae-tabs { border-bottom-color: var(--hud-line); }
.ae-tab { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; }
.ae-tab.on::after { background-image: linear-gradient(90deg, var(--accent), var(--hud-cyan)); box-shadow: 0 0 12px var(--accent-ring); height: 2px; }

/* ── System telemetry bar ───────────────────────────────────────────────── */
.hud-tele {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--hud-line);
  border-radius: 10px;
  background: var(--hud-panel-bg);
  backdrop-filter: blur(8px);
  min-height: 62px;
}
.hud-tele-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 15px; min-width: 0; line-height: 1.25;
  border-right: 1px solid var(--hud-line-2);
}
.hud-tele-cell:last-child { border-right: 0; }
.hud-tele-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.hud-tele-v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hud-tele-v .cy { color: var(--hud-cyan); }
.hud-tele-spark { margin-left: auto; flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; }
.hud-tele-spark svg { width: 160px; height: 30px; }
.hud-led { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live-ring), 0 0 8px var(--live); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .hud-led { animation: hudLed 2.2s ease-out infinite; } }
@keyframes hudLed { 0%{box-shadow:0 0 0 0 var(--live-ring),0 0 8px var(--live)} 70%{box-shadow:0 0 0 6px transparent,0 0 8px var(--live)} 100%{box-shadow:0 0 0 0 transparent,0 0 8px var(--live)} }

/* ── Split ──────────────────────────────────────────────────────────────── */
.hud-split { display: grid; grid-template-columns: 396px minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .hud-split { grid-template-columns: 1fr; } }
.hud-aside { position: sticky; top: 188px; }
@media (max-width: 1100px) { .hud-aside { position: static; } }

/* ── Panel with corner brackets ─────────────────────────────────────────── */
.hud-panel {
  position: relative;
  border: 1px solid var(--hud-line);
  border-radius: 4px;
  background: var(--hud-panel-bg);
  backdrop-filter: blur(8px);
}
.hud-panel::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/2px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/2px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/2px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/14px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/2px 14px no-repeat;
  opacity: .85;
}
.hud-panel-h {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--hud-line-2);
}
.hud-code { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.hud-panel-title { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text-strong); letter-spacing: .01em; white-space: nowrap; }
.hud-panel-h .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hud-panel-h .grow { flex: 1; }
.hud-panel-b { padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }

.hud-status-line { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--hud-cyan); display: inline-flex; align-items: center; gap: 6px; }
.hud-status-line .d { width: 6px; height: 6px; border-radius: 50%; background: var(--hud-cyan); box-shadow: 0 0 8px var(--hud-cyan); }

/* ── Readout (left) — system scheda ─────────────────────────────────────── */
.hud-readout {
  position: relative; overflow: hidden;
  border: 1px solid var(--hud-line); border-radius: 6px;
  background:
    radial-gradient(120% 70% at 0 0, rgba(78,124,255,.14), transparent 55%),
    var(--hud-readout);
  backdrop-filter: blur(10px);
  box-shadow: var(--glow-accent);
}
.hud-readout .hud-panel-h { border-bottom-color: var(--hud-line); }
.hud-ro-top { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px; position: relative; }
.hud-ro-thumb {
  width: 58px; height: 58px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; position: relative; overflow: hidden;
  background-image: var(--grad-accent); color: #fff; font-family: var(--mono); font-weight: 700; font-size: 21px;
  box-shadow: var(--glow-accent), inset 0 0 0 1px rgba(255,255,255,.14);
}
.hud-ro-thumb::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.hud-ro-id { min-width: 0; flex: 1; }
.hud-ro-tipo { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.hud-ro-tipo .dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px -1px currentColor; }
.hud-ro-name { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; word-break: break-word; line-height: 1.15; }
.hud-ro-slug { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-ro-slug .pfx { color: var(--hud-cyan); }

/* integrity gauge */
.hud-gauge { padding: 0 16px 14px; }
.hud-gauge-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.hud-gauge-row > span, .hud-gauge-row b { white-space: nowrap; }
.hud-gauge-row b { color: var(--hud-cyan); font-weight: 600; }
.hud-gauge-bar { height: 6px; border-radius: 3px; background: rgba(120,160,255,.12); overflow: hidden; position: relative; }
.hud-gauge-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--hud-cyan)); width: var(--g,100%); }
@media (prefers-reduced-motion: no-preference) { .hud-gauge-bar > i { animation: hudFill 1.3s cubic-bezier(.2,.8,.2,1) both; } @keyframes hudFill { from { width: 0; } to { width: var(--g,100%); } } }

/* readout chips/pills */
.hud-strip { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 14px; }
.hud-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  background: rgba(120,160,255,.06); border: 1px solid var(--hud-line); color: var(--text-muted);
}
button.hud-pill { cursor: pointer; }
button.hud-pill:hover { border-color: var(--accent); color: var(--text); }
.hud-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.hud-pill.on { color: var(--live); border-color: color-mix(in oklab, var(--live) 36%, transparent); background: var(--live-soft); }
.hud-pill.on .d { background: var(--live); box-shadow: 0 0 8px var(--live); }

/* description readout (terminal) */
.hud-ro-desc { margin: 0 14px; padding: 13px 14px; border-top: 1px solid var(--hud-line-2); }
.hud-ro-desc .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.hud-ro-desc .lbl .ln { flex: 1; height: 1px; background: var(--hud-line-2); }
.hud-prev { font-size: 12.5px; line-height: 1.6; color: var(--text); max-height: 150px; overflow: auto; }
.hud-prev.empty { color: var(--text-faint); font-style: italic; }
.hud-prev p { margin: 0 0 7px; } .hud-prev p:last-child { margin: 0; }
.hud-prev ul { margin: 0; padding-left: 18px; } .hud-prev li::marker { color: var(--accent); }
.hud-prev strong { color: var(--text-strong); }
.hud-prev code { font-family: var(--mono); font-size: 11.5px; background: rgba(120,160,255,.1); border: 1px solid var(--hud-line-2); padding: 1px 5px; border-radius: 4px; color: var(--hud-cyan); }

/* spec readout grid */
.hud-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hud-line-2); border-top: 1px solid var(--hud-line-2); }
.hud-spec { background: var(--hud-readout); padding: 10px 16px; }
.hud-spec .k { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.hud-spec .v { font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.hud-spec .v .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ── Form (right) — terminal fields ─────────────────────────────────────── */
.hud-form { display: flex; flex-direction: column; gap: 18px; }
.hud-grid3 { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1.12fr) minmax(0,1.34fr); gap: 16px; }
@media (max-width: 720px) { .hud-grid3 { grid-template-columns: 1fr; } }

.hud-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hud-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.hud-label .code { color: var(--accent); font-size: 9.5px; letter-spacing: .08em; }
.hud-label .req { color: var(--hud-cyan); }
.hud-help { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: .02em; }

.hud-inwrap { position: relative; display: flex; align-items: center; height: 44px; background: rgba(8,10,18,.6); border: 1px solid var(--hud-line); border-radius: 5px; transition: border-color .14s, box-shadow .14s; }
html[data-theme="light"] .hud-inwrap { background: #ffffff; }
.hud-inwrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px -6px var(--accent-ring); }
.hud-inwrap .caret { padding: 0 4px 0 12px; color: var(--accent); font-family: var(--mono); }
.hud-inwrap .pfx { font-family: var(--mono); font-size: 13px; color: var(--text-faint); padding-left: 12px; }
.hud-inwrap input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--text); font-family: var(--mono); font-size: 13.5px; padding: 0 12px 0 4px; letter-spacing: .01em; }
.hud-inwrap input::placeholder { color: var(--text-faint); }
.hud-inwrap .tick { padding: 0 12px; color: var(--text-faint); display: flex; }
/* scanning focus underline */
.hud-inwrap::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:0; transition: opacity .15s; }
.hud-inwrap:focus-within::after { opacity:1; }

/* priorità segmented (mono) */
.hud-seg { display: flex; gap: 3px; padding: 3px; background: rgba(8,10,18,.5); border: 1px solid var(--hud-line); border-radius: 6px; height: 44px; }
html[data-theme="light"] .hud-seg { background: #ffffff; }
.hud-seg button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 0; border-radius: 4px; cursor: pointer; color: var(--text-muted); font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; padding: 0 4px; }
.hud-seg button:hover { color: var(--text); }
.hud-seg button.on { color: var(--text-strong); background: rgba(78,124,255,.14); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.hud-seg .pdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px -1px currentColor; }

/* tipo matrix */
.hud-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px,1fr)); gap: 10px; }
.hud-type {
  position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 13px 14px; border: 1px solid var(--hud-line); border-radius: 5px;
  background: rgba(10,12,20,.5); cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s, transform .12s;
}
html[data-theme="light"] .hud-type { background: #ffffff; }
.hud-type:hover { transform: translateY(-2px); border-color: var(--accent); }
.hud-type.on { border-color: var(--accent); background: rgba(78,124,255,.08); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(78,124,255,.6); }
.hud-type-thumb { width: 38px; height: 38px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; }
.hud-type-b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hud-type-code { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--text-faint); }
.hud-type-name { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.hud-type-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.hud-type .on-tag { position: absolute; top: 10px; right: 12px; display: none; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.hud-type.on .on-tag { display: inline-flex; }

/* description editor */
.hud-textarea { width: 100%; min-height: 150px; resize: vertical; background: rgba(8,10,18,.6); border: 1px solid var(--hud-line); border-radius: 5px; padding: 12px 14px; color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; outline: 0; transition: border-color .14s, box-shadow .14s; }
html[data-theme="light"] .hud-textarea { background: #ffffff; }
.hud-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hud-counter { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.hud-counter.warn { color: var(--warn); }

/* footer restyle */
.ae-formfoot { background: color-mix(in oklab, var(--hud-bg) 84%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--hud-line); }
.cap-foot-hint .kbd { font-family: var(--mono); background: rgba(120,160,255,.1); border-color: var(--hud-line-2); }
.btn.primary { background-image: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--hud-cyan) 60%, var(--accent))); border-color: transparent; box-shadow: var(--glow-accent); font-family: var(--mono); letter-spacing: .02em; }

/* ── Boot-in animation (finite, motion-safe) ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hudBoot { 0% { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
  .hud-tele { animation: hudBoot .5s ease both; }
  .hud-aside { animation: hudBoot .55s ease both .08s; }
  .hud-form > * { animation: hudBoot .5s ease both; }
  .hud-form > *:nth-child(2) { animation-delay: .14s; }
  .hud-form > *:nth-child(3) { animation-delay: .22s; }
}
html[data-still] .hud-tele, html[data-still] .hud-aside, html[data-still] .hud-form > *,
html[data-still] .hud-gauge-bar > i, html[data-still] .hud-led { animation: none !important; }
html[data-still] .hud-gauge-bar > i { width: var(--g,100%) !important; }

/* annotation reuse from next-theme.css (.skin-annot) */