/* ============================================================
   Visière JARVIS : cadre HUD, réticule, jauge, légendes reliées.
   Tout est CSS et SVG léger. Se désactive en mouvement réduit.
   ============================================================ */

/* ---------- Cadre plein écran : équerres, règles, scan, vignette ---------- */
.hud-frame { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.hud-frame__corner {
  position: absolute; width: 26px; height: 26px; opacity: 0.55;
  border: 1px solid var(--jarvis-primary);
}
.hud-frame__corner--tl { top: calc(var(--sysbar-h) + 10px); left: 10px; border-right: 0; border-bottom: 0; }
.hud-frame__corner--tr { top: calc(var(--sysbar-h) + 10px); right: 10px; border-left: 0; border-bottom: 0; }
.hud-frame__corner--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.hud-frame__corner--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.hud-frame__corner::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--jarvis-primary); box-shadow: 0 0 8px var(--jarvis-primary-glow); }
.hud-frame__corner--tl::after { left: -2px; top: -2px; } .hud-frame__corner--tr::after { right: -2px; top: -2px; }
.hud-frame__corner--bl::after { left: -2px; bottom: -2px; } .hud-frame__corner--br::after { right: -2px; bottom: -2px; }
.hud-frame__ruler {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(520px, 50vw); height: 8px; opacity: 0.35;
  background: repeating-linear-gradient(90deg, var(--jarvis-primary) 0 1px, transparent 1px 12px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.hud-frame__ruler--top { top: calc(var(--sysbar-h) + 6px); }
.hud-frame__ruler--bottom { bottom: 8px; }
.hud-frame__ruler::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 14px; background: var(--jarvis-primary); }
.hud-frame__scan {
  position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px);
}
.hud-frame__sweep {
  position: absolute; left: 0; right: 0; height: 140px; top: -140px; opacity: 0.25;
  background: linear-gradient(180deg, transparent, rgba(19, 200, 255, 0.08), transparent);
  animation: hudSweep 9s linear infinite;
}
@keyframes hudSweep { to { transform: translateY(calc(100vh + 140px)); } }
.hud-frame__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3, 5, 8, 0.55) 100%); }

/* ---------- Réticule : jauge graduée autour du noyau, balayage radar ---------- */
.core__orbwrap { --gauge: 220px; }
.gauge { position: absolute; width: var(--gauge); height: var(--gauge); pointer-events: none; color: var(--jarvis-primary); }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.gauge > i { position: absolute; inset: 0; border-radius: 50%; display: block; }
.gauge__ticks { background: repeating-conic-gradient(from 0deg, currentColor 0 0.5deg, transparent 0.5deg 6deg); opacity: 0.35; -webkit-mask: radial-gradient(circle, transparent 47.5%, #000 48%, #000 50.5%, transparent 51%); mask: radial-gradient(circle, transparent 47.5%, #000 48%, #000 50.5%, transparent 51%); }
.gauge__major { background: repeating-conic-gradient(from -0.5deg, currentColor 0 1deg, transparent 1deg 30deg); opacity: 0.75; -webkit-mask: radial-gradient(circle, transparent 46.5%, #000 47%, #000 51.5%, transparent 52%); mask: radial-gradient(circle, transparent 46.5%, #000 47%, #000 51.5%, transparent 52%); }
.gauge__track { inset: 8px; border: 1.5px solid currentColor; opacity: 0.12; }
.gauge__arc { inset: 6px; --p: 0; --arc: var(--jarvis-primary); background: conic-gradient(var(--arc) calc(var(--p) * 1turn), transparent 0); -webkit-mask: radial-gradient(circle, transparent 46.5%, #000 47%, #000 49.5%, transparent 50%); mask: radial-gradient(circle, transparent 46.5%, #000 47%, #000 49.5%, transparent 50%); transition: --p 1.2s var(--ease), background 0.5s; }
.gauge__arc--halo { inset: 3px; opacity: 0.3; -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%, #000 50.5%, transparent 52%); mask: radial-gradient(circle, transparent 45%, #000 46%, #000 50.5%, transparent 52%); }
.gauge--warning .gauge__arc { --arc: var(--jarvis-warning); }
.gauge--danger .gauge__arc { --arc: var(--jarvis-danger); }
.gauge--success .gauge__arc { --arc: var(--jarvis-success); }
.gauge__label { position: absolute; top: -4px; left: calc(50% + 62px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--jarvis-text-muted); white-space: nowrap; }
.gauge__label b { color: var(--jarvis-text); font-weight: 600; }
.gauge__crosshair { position: absolute; inset: 0; opacity: 0.4; }
.gauge__crosshair::before, .gauge__crosshair::after { content: ""; position: absolute; background: var(--jarvis-primary); }
.gauge__crosshair::before { left: 50%; top: -10px; width: 1px; height: 10px; box-shadow: 0 calc(var(--gauge) + 10px) 0 var(--jarvis-primary); }
.gauge__crosshair::after { top: 50%; left: -10px; height: 1px; width: 10px; box-shadow: calc(var(--gauge) + 10px) 0 0 var(--jarvis-primary); }
.orb__sweep {
  position: absolute; inset: 8px; border-radius: 50%; pointer-events: none; opacity: 0.5;
  background: conic-gradient(from 0deg, transparent 0 290deg, rgba(19, 200, 255, 0.22) 350deg, rgba(19, 200, 255, 0.4) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, #000 68%, transparent 70%); mask: radial-gradient(circle, transparent 28%, #000 30%, #000 68%, transparent 70%);
  animation: spin 7s linear infinite;
}
.orb[data-state="awaiting"] ~ .orb__sweep, .orb[data-state="error"] ~ .orb__sweep, .orb[data-state="offline"] ~ .orb__sweep { animation-play-state: paused; opacity: 0.15; }
.orb[data-state="thinking"] ~ .orb__sweep { animation-duration: 3s; }
.orb[data-state="executing"] ~ .orb__sweep { animation-duration: 1.8s; opacity: 0.7; }

/* ---------- Visière : légendes reliées au réticule ---------- */
.visor { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; width: 100%; max-width: 1080px; margin: 0 auto; }
.visor__center { display: grid; justify-items: center; gap: 10px; }
.callout { position: relative; display: grid; gap: 6px; max-width: 300px; padding: 12px 14px; border: 1px solid rgba(19, 200, 255, 0.18); background: rgba(13, 17, 23, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.callout::before, .callout::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--jarvis-primary); opacity: 0.8; }
.callout::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.callout::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.callout--left { justify-self: end; text-align: right; }
.callout--right { justify-self: start; }
.callout__line { position: absolute; top: 50%; height: 1px; width: 44px; background: linear-gradient(90deg, var(--jarvis-primary), rgba(19, 200, 255, 0.2)); opacity: 0.8; transform-origin: left; animation: lineGrow 0.6s var(--ease) both; }
.callout--left .callout__line { left: 100%; }
.callout--right .callout__line { right: 100%; transform-origin: right; background: linear-gradient(270deg, var(--jarvis-primary), rgba(19, 200, 255, 0.2)); }
.callout__line::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--jarvis-primary); box-shadow: 0 0 8px var(--jarvis-primary-glow); }
.callout--left .callout__line::after { right: -3px; } .callout--right .callout__line::after { left: -3px; }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.callout__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--jarvis-primary); }
.callout__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.callout__sub { font-size: 12.5px; color: var(--jarvis-text-muted); }
.callout__row { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--jarvis-text-muted); }
.callout--left .callout__row { justify-content: flex-end; }
.callout__row b { color: var(--jarvis-text); font-weight: 600; }
.callout--warning { border-color: rgba(245, 165, 36, 0.35); } .callout--warning::before, .callout--warning::after, .callout--warning .callout__eyebrow { border-color: var(--jarvis-warning); color: var(--jarvis-warning); }
.callout--danger { border-color: rgba(255, 92, 108, 0.35); } .callout--danger .callout__eyebrow { color: var(--jarvis-danger); }
.callout .progress { margin-top: 2px; }
.callout__btn { justify-self: start; }
.callout--left .callout__btn { justify-self: end; }
.visor__readouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--jarvis-text-dim); text-transform: uppercase; }
.visor__readouts b { color: var(--jarvis-text-muted); font-weight: 500; }
.visor__readouts i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; background: var(--jarvis-text-dim); vertical-align: middle; }
.visor__readouts [data-level="ok"] i { background: var(--jarvis-success); box-shadow: 0 0 6px rgba(61, 220, 151, 0.6); }
.visor__readouts [data-level="degraded"] i { background: var(--jarvis-warning); }
.visor__readouts [data-level="down"] i { background: var(--jarvis-danger); }

/* Hors accueil : réticule compact, pas de légendes */
.stage:not([data-page="jarvis"]):not([data-page="home"]) .visor { display: contents; }
.stage:not([data-page="jarvis"]):not([data-page="home"]) .callout,
.stage:not([data-page="jarvis"]):not([data-page="home"]) .gauge,
.stage:not([data-page="jarvis"]):not([data-page="home"]) .orb__sweep,
.stage:not([data-page="jarvis"]):not([data-page="home"]) .visor__readouts { display: none; }
.stage:not([data-page="jarvis"]):not([data-page="home"]) .visor__center { display: contents; }

@media (max-width: 1280px) {
  .hud-frame__corner--tl, .hud-frame__corner--bl { left: calc(var(--rail-w-collapsed) + 10px); }
}
@media (max-width: 980px) {
  .hud-frame__corner--tl, .hud-frame__corner--bl { left: 10px; }
  .hud-frame__corner--bl, .hud-frame__corner--br { bottom: calc(var(--dock-h) + 70px); }
  .hud-frame__ruler--bottom { display: none; }
  .visor { grid-template-columns: 1fr; gap: 14px; }
  .callout, .callout--left, .callout--right { max-width: none; justify-self: stretch; text-align: left; }
  .callout--left .callout__row, .callout--left .callout__btn { justify-content: flex-start; justify-self: start; }
  .callout__line { display: none; }
  .core__orbwrap { --gauge: 176px; }
  .gauge__label { left: calc(50% + 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-frame__sweep, .orb__sweep, .callout__line { animation: none !important; }
}
html.no-motion .hud-frame__sweep, html.no-motion .orb__sweep, html.no-motion .callout__line { animation: none !important; }