/* ui/shared/fx.css — Shared shape + depth language ("FX layer").
   The Destiny/Cyberpunk vocabulary layered on top of the mission-control palette
   in styles.css :root: notched/chamfered panels, corner brackets, layered glow,
   gradient sheen, and telemetry "furniture". All procedural — no external assets
   (architecture §1). Reusable primitives every overlay opts into; retheme = edit
   the tokens here + styles.css :root, never inline.

   Linked early in index.html (after styles.css) so its tokens cascade everywhere. */

:root {
  /* Shape */
  --fx-notch: 12px;            /* chamfer size for angular panels/buttons */
  --fx-bracket: 18px;          /* corner-bracket arm length */
  /* Hairlines (brighter + dimmer than the base --green-dim) */
  --fx-amber-line:     rgba(255, 176, 0, .55);
  --fx-amber-line-dim: rgba(255, 176, 0, .18);
  --fx-green-line:     rgba(51, 255, 102, .40);
  --fx-green-line-dim: rgba(51, 255, 102, .14);
  /* Texture */
  --fx-scan: rgba(51, 255, 102, .035);
  --fx-grid: rgba(51, 255, 102, .055);
  /* Depth: layered glow (close core + far bloom) */
  --fx-glow-amber: 0 0 28px rgba(255, 176, 0, .22), 0 0 7px rgba(255, 176, 0, .35);
  --fx-glow-green: 0 0 24px rgba(51, 255, 102, .20), 0 0 6px rgba(51, 255, 102, .30);
  /* Panel sheen: a directional highlight + a dark base, stacked → depth, not flat fill */
  --fx-sheen: linear-gradient(152deg, rgba(255, 176, 0, .055), rgba(10, 14, 42, 0) 46%),
              linear-gradient(0deg, rgba(8, 11, 34, .92), rgba(12, 17, 50, .62));
}

/* ── Notched panel ─────────────────────────────────────────────────────────────
   Angular chamfer on the top-left + bottom-right corners (Cyberpunk cut). The
   1px border follows the chamfer via the mask-composite "frame" trick so it never
   looks like a clipped-off rectangle. Set --fx-edge to recolor the hairline. */
.fx-panel {
  --fx-edge: var(--fx-green-line);
  position: relative;
  background: var(--fx-sheen);
  clip-path: polygon(
    var(--fx-notch) 0, 100% 0,
    100% calc(100% - var(--fx-notch)), calc(100% - var(--fx-notch)) 100%,
    0 100%, 0 var(--fx-notch));
}
.fx-panel::before {
  content: ''; position: absolute; inset: 0; padding: 1px; pointer-events: none;
  background: var(--fx-edge);
  clip-path: polygon(
    var(--fx-notch) 0, 100% 0,
    100% calc(100% - var(--fx-notch)), calc(100% - var(--fx-notch)) 100%,
    0 100%, 0 var(--fx-notch));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-panel.fx-amber { --fx-edge: var(--fx-amber-line); }

/* ── Corner brackets ───────────────────────────────────────────────────────────
   Two L-brackets on opposite corners — reads like a targeting reticle / Destiny
   node. Drawn as pseudo-elements so any box can opt in without extra DOM. */
.fx-brackets { position: relative; }
.fx-brackets::before, .fx-brackets::after {
  content: ''; position: absolute; width: var(--fx-bracket); height: var(--fx-bracket);
  pointer-events: none; border: 2px solid var(--amber); opacity: .9;
}
.fx-brackets::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.fx-brackets::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
.fx-brackets.fx-green::before, .fx-brackets.fx-green::after { border-color: var(--green); }

/* Four-corner bracket frame — a full-bleed targeting frame for overlay roots.
   An empty child (.fx-corners) draws 4 gradient corners so the root keeps its bg free. */
.fx-corners { position: absolute; inset: 14px; pointer-events: none; z-index: 0; }
.fx-corners::before, .fx-corners::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.fx-corners::before {
  background:
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 0 0    / 26px 2px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 0 0    / 2px 26px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 100% 0 / 26px 2px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 100% 0 / 2px 26px no-repeat;
}
.fx-corners::after {
  background:
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 0 100%    / 26px 2px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 0 100%    / 2px 26px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 100% 100% / 26px 2px no-repeat,
    linear-gradient(var(--fx-amber-line), var(--fx-amber-line)) 100% 100% / 2px 26px no-repeat;
}

/* ── Texture utilities ─────────────────────────────────────────────────────────
   Composable backgrounds for filling the void with intentional furniture. */
.fx-scanlines { background-image: repeating-linear-gradient(0deg, var(--fx-scan) 0 1px, transparent 1px 3px); }
.fx-grid {
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px);
  background-size: 46px 46px;
}
/* A grid that fades out from a focal point so it never reads as a flat tiled wall. */
.fx-grid-fade {
  -webkit-mask-image: radial-gradient(120% 120% at 22% 46%, #000 0%, rgba(0,0,0,.25) 55%, transparent 80%);
          mask-image: radial-gradient(120% 120% at 22% 46%, #000 0%, rgba(0,0,0,.25) 55%, transparent 80%);
}

/* ── Telemetry furniture ───────────────────────────────────────────────────────
   Tiny mono readouts that make negative space deliberate. */
.fx-telemetry {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px; letter-spacing: 2px; line-height: 1.7;
  text-transform: uppercase; color: var(--green); opacity: .5;
}
.fx-telemetry .fx-key { color: var(--amber); opacity: .8; }
/* Live status dot — green "nominal" pulse. */
.fx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green); vertical-align: middle; }
.fx-dot.fx-pulse { animation: fx-pulse 1.8s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Type scale — a display tier to contrast against the mono label tier. */
.fx-display {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700; letter-spacing: .14em; line-height: .92;
}

@media (prefers-reduced-motion: reduce) {
  .fx-dot.fx-pulse { animation: none; }
}