/* ========================================================================
   Nodal-point / parallax diagram (interactive SVG embed)
   Standalone stylesheet, loaded only on pages that embed the diagram
   (see the "css" shortcode) — kept out of fazal.css entirely so it
   doesn't add weight to every page.

   All rules are scoped under .nodal-diagram-embed so nothing here touches
   body, h1, svg, input, etc. site-wide. No font-family is set anywhere —
   everything inherits the page's existing fonts; only sizes are specified.
   No CSS custom properties (var()/:root) are used, for wider browser
   coverage — colors are plain hex, restated in the dark-mode block below
   rather than swapped via a variable.
   ======================================================================== */

.nodal-diagram-embed { max-width: 720px; margin: 0 auto; }

.nodal-diagram-embed .sub {
  color: #6B6A64;
  font-size: 0.92rem;
  margin: 0 0 24px;
  line-height: 1.5;
}

.nodal-diagram-embed .panel {
  background: #FFFFFF;
  border: 1px solid #D8D6CC;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.nodal-diagram-embed .panel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nodal-diagram-embed .panel-row label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.nodal-diagram-embed input[type="range"] {
  flex: 1 1 200px;
  min-width: 160px;
  accent-color: #2F7A6E;
}

.nodal-diagram-embed #d-readout {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: #6B6A64;
  min-width: 170px;
}

.nodal-diagram-embed #d-readout strong { color: inherit; }

.nodal-diagram-embed .js-hidden { display: none; }

.nodal-diagram-embed noscript p {
  font-size: 0.85rem;
  color: #6B6A64;
  background: #FFFFFF;
  border: 1px dashed #D8D6CC;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 20px;
}

.nodal-diagram-embed .diagram-frame {
  background: #FFFFFF;
  border: 1px solid #D8D6CC;
  border-radius: 10px;
  padding: 8px;
}

.nodal-diagram-embed svg { display: block; width: 100%; height: auto; }

.nodal-diagram-embed .th { font-size: 14px; font-weight: 600; fill: currentColor; }
.nodal-diagram-embed .ts { font-size: 12px; fill: #6B6A64; }

@media (prefers-color-scheme: dark) {
  /* --- nodal-point diagram --- */
  .nodal-diagram-embed .panel,
  .nodal-diagram-embed .diagram-frame,
  .nodal-diagram-embed noscript p {
    background: #000000;
    border-color: #333333;
  }
  .nodal-diagram-embed .sub,
  .nodal-diagram-embed #d-readout,
  .nodal-diagram-embed noscript p {
    color: #A5A296;
  }
  .nodal-diagram-embed input[type="range"] { accent-color: #4FA593; }

  .nodal-diagram-embed .ts { fill: #A5A296; }

  .nodal-diagram-embed .nd-cone      { stroke: #524F45; }
  .nodal-diagram-embed .nd-structure { stroke: #B5B2A5; }
  .nodal-diagram-embed .nd-marker    { fill: #9C9986; }

  .nodal-diagram-embed .nd-far        { fill: #5FA3EA; }
  .nodal-diagram-embed .nd-far-stroke { stroke: #5FA3EA; }

  .nodal-diagram-embed .nd-near        { fill: #E0A040; }
  .nodal-diagram-embed .nd-near-stroke { stroke: #E0A040; }

  .nodal-diagram-embed .nd-nodal-fill   { fill: #4FA593; }
  .nodal-diagram-embed .nd-nodal-stroke { stroke: #2E7A6A; }

  .nodal-diagram-embed .nd-nodal-rotated-fill   { fill: #DB7355; }
  .nodal-diagram-embed .nd-nodal-rotated-stroke { stroke: #A8503A; }

  .nodal-diagram-embed .nd-frame-good-fill   { fill: #1E2E29; }
  .nodal-diagram-embed .nd-frame-good-stroke { stroke: #4FA593; }

  .nodal-diagram-embed .nd-frame-bad-fill   { fill: #2E211C; }
  .nodal-diagram-embed .nd-frame-bad-stroke { stroke: #DB7355; }
}