/* ==========================================================================
   3DOptix redesign — Design & Simulation, PAGE-UNIQUE layer.
   Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css

   Loaded ONLY by page-templates/dxr-design-simulation.php, which enqueues it
   with 'dxr-shell' as its dependency. The three shared stylesheets are NOT
   touched — other agents are authoring pages against them in parallel.

   RULES FOR THIS FILE:
   - Every selector is scoped to .dxr-page-ds (the template's wrapper div).
   - Values transcribed from the approved prototype,
     '3DOptix Website.dc.html' lines 820-1014.
   - Where a value here differs from the shared layer, the difference IS the
     prototype and the reason is commented.

   Contents
     §1  Local custom properties
     §2  Hero (rhythm override, eyebrow bar, CTA/microcopy spacing, screenshot)
     §3  Section-header spacing utilities
     §4  Workflow grid
     §5  AI agent plugins band + install panel
     §6  Analysis outputs table
     §7  Closing CTA band
   ========================================================================== */

/* ==========================================================================
   §1 Local custom properties
   Only the two on-dark values the token layer has no semantic entry for. The
   bot-bubble ink reuses --dxr-on-dark-image (rgba(255,255,255,0.82)).
   ========================================================================== */
.dxr-page-ds{
}

/* ==========================================================================
   §2 Hero
   ========================================================================== */
/* The D&S hero runs tighter than the shared .dxr-hero__inner rhythm:
   the prototype is 47->76 top and 50->80 bottom. */
.dxr-page-ds .dxr-hero__inner{
  padding-top:clamp(47px,5.6vw,76px);
  padding-bottom:clamp(50px,5.9vw,80px);
}

/* The D&S eyebrow bar is the TWO-stop blue->cyan rule (--dxr-gradient-quote),
   not the five-stop eyebrow spectrum, and it sits 24px above the H1. */
.dxr-page-ds .dxr-hero .dxr-eyebrow-bar{margin-bottom:24px}
.dxr-page-ds .dxr-hero .dxr-eyebrow-bar__rule{background:var(--dxr-gradient-quote)}

.dxr-page-ds .dxr-ds-hero__cta {margin-top:32px}
.dxr-page-ds .dxr-ds-hero__note{margin-top:18px}

/* Studio screenshot inside the hero panel. Deliberately NOT .dxr-panel__media:
   that primitive is a fixed 180px product thumbnail. This is a 352px crop
   anchored top-left so the beam path stays in frame at every width. */
.dxr-page-ds .dxr-ds-shot{margin:0;background:var(--dxr-ink-deep)}
/* The 352px crop is FLUID below the width the prototype was drawn at, for the
   same reason the home hero's is: the source is 2547x1162 (a 2.192 aspect) and
   object-fit:cover scales to fill the box HEIGHT, so a flat 352px always lays
   out 352 x 2.192 = 772px of image no matter how narrow the box is. At a 320px
   viewport the box is 278px wide — 278/772 = 36% of the screenshot, a portrait
   sliver of a landscape UI shot, with the beam path out of frame.
   52vw keeps the desktop framing (~80% of the image in view) at every width and
   reaches the 352px ceiling at a 677px viewport, so the prototype's geometry is
   reproduced exactly from there up. */
.dxr-page-ds .dxr-ds-shot img{
  display:block;width:100%;height:clamp(180px,52vw,352px);
  object-fit:cover;object-position:left top;
}

/* ==========================================================================
   §3 Section-header spacing utilities
   The shared layer ships mb-10/12/18/22/26/32/40; this page also needs 14, 30
   and 44 exactly as the prototype has them.
   ========================================================================== */
.dxr-page-ds .dxr-ds-mb-14{margin-bottom:14px}
.dxr-page-ds .dxr-ds-mb-30{margin-bottom:30px}
.dxr-page-ds .dxr-ds-mb-44{margin-bottom:44px}
.dxr-page-ds .dxr-ds-measure-540{max-width:min(100%,540px)}

/* ==========================================================================
   §4 Workflow grid
   Four step cells on the sunken surface. Step markers, cell padding and the
   1px rules all come from the shared hairline-grid primitive; only the step
   title's line-height differs (1.32 in the prototype, 1.35 for capability
   cells — the shared .dxr-hgrid__title carries the latter).
   ========================================================================== */
.dxr-page-ds .dxr-ds-workflow .dxr-hgrid__title{line-height:1.32}

/* ==========================================================================
   §5 AI agent plugins band + install panel

   This band describes the plugin at github.com/3doptix/skills, which bundles
   the 3DOptix MCP server with two Agent Skills. It replaced a mock chat panel
   for a product we do not ship; the band geometry is unchanged, so the page
   rhythm is identical.
   ========================================================================== */
/* The prototype's dark band columns are 64px apart, not the 72px the shared
   .dxr-grid--band default uses. */
.dxr-page-ds .dxr-ds-agents .dxr-grid--band{gap:var(--dxr-gap-col-wide)}
.dxr-page-ds .dxr-ds-agents__cta{margin-top:30px}
.dxr-page-ds .dxr-ds-agents__note{margin-top:22px;color:var(--dxr-on-dark-caption)}

/* Panel header strip: 14px 18px here (the shared on-dark strip is 15px 20px). */
.dxr-page-ds .dxr-ds-agent .dxr-strip{padding:14px 18px}
.dxr-page-ds .dxr-ds-agent__badge{
  font:400 10px/1 var(--dxr-font-mono);color:var(--dxr-cyan-light);
}

.dxr-page-ds .dxr-ds-agent__body{padding:20px}
.dxr-page-ds .dxr-ds-agent__label{
  margin:0 0 8px;
  font:500 10px/1 var(--dxr-font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dxr-on-dark-faint);
}
.dxr-page-ds .dxr-ds-agent__label + .dxr-ds-agent__cmd{margin-bottom:22px}

/* A command block, not prose: white-space:pre keeps the line breaks that ARE
   the content, and overflow-x lets a long line scroll in its own box rather
   than widening the panel. Same reasoning as the prose layer's <pre>. */
.dxr-page-ds .dxr-ds-agent__cmd{
  margin:0;padding:14px 16px;
  background:var(--dxr-panel-on-dark);
  border:1px solid var(--dxr-border-on-dark-soft);
  border-radius:var(--dxr-radius-md);
  font:400 12px/1.7 var(--dxr-font-mono);
  color:var(--dxr-on-dark-image);
  white-space:pre;
  overflow-x:auto;
}
.dxr-page-ds .dxr-ds-agent__cmd code{
  font:inherit;color:inherit;background:none;padding:0;
}
.dxr-page-ds .dxr-ds-agent__foot{
  margin:22px 0 0;
  font:400 12px/1.65 var(--dxr-font-sans);
  color:var(--dxr-on-dark-caption);
}

/* ==========================================================================
   §6 Analysis outputs table
   Geometry (240px 210px 1fr, min-width 700px, horizontal scroll) is the shared
   .dxr-table--analysis configuration. Two per-page differences: the body rows
   run 20px 26px rather than 24px 26px, and the mono Output column is 12px/1.5
   weight 400 rather than 13px weight 500.
   ========================================================================== */
.dxr-page-ds .dxr-ds-analysis .dxr-table__row--body{padding:20px 26px}
.dxr-page-ds .dxr-ds-analysis .dxr-table__key{font:400 12px/1.5 var(--dxr-font-mono)}
.dxr-page-ds .dxr-ds-analysis__name{
  font:700 14px/1.4 var(--dxr-font-sans);color:var(--dxr-ink);
}

/* ==========================================================================
   §7 Closing CTA band
   47->76 rather than the shared 'compact' 50->80.
   ========================================================================== */
.dxr-page-ds .dxr-ds-close{padding:clamp(47px,5.6vw,76px) 0}