/*! NBC v6.399 · sole visual-stage and lifecycle contract · Visual Stage system without independent Ambilight ownership */
@layer nbc.visual-stage {
  :root {
    --nbc-stage-line: rgba(247,245,242,.11);
    --nbc-stage-line-strong: rgba(139,207,154,.24);
    --nbc-stage-bg: rgba(8,12,10,.76);
    --nbc-stage-bg-deep: rgba(7,10,9,.92);
    --nbc-stage-positive: #8bcf9a;
    --nbc-stage-muted: rgba(247,245,242,.56);
    --nbc-stage-radius: 14px;
    --nbc-stage-min: 240px;
  }

  [data-nbc-visual-stage] {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-inline-size: 0;
    inline-size: 100%;
    min-block-size: var(--nbc-stage-min);
    overflow: clip;
    contain: layout paint style;
    border-color: var(--nbc-stage-line);
    background-color: var(--nbc-stage-bg);
    container-type: inline-size;
  }

  [data-nbc-visual-stage]::before,
  [data-nbc-visual-stage]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  [data-nbc-visual-stage]::before {
    z-index: -2;
    opacity: .46;
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%, rgba(0,0,0,.08));
  }

  [data-nbc-visual-stage]::after {
    z-index: -1;
    opacity: .28;
    background-image:
      linear-gradient(rgba(247,245,242,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247,245,242,.02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }

  [data-nbc-visual-stage] > * { min-inline-size: 0; }

  [data-nbc-visual-stage] :is(svg,canvas,img,video) {
    display: block;
    max-inline-size: 100%;
  }

  [data-nbc-visual-stage] :is(svg,canvas) {
    overflow: visible;
  }

  [data-nbc-visual-stage][data-stage-kind="operating-twin"] {
    --nbc-stage-min: clamp(390px, 40vw, 630px);
  }

  [data-nbc-visual-stage][data-stage-kind="barometer"] {
    --nbc-stage-min: clamp(490px, 50vw, 720px);
  }

  [data-nbc-visual-stage][data-stage-kind="digital-check"] {
    --nbc-stage-min: clamp(410px, 39vw, 600px);
  }

  [data-nbc-visual-stage][data-stage-kind="diagnose"] {
    --nbc-stage-min: 0px;
    overflow: visible;
    contain: layout style;
    background-color: transparent;
  }

  [data-nbc-visual-stage][data-stage-kind="countercheck"] {
    --nbc-stage-min: clamp(220px, 25vw, 360px);
  }

  [data-nbc-visual-stage][data-stage-kind="process-reality"],
  [data-nbc-visual-stage][data-stage-kind="provider-proof"],
  [data-nbc-visual-stage][data-stage-kind="delegation-probe"],
  [data-nbc-visual-stage][data-stage-kind="artifact"],
  [data-nbc-visual-stage][data-stage-kind="editorial"],
  [data-nbc-visual-stage][data-stage-kind="case-film"],
  [data-nbc-visual-stage][data-stage-kind="industry"] {
    --nbc-stage-min: 0px;
  }

  .nbc-visual-stage-fallback {
    position: absolute !important;
    inset: 0;
    z-index: 2 !important;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-align: center;
    transition: opacity .18s ease;
    background: linear-gradient(180deg, rgba(8,12,10,.18), rgba(8,12,10,.42));
  }

  .nbc-visual-stage-fallback > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 34ch;
    color: var(--nbc-stage-muted);
    font: 500 10px/1.45 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .nbc-visual-stage-fallback > span::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--nbc-stage-positive);
    box-shadow: 0 0 0 6px rgba(139,207,154,.08);
  }

  [data-nbc-visual-stage][data-stage-state="fallback"] .nbc-visual-stage-fallback {
    opacity: 1;
    visibility: visible;
  }

  [data-nbc-visual-stage][data-stage-state="fallback"] :is(canvas,[data-flow-particles],[data-dc-flow-layer]) {
    opacity: .18;
  }

  @media (max-width: 900px) {
    [data-nbc-visual-stage][data-stage-kind="operating-twin"] { --nbc-stage-min: clamp(360px, 64vw, 520px); }
    [data-nbc-visual-stage][data-stage-kind="barometer"] { --nbc-stage-min: clamp(430px, 74vw, 620px); }
    [data-nbc-visual-stage][data-stage-kind="digital-check"] { --nbc-stage-min: clamp(390px, 68vw, 560px); }
  }

  @media (max-width: 700px) {
    [data-nbc-visual-stage] {
      contain: layout paint;
      --nbc-stage-radius: 10px;
    }
    [data-nbc-visual-stage]::after { background-size: 34px 34px; opacity: .18; }
    [data-nbc-visual-stage][data-stage-kind="operating-twin"] { --nbc-stage-min: 330px; }
    [data-nbc-visual-stage][data-stage-kind="barometer"] { --nbc-stage-min: 390px; }
    [data-nbc-visual-stage][data-stage-kind="digital-check"] { --nbc-stage-min: 350px; }
    [data-nbc-visual-stage][data-stage-kind="countercheck"] { --nbc-stage-min: 190px; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-nbc-visual-stage],
    [data-nbc-visual-stage] *,
    [data-nbc-visual-stage] *::before,
    [data-nbc-visual-stage] *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .001ms !important;
    }
    [data-nbc-visual-stage]::before { opacity: .28; }
    .nbc-visual-stage-fallback { transition: none; }
  }
}

@layer nbc.visual-stage {
  [data-nbc-visual-stage][data-stage-kind="process-reality"],
  [data-nbc-visual-stage][data-stage-kind="provider-proof"],
  [data-nbc-visual-stage][data-stage-kind="delegation-probe"] {
    overflow: visible;
    contain: layout style;
    border-color: transparent;
    background-color: transparent;
  }
  [data-nbc-lifecycle-stage] { min-inline-size:0; }
}
