/*
 * NEXUS case repair
 *
 * Restores the actual product hierarchy from the live NEXUS planner: deep
 * route navy, warm white, orange for the leading action and mint for verified
 * state. The shared case frame remains identical to Battlefield / Phoenix.
 */

body.case-page.flagship-case--nexus {
  --case-bg: #07182c;
  --case-panel: #0c223d;
  --case-panel-soft: #0f2948;
  --case-ink: #f6f8fb;
  --case-muted: #a7b7c9;
  --case-accent: #ff8526;
  --case-signal: #53d1a5;
  --case-hero-line: #ff8526;
  --case-hero-title: #f7f3ea;
  --case-hero-stroke: rgba(247, 243, 234, .94);
  --nexus-navy: #07182c;
  --nexus-panel: #0f2948;
  --nexus-orange: #ff8526;
  --nexus-mint: #53d1a5;
  --nexus-paper: #f7f3ea;
}

body.case-page.flagship-case--nexus .case-hero {
  background:
    linear-gradient(90deg, rgba(83, 209, 165, .035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(255, 133, 38, .028) 1px, transparent 1px) 0 0 / 72px 72px,
    radial-gradient(circle at 17% 42%, rgba(83, 209, 165, .09), transparent 28%),
    linear-gradient(112deg, #081b2f 0 51%, #061524 51% 100%) !important;
}

body.case-page.flagship-case--nexus .case-hero::before,
body.case-page.flagship-case--nexus .case-hero::after {
  content: none !important;
}

body.case-page.flagship-case--nexus .case-hero-image,
body.case-page.flagship-case--nexus .case-hero-content {
  border: 1px solid rgba(255, 133, 38, .5) !important;
  border-radius: 0 !important;
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(247, 243, 234, .07) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)) !important;
  position: relative;
}

body.case-page.flagship-case--nexus .case-hero-image::before,
body.case-page.flagship-case--nexus .case-hero-content::after {
  background:
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(255, 133, 38, .98) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) top right / 38px 38px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(83, 209, 165, .96) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) bottom left / 38px 38px no-repeat,
    linear-gradient(90deg, rgba(255, 133, 38, .98), rgba(255, 133, 38, .12)) top right / 110px 3px no-repeat,
    linear-gradient(180deg, rgba(255, 133, 38, .98), rgba(255, 133, 38, .12)) top right / 3px 110px no-repeat,
    linear-gradient(270deg, rgba(83, 209, 165, .96), rgba(83, 209, 165, .12)) bottom left / 110px 3px no-repeat,
    linear-gradient(0deg, rgba(83, 209, 165, .96), rgba(83, 209, 165, .12)) bottom left / 3px 110px no-repeat !important;
  border: 0 !important;
  content: "" !important;
  height: auto !important;
  inset: 0 !important;
  opacity: 1 !important;
  pointer-events: none;
  position: absolute;
  width: auto !important;
  z-index: 3;
}

/* The shared coherence layer previously covered the complete screenshot with
   78% cyan. The real planner capture must remain readable and recognisable. */
body.case-page.flagship-case--nexus .case-hero-image::after {
  background:
    linear-gradient(90deg, rgba(7, 24, 44, .03), transparent 44%),
    linear-gradient(0deg, rgba(7, 24, 44, .2), transparent 48%) !important;
  border: 0 !important;
  content: "" !important;
  inset: 0 !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: none;
  position: absolute;
  width: auto !important;
  z-index: 1;
}

body.case-page.flagship-case--nexus .case-hero-image > img {
  filter: saturate(.96) contrast(1.06) brightness(.98) !important;
  scale: 1 !important;
}

body.case-page.flagship-case--nexus .case-hero-content {
  background:
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(83, 209, 165, .022) 50px),
    radial-gradient(circle at 88% 12%, rgba(255, 133, 38, .1), transparent 31%),
    linear-gradient(145deg, rgba(15, 41, 72, .99), rgba(7, 24, 44, .995)) !important;
  overflow: hidden !important;
}

body.case-page.flagship-case--nexus .case-hero-content::before {
  background: linear-gradient(180deg, #ffb36e, #ff8526 52%, #53d1a5) !important;
  box-shadow: 0 0 24px rgba(255, 133, 38, .18) !important;
  content: "" !important;
  height: auto !important;
  inset: 24px auto 24px 0 !important;
  opacity: 1 !important;
  position: absolute;
  width: 3px !important;
}

body.case-page.flagship-case--nexus .case-hero-content .eyebrow {
  color: #ff9b47 !important;
  letter-spacing: .105em !important;
}

body.case-page.flagship-case--nexus .case-hero-content h1 {
  color: #f7f3ea !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
  -webkit-text-stroke: .014em rgba(247, 243, 234, .94) !important;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(3, 13, 25, .92), 7px 8px 0 rgba(255, 133, 38, .13) !important;
}

body.case-page.flagship-case--nexus .case-hero-content .hero-copy {
  color: #bdc9d5 !important;
}

body.case-page.flagship-case--nexus .case-status::before {
  background: #53d1a5 !important;
}

/* Shared Live Lab structure, now in the same visual world as the real planner. */
body.case-page.flagship-case--nexus .live-lab-launchpad {
  --lab-accent: #ff8526 !important;
  background:
    repeating-linear-gradient(90deg, rgba(83, 209, 165, .022) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 133, 38, .018) 0 1px, transparent 1px 46px),
    linear-gradient(112deg, #0f2948, #07182c 58%, #0b213a) !important;
  border-color: rgba(255, 133, 38, .5) !important;
  box-shadow: 0 34px 84px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(247, 243, 234, .05);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

body.case-page.flagship-case--nexus .live-lab-launchpad__intro {
  background:
    linear-gradient(90deg, rgba(7, 24, 44, .95), rgba(7, 24, 44, .7)),
    radial-gradient(ellipse at 14% 18%, rgba(255, 133, 38, .22), transparent 40%),
    url("portfolio-case-media/nexus-route-decision-hero-20260823.png") center / cover no-repeat !important;
}

body.case-page.flagship-case--nexus .live-lab-kicker,
body.case-page.flagship-case--nexus .live-lab-signals article > span {
  color: #ff9b47 !important;
}

body.case-page.flagship-case--nexus .live-lab-launchpad h2,
body.case-page.flagship-case--nexus .live-lab-signals strong {
  color: #f7f3ea !important;
}

body.case-page.flagship-case--nexus .live-lab-launchpad h2 {
  letter-spacing: -.065em !important;
  line-height: .92 !important;
  max-width: 12ch !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body.case-page.flagship-case--nexus .live-lab-launchpad__intro > p:not(.live-lab-kicker),
body.case-page.flagship-case--nexus .live-lab-signals small {
  color: #a7b7c9 !important;
}

body.case-page.flagship-case--nexus .live-lab-signals article {
  background: linear-gradient(160deg, rgba(15, 41, 72, .98), rgba(7, 24, 44, .99)) !important;
  border-color: rgba(83, 209, 165, .18) !important;
}

body.case-page.flagship-case--nexus .live-lab-button--primary {
  background: #ff8526 !important;
  border-color: #ff8526 !important;
  color: #07182c !important;
}

body.case-page.flagship-case--nexus .live-lab-button--secondary {
  border-color: rgba(83, 209, 165, .48) !important;
  color: #f7f3ea !important;
}

/* Fix the literal 00 counters and mirror each number in the opposite corner,
   following the portfolio's intended mini-card hierarchy. */
body.case-page.flagship-case--nexus .flagship-strip article {
  overflow: hidden;
  position: relative;
}

body.case-page.flagship-case--nexus .flagship-strip article::before {
  color: #ff9b47 !important;
  content: "01" !important;
}

body.case-page.flagship-case--nexus .flagship-strip article:nth-child(2)::before { content: "02" !important; }
body.case-page.flagship-case--nexus .flagship-strip article:nth-child(3)::before { content: "03" !important; }
body.case-page.flagship-case--nexus .flagship-strip article:nth-child(4)::before { content: "04" !important; }

body.case-page.flagship-case--nexus .flagship-strip article::after {
  bottom: .35rem;
  color: rgba(83, 209, 165, .11);
  content: "01";
  font: 900 clamp(3rem, 5vw, 5rem)/1 var(--brand-display);
  letter-spacing: -.08em;
  pointer-events: none;
  position: absolute;
  right: .65rem;
}

body.case-page.flagship-case--nexus .flagship-strip article:nth-child(2)::after { content: "02"; }
body.case-page.flagship-case--nexus .flagship-strip article:nth-child(3)::after { content: "03"; }
body.case-page.flagship-case--nexus .flagship-strip article:nth-child(4)::after { content: "04"; }

body.case-page.flagship-case--nexus .flagship-section--panel {
  background:
    linear-gradient(90deg, rgba(83, 209, 165, .032) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(rgba(255, 133, 38, .026) 1px, transparent 1px) 0 0 / 54px 54px,
    #0a1d31 !important;
}

body.case-page.flagship-case--nexus .evidence-card {
  background: rgba(7, 24, 44, .93) !important;
  border-color: rgba(83, 209, 165, .22) !important;
}

body.case-page.flagship-case--nexus .prototype-controls {
  background: linear-gradient(180deg, rgba(255, 133, 38, .05), transparent 24%), #07182c !important;
}

body.case-page.flagship-case--nexus .prototype-controls button[aria-pressed="true"] {
  border-left-color: #ff8526 !important;
  box-shadow: inset 18px 0 34px rgba(255, 133, 38, .08) !important;
}

body.case-page.flagship-case--nexus .prototype-stage {
  background:
    linear-gradient(rgba(83, 209, 165, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 209, 165, .055) 1px, transparent 1px),
    radial-gradient(circle at 72% 34%, rgba(255, 133, 38, .08), transparent 22%),
    #0b213a !important;
  background-size: 40px 40px, 40px 40px, auto, auto !important;
}

body.case-page.flagship-case--nexus .live-lab-signals,
body.case-page.flagship-case--nexus .live-lab-signals article {
  min-width: 0;
}

@media (max-width: 620px) {
  body.case-page.flagship-case--nexus .live-lab-launchpad h2 {
    font-size: clamp(2.55rem, 12vw, 3.7rem) !important;
    max-width: none !important;
  }

  body.case-page.flagship-case--nexus .live-lab-signals {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.case-page.flagship-case--nexus .case-hero-image > img {
    scale: 1 !important;
  }
}