/**
 * CyberSOC console — light HUD.
 *
 * The brief asked for cinematic sci-fi neon. The site background stays white
 * and blue, so the neon is carried by signal colour,
 * holographic edges and a blueprint grid rather than by darkness. Think a lit
 * laboratory rather than a night city: the accents glow because everything
 * around them is clean, not because the room is black.
 *
 * Two tones per accent. The bright ones are for graphics only — #06b6d4 on
 * white is 2.4:1 and unreadable as text — and the deep ones carry type.
 *
 * Scoped hard to .cybersoc. Nothing here reaches the rest of the site.
 */

.cybersoc {
  /* One accent, as the references do: a single electric blue against neutral
     navy, with hierarchy carried by size and weight rather than by hue. Two
     tones only because #0ea5e9 is 2.9:1 on white and cannot hold type —
     the lit tone is for graphics, the deep one for text and fills. */
  --k-accent-lit: #0ea5e9;
  --k-accent: #1668ad;

  --k-cyan-lit: var(--k-accent-lit);
  --k-blue-lit: var(--k-accent-lit);
  --k-cyan: var(--k-accent);
  --k-blue: var(--k-accent);

  --k-bg: #ffffff;
  --k-bg-2: #eef5fd;
  --k-panel: rgba(255, 255, 255, 0.76);
  --k-edge: rgba(30, 115, 190, 0.2);
  --k-edge-lit: rgba(30, 115, 190, 0.42);

  --k-ink: #0b1b3a;
  --k-dim: #465a7a;
  --k-faint: #55688a;

  /* The plugin and theme resolve their own tokens through these, so this is
     what recolours every widget inside without touching either. */
  --void: var(--k-bg);
  --base: var(--k-bg-2);
  --surface: var(--k-panel);
  --raised: rgba(30, 115, 190, 0.07);
  --line: var(--k-edge);
  --ink: var(--k-ink);
  --ink-dim: var(--k-dim);
  --ink-faint: var(--k-faint);
  --red: var(--k-blue);
  --red-hot: #1e73be;
  --blue: var(--k-cyan);
  --cyan: var(--k-cyan);

  --c-ink: var(--k-ink);
  --c-dim: var(--k-dim);
  --c-faint: var(--k-faint);
  --c-line: var(--k-edge);
  --c-rule: var(--k-edge-lit);
  --c-surface: var(--k-panel);
  --c-raised: rgba(30, 115, 190, 0.07);
  --c-red: var(--k-blue);
  --c-blue: var(--k-cyan);

  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 1px;
  color: var(--k-ink);
  overflow: hidden;
  /* Plain white. The coloured blooms are gone: the panels, the charts and
     the radar carry the colour now, and a tinted ground was competing with
     them rather than supporting them. */
  background: #ffffff;
}

/* ---- Atmosphere ---------------------------------------------------------- */

.cybersoc__grain,
.cybersoc__grid,
.cybersoc__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* A receding ground plane, not graph paper.
   Two flat grids at 56px and 14px read as an engineering sheet: uniform,
   flat, and the opposite of futuristic. This is one grid laid down in
   perspective so the lines converge toward a horizon, which is what gives
   the band depth instead of texture. */
.cybersoc__grid {
  perspective: 320px;
  perspective-origin: 50% 0%;
  overflow: hidden;
}

.cybersoc__grid::after {
  content: "";
  position: absolute;
  inset: 42% -60% -70% -60%;
  transform: rotateX(74deg);
  transform-origin: 50% 0%;
  background-image:
    linear-gradient(rgba(30, 115, 190, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 115, 190, 0.2) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 58%);
}

/* Aurora and range rings go with the tint: on a white ground they read as a
   wash rather than as atmosphere. The perspective floor stays, because it is
   structure rather than colour. */
.cybersoc__grain,
.cybersoc__scan {
  display: none;
}

.cybersoc > *:not([aria-hidden]) {
  position: relative;
  z-index: 1;
}

/* Type is the theme's: Space Grotesk for display, Inter for body, JetBrains
   Mono for data. The console changes colour and surface, not voice. */

/* ---- Width --------------------------------------------------------------
   The site column is measured for prose, where a long line is tiring to
   read. A dashboard has the opposite problem: a map and a treemap squeezed
   into a reading measure waste the screen. The console gets its own, wider
   column, and the head keeps the narrow one so the headline still reads. */

.cybersoc .wrap {
  max-width: 1560px;
  padding-inline: clamp(24px, 3vw, 48px);
}

@media (min-width: 1200px) {
  /* The donut and the regional field share the row under the map. */
  .cybersoc .cti--global .cti-two {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---- Spacing -------------------------------------------------------------
   The head, the section and the step marker each brought their own top
   padding, which stacked to over 200px of blank between the buttons and the
   first station. The head already separates them; the section does not need
   to as well. */

.cybersoc .section {
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.cybersoc .cyber-step {
  padding-top: clamp(18px, 2.2vw, 30px);
}

.cybersoc .cyber-step::before {
  height: calc(clamp(18px, 2.2vw, 30px) - 4px);
}

/* ---- Panels -------------------------------------------------------------- */

/* Glass over the grid, with an iridescent top edge. Drawn as a pseudo-element
   because border-image cannot follow a rounded corner. */
/* Cut corners, top-left and bottom-right.
   A real border cannot follow a clip-path, so the edge is an inset shadow:
   inset shadows are clipped by clip-path and therefore trace the chamfer,
   where a border would be sliced off at the cut. */
.cybersoc .cti-card,
.cybersoc .cti--sector,
.cybersoc .vta-panel {
  position: relative;
  border: 0;
  border-radius: 0;
  background: var(--k-panel);
  backdrop-filter: blur(12px) saturate(1.25);
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
  box-shadow:
    inset 0 0 0 1px var(--k-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 44px -28px rgba(11, 27, 58, 0.5);
}

/* The cut itself, struck in the accent so the corner reads as machined
   rather than as a rounding error. */
.cybersoc .cti-card::after,
.cybersoc .cti--sector::after,
.cybersoc .vta-panel::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 30px;
  height: 1px;
  transform: rotate(-45deg);
  background: var(--k-accent-lit);
  opacity: 0.85;
}

.cybersoc .cti-card::before,
.cybersoc .cti--sector::before,
.cybersoc .vta-panel::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--k-accent-lit), transparent 70%);
}

/* ---- Signals ------------------------------------------------------------- */

.cybersoc .cti-fig__n,
.cybersoc .cti-lead__k {
  color: var(--k-cyan);
}

/* The second blue is reserved for the figure that should stand out. Used
   everywhere it would stop meaning anything. */
.cybersoc .cti-fig--alert .cti-fig__n,
.cybersoc .cti-since__n,
.cybersoc .cti-claim b {
  color: var(--k-blue);
}

/* The neon lives in the graphics, where brightness costs no legibility. */
.cybersoc .cti-bars__track i {
  box-shadow: 0 0 16px -3px currentColor;
  filter: saturate(1.4);
}

.cybersoc .cti-bars__track,
.cybersoc .cti-dumb__track {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(30, 115, 190, 0.09) 0 4px,
    transparent 4px 8px
  );
  border-bottom-color: var(--k-edge-lit);
}

.cybersoc .cti-dumb__dot.is-local {
  background: var(--k-blue-lit);
  box-shadow: 0 0 14px 1px rgba(47, 143, 216, 0.55);
}

.cybersoc .cti-source__mark {
  background: var(--k-cyan-lit);
  box-shadow: 0 0 10px 1px rgba(6, 182, 212, 0.7);
}

/* Only the data bar, never the invisible hit target stacked over it. A bare
   `rect` selector here outranks .cti-spark__hit and paints the whole column. */
.cybersoc .cti-spark [data-day] rect:first-child {
  fill: var(--k-cyan-lit);
}

.cybersoc .cti-spark [data-day].is-peak rect:first-child {
  fill: var(--k-blue-lit);
}

.cybersoc .cti-spark .cti-spark__hit {
  fill: transparent;
}

.cybersoc .cti-spark__axis,
.cybersoc .cti-spark__tick {
  stroke: var(--k-edge-lit);
}

/* ---- Controls ------------------------------------------------------------ */

.cybersoc .cti-sector__pick select {
  border-color: var(--k-edge-lit);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--k-ink);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.cybersoc .cti-sector__pick select:focus-visible {
  outline: 2px solid var(--k-cyan-lit);
  box-shadow: 0 0 20px -4px var(--k-cyan-lit);
}

.cybersoc .cti-chips li {
  border-color: var(--k-edge);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
}

/* Powered-on rather than a clickable rectangle. */
.cybersoc .cti-cta,
.cybersoc .btn-primary,
.cybersoc .cyber-step span,
.cybersoc .cti-dumb__x,
.cybersoc .cti-ticker__label {
  background: linear-gradient(135deg, var(--k-blue), #124a7c);
  box-shadow: 0 0 26px -8px var(--k-blue-lit);
  border-radius: 2px;
}

.cybersoc .cti-cta,
.cybersoc .btn-primary {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cybersoc .cti-cta:hover,
.cybersoc .btn-primary:hover {
  background: linear-gradient(135deg, #1e73be, var(--k-blue));
  box-shadow: 0 0 36px -6px var(--k-blue-lit);
}

.cybersoc .btn-ghost {
  border-radius: 2px;
  border-color: var(--k-edge-lit);
  background: rgba(255, 255, 255, 0.8);
  color: var(--k-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.cybersoc .btn-ghost:hover {
  border-color: var(--k-cyan-lit);
  background: rgba(6, 182, 212, 0.08);
}

/* ---- Structure ----------------------------------------------------------- */

.cybersoc .section-alt,
.cybersoc .vta-bleed,
.cybersoc .vta-seam,
.cybersoc .vta-seam-end {
  background: transparent;
}

.cybersoc .vta-seam,
.cybersoc .vta-seam-end {
  height: 24px;
}

.cybersoc .cti-tb {
  border-color: var(--k-edge-lit);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.cybersoc .cti-tb__cell,
.cybersoc .cti-list li {
  border-color: var(--k-edge);
}

.cybersoc .cti-scale {
  border-color: var(--k-edge);
  border-radius: 2px;
  background: var(--k-edge);
}

.cybersoc .cti-scale__cell {
  background: rgba(255, 255, 255, 0.82);
}

.cybersoc .vta-range {
  border-radius: 2px;
  letter-spacing: 0.06em;
}

.cybersoc .vta-range.is-active {
  background: var(--k-blue);
  border-color: var(--k-blue);
  box-shadow: 0 0 22px -6px var(--k-blue-lit);
}

/* The radar hangs off the console, not off a section further down, so it
   sits behind the headline where it belongs. */
.cybersoc > .hero-radar {
  top: -17rem;
  left: 62%;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .cybersoc > .hero-radar {
    left: 50%;
    top: -22rem;
  }
}

/* The radar belongs to this register, so it burns a little brighter here. */
/* The sweep is the one red thing in the console, which is what makes it read
   as a scanner rather than as more chrome. */
.cybersoc .hero-radar span {
  border-color: rgba(216, 24, 48, 0.16);
}

.cybersoc .hero-radar::after {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 296deg,
    rgba(216, 24, 48, 0.06) 340deg,
    rgba(216, 24, 48, 0.28) 360deg
  );
}

.cybersoc .grid-field,
.cybersoc .glow {
  display: none;
}

/* The ticker keeps its dark bar: it is the one strip that should read as a
   lit display rather than as paper, and it separates the two stations. */
.cybersoc .cti-ticker {
  border-block-color: var(--k-edge-lit);
}

/* One figure in the row rather than two. Stated here because this sheet is
   what sets the uneven split above, and it loads last. */
@media (min-width: 1200px) {
  .cybersoc .cti--global .cti-two--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The crawl follows the product cards directly, so that section does not need
   the console's full run-out beneath it. */
.cybersoc .stmts {
  padding-bottom: clamp(14px, 1.8vw, 24px);
}

/* The heading sat 48px off its card and 51px off the crawl above, so it read as
   floating between the two rather than belonging to the card. Pulling the card
   up puts the heading clearly with what it names. (Here rather than style.css:
   this sheet loads last, and .cti margins come from the plugin's own sheet.) */
.exposure-block .cti {
  margin-top: 0;
}

/* The exposure card in brand red. The line across its top edge is the ::before
   above, not a border -- the card is clipped at the corners, and a border would
   be sliced off at the cut -- so the accent is restated here rather than a
   border-color set. The diagonal strike at the chamfer is the same accent and
   moves with it.

   Scoped to .exposure-block, which only the working copy renders, so the live
   front page keeps its blue. */
.exposure-block .cti--sector::before {
  background: linear-gradient(90deg, #d81830, transparent 70%);
}

.exposure-block .cti--sector::after {
  background: #d81830;
}