/* ==========================================================================
   3DOptix redesign — /technology page-unique CSS.

   Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css
   Enqueued CONDITIONALLY from page-templates/dxr-technology.php (handle
   'dxr-page-technology', dependency 'dxr-shell'), so it ships on this page
   only and can never reorder the shared layer.

   RULES FOR THIS FILE:
   - Every selector is scoped to .dxr-tech (the page wrapper emitted by the
     template). Nothing here may leak to another page — other agents are
     writing sibling templates in parallel.
   - No new colour, size or spacing literals: everything resolves from the
     token layer. The only raw numbers are geometry transcribed verbatim from
     the approved prototype (the 140px core square, the SVG label size, the
     wavefront animation delays).
   - Nothing here belongs in the shared stylesheets: it is either page-unique
     structure (the engine diagram, the relay SVG) or a documented per-page
     override of a shared value (hero rhythm, CTA-band measure).
   ========================================================================== */

/* ==========================================================================
   §1 Hero — rhythm

   The hero ground is the DEFAULT light .dxr-hero (#fff + a 1px --dxr-border
   bottom rule), which is exactly the prototype's line 382. See the template
   docblock for the README-vs-prototype contradiction this resolves.

   The Technology hero runs the COMPACT rhythm on BOTH edges
   (clamp(50px,5.9vw,80px) top and bottom), where .dxr-hero__inner runs
   section-y / section-y-tight. That is a prototype value, not a system value,
   so it is overridden here rather than in the shared layer.
   ========================================================================== */
.dxr-tech .dxr-hero__inner{
  padding-top:var(--dxr-section-y-compact);
  padding-bottom:var(--dxr-section-y-compact);
}
.dxr-tech__hero-cta {margin-top:32px}
.dxr-tech__hero-note{margin-top:18px}

/* ==========================================================================
   §2 Two-lens relay diagram (hero right panel)

   An inline SVG, so every colour is applied through a class — including the
   gradient stops — instead of a presentation attribute. Same reason as the
   rest of the system: the prototype's inline colours are a prototyping
   artefact, the tokens are the contract.

   The palette is the prototype's LIGHT one (lines 403-420): the diagram sits
   on the raised panel surface, not on a dark ground.
   ========================================================================== */
/* The live widget that replaced the hand-drawn relay schematic.
   16:10 via aspect-ratio rather than a fixed height: the widget is a WebGL
   canvas that fills whatever box it is given, and a fixed height would letterbox
   it on a phone and crop the rail on a wide panel. min-height keeps the toolbar
   and the RUN control usable at the narrowest panel width, below which the
   canvas would be shorter than its own chrome.
   The ink ground is what shows while the iframe connects, so it matches the
   widget's own grey rather than flashing white inside a bordered panel. */
.dxr-tech-relay{
  display:block;width:100%;
  aspect-ratio:16/10;min-height:280px;
  background:var(--dxr-surface-raised);
}
.dxr-tech-relay__frame{
  display:block;width:100%;height:100%;border:0;
}

/* ==========================================================================
   §3 PhotonCore engine diagram

   A WRAPPING FLEX ROW, deliberately not a grid: the side columns grow from a
   320px basis while the core column is flex:0 1 320px, so the core never
   stretches to a third of a wide viewport. A grid with equal tracks would.
   ========================================================================== */
.dxr-tech-engine{
  display:flex;flex-wrap:wrap;
  background:var(--dxr-surface);
  border:1px solid var(--dxr-border);
  border-radius:var(--dxr-radius-panel);
  overflow:hidden;
}
.dxr-tech-engine__col{
  flex:1 1 var(--dxr-min-3up);      /* 320px */
  min-width:0;                      /* lets long labels wrap instead of blowing the row */
  padding:var(--dxr-pad-panel);     /* 32px */
}
.dxr-tech-engine__core{
  flex:0 1 var(--dxr-min-3up);      /* 320px, and it does NOT grow */
  min-width:var(--dxr-min-4up);     /* 240px */
  padding:32px 36px;
  background:var(--dxr-ink-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;position:relative;overflow:hidden;
}

/* THE ONE PLACE THIS DIAGRAM NEEDS A DISCRETE CHANGE.
   flex-grow:0 on the core is correct whenever a side column shares its flex
   line — the side column absorbs the surplus and the core stays 320px. It is
   wrong on the line where the core is ALONE. Flex line-breaking uses the
   hypothetical main size, so col + core need 320+320 = 640px of engine content;
   engine content is (viewport - 2x20 gutter - 2x1 border) below 500px and
   (0.92 x viewport - 2) from 500px up, which drops under 640 at a 698px
   viewport. From 362px (where the content first exceeds 320) up to 698px the
   core therefore sat alone on its line at a fixed 320px, flush left, with bare
   panel ground beside it: 28px of it at 390, 52px at 414, 313px at 690.
   There is no fluid expression of "grow only when alone on the line", so the
   query is the mechanism — and it matches exactly the band in which the core is
   alone, changing nothing above it. */
@media (max-width:698px){
  .dxr-tech-engine__core{flex-grow:1}
}

.dxr-tech-engine__label{margin-bottom:20px}
.dxr-tech-engine__list{display:flex;flex-direction:column;gap:var(--dxr-gap-rows)}
.dxr-tech-engine__list--inputs{margin-bottom:26px}
.dxr-tech-engine__item{
  display:flex;gap:12px;align-items:baseline;
  font:400 14px/1.5 var(--dxr-font-sans);color:var(--dxr-body);
}
.dxr-tech-engine__rule{
  height:1px;background:var(--dxr-border-inner);margin-bottom:24px;
}
.dxr-tech-engine__em{font-weight:700;color:var(--dxr-amber-deep)}
/* the one caveat row reads amber, not green — it is a claim, not a capability */
.dxr-tech-dot--amber{background:var(--dxr-amber)}

/* the 140px core square */
.dxr-tech-core{
  width:140px;height:140px;border-radius:var(--dxr-radius-panel);
  background:var(--dxr-gradient-core);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.dxr-tech-core__brand{
  font:500 9px/1 var(--dxr-font-mono);letter-spacing:.2em;
  color:var(--dxr-on-dark-strong);margin-bottom:8px;
}
.dxr-tech-core__word{
  font:800 18px/1.15 var(--dxr-font-sans);letter-spacing:-.01em;
  color:var(--dxr-on-dark);text-align:center;
}
.dxr-tech-core__meta  {text-align:center}
.dxr-tech-core__engine{font:500 13px/1 var(--dxr-font-mono);color:var(--dxr-green-light);margin-bottom:7px}
.dxr-tech-core__note  {font:400 11px/1 var(--dxr-font-mono);color:var(--dxr-on-dark-caption)}

/* output cards — a 3px coloured left border, never an icon */
.dxr-tech-engine__cards{display:flex;flex-direction:column;gap:12px}
.dxr-tech-outcard{
  border:1px solid var(--dxr-border);
  border-left:3px solid var(--dxr-border-strong);
  border-radius:var(--dxr-radius-md);
  padding:16px 18px;
}
.dxr-tech-outcard--violet{border-left-color:var(--dxr-violet)}
.dxr-tech-outcard--cyan  {border-left-color:var(--dxr-cyan)}
.dxr-tech-outcard--green {border-left-color:var(--dxr-green)}
.dxr-tech-outcard__title {margin:0 0 6px}

/* ==========================================================================
   §4 Section intro rhythm

   14px under an H2 and 44px/40px under the intro paragraph are prototype
   values with no matching shared utility (which stops at 40px).
   ========================================================================== */
.dxr-tech__h2          {margin-bottom:14px}
.dxr-tech__intro       {margin-bottom:44px}
.dxr-tech__intro--tight{margin-bottom:40px}

/* ==========================================================================
   §5 Deployment layers table — the one two-line Layer cell
   ========================================================================== */
.dxr-tech-layer{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dxr-tech-layer__key{color:var(--dxr-amber-deep)}

/* ==========================================================================
   §6 Closing CTA band

   The prototype's copy column measures 660px here; the shared band measures
   620px. Page-local override, not a system change.
   ========================================================================== */
.dxr-tech .dxr-ctaband__copy{max-width:min(100%,660px)}