/* ================================================================
   REAL CORE DASHBOARD — faithful, near-full-scale reproduction of the
   ACTUAL IRONCHILD application's Core/Trust Field screen (rebuilt
   2026-08-21 per architectural correction: this no longer lives inside
   the Pricing card - a 480px sidebar was crushing its real geometry.
   It now gets its own full-width section, sized close to the real
   product's own proportions - see index.html's #real-core section).

   Every class name, color, and icon below is copied verbatim from the
   real product's own markup/CSS (frontend/index.html's <style> block and
   renderTrustField()/trustFieldLineHtml() in frontend/js/app.js) - not
   reinvented. Scoped entirely under .real-core-frame so these real
   values never leak into or collide with the website's own separate
   visual system used everywhere else on this page.

   Scale: 900x620 internal coordinate space = the real product's own
   1040x680 canvas at 0.865 scale (radius 260->225, node width 128->111,
   dot 60->52, core 162->140) - a uniform, proportional reduction, never
   an independent horizontal/vertical squish. Responsive breakpoints use
   CSS transform: scale() on the whole composition, which by definition
   cannot distort proportions - see the media queries at the bottom.

   What was intentionally not reproduced: the connecting lines' state-
   change pulse-restart logic (updateTrustFieldInPlace()'s incremental
   re-render) - this is a frozen snapshot, not a live-updating session,
   so there is nothing to incrementally update. What WAS reproduced:
   the real hexagonal node badges, real per-state colors, real
   FontAwesome icons, real straight connection lines with the real
   gap-and-marker treatment for a blocked sensor, and the real dash-flow
   animation on active lines.

   Honesty note (2026-08-21 correction): the Core panel's Evidence/
   Continuity/Last Update metrics now show qualitative real-state words
   ("Observed" / "Consistent" / "Live"), not numbers - a specific number
   here would either be fabricated or belong to one particular account's
   history, neither of which belongs on a public page (same reasoning
   that already kept Email honestly "Waiting for Source" instead of a
   faked "Active").
================================================================ */

.real-core-frame {
  --rc-bg: #080B10;
  --rc-panel: #0E131A;
  --rc-panel-alt: #131A22;
  --rc-elevated: #131A22;
  --rc-border: #1B232D;
  --rc-text: #F2F5F8;
  --rc-muted: #8B98A8;
  --rc-accent: #55A8FF;
  --rc-info: #55A8FF;
  --rc-success: #35D07F;
  --rc-warning: #F4B942;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--rc-bg);
  border-radius: 10px;
  padding: 6px;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- .io-instrument frame (real header) ----------
   2026-08-21 depth pass: the instrument itself now reads as a physical
   enclosure sitting above the page (elevation shadow + a faint inner
   top highlight, single controlled light source from above) rather
   than a flat bordered box. Structural technique only - no new
   iconography, no ornamental gradients. */
.real-core-frame .io-instrument {
  position: relative; background: linear-gradient(180deg, #060d16, #050a12);
  border: 1px solid rgba(130, 155, 190, 0.16); border-radius: 5px; padding: 32px 36px 28px;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.real-core-frame .io-bracket { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.real-core-frame .io-bracket-tl { top: 14px; left: 14px; border-top: 1px solid rgba(130, 155, 190, 0.4); border-left: 1px solid rgba(130, 155, 190, 0.4); }
.real-core-frame .io-bracket-tr { top: 14px; right: 14px; border-top: 1px solid rgba(130, 155, 190, 0.4); border-right: 1px solid rgba(130, 155, 190, 0.4); }
.real-core-frame .io-bracket-bl { bottom: 14px; left: 14px; border-bottom: 1px solid rgba(130, 155, 190, 0.4); border-left: 1px solid rgba(130, 155, 190, 0.4); }
.real-core-frame .io-bracket-br { bottom: 14px; right: 14px; border-bottom: 1px solid rgba(130, 155, 190, 0.4); border-right: 1px solid rgba(130, 155, 190, 0.4); }
.real-core-frame .io-instrument-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 10px; }
.real-core-frame .io-instrument-brand { display: flex; align-items: baseline; gap: 10px; }
.real-core-frame .io-instrument-brand-mark { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--rc-text); }
.real-core-frame .io-instrument-brand-sep { font-size: 11px; color: var(--rc-muted); opacity: 0.4; }
.real-core-frame .io-instrument-brand-sub { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rc-muted); opacity: 0.55; }
.real-core-frame .io-instrument-status { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--rc-muted); }
.real-core-frame .io-instrument-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rc-border); }
.real-core-frame .io-instrument-status-dot.io-status-active { background: var(--rc-success); box-shadow: 0 0 0 3px rgba(58, 209, 138, 0.15); }

/* ---------- .io-panel (real Core metrics, qualitative not numeric) ---------- */
.real-core-frame .io-panel { position: relative; border: 1px solid rgba(130, 155, 190, 0.24); border-radius: 3px; margin-bottom: 30px; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55); }
.real-core-frame .io-panel-inner { padding: 22px 24px 18px; }
.real-core-frame .io-panel-note { font-size: 10.5px; color: var(--rc-muted); opacity: 0.7; text-align: center; margin: 0 0 18px; line-height: 1.5; }
.real-core-frame .io-panel-metrics { display: flex; flex-wrap: wrap; gap: 28px 36px; justify-content: center; }
.real-core-frame .io-panel-metric { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 90px; }
.real-core-frame .io-panel-metric-label { font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--rc-muted); opacity: 0.65; }
.real-core-frame .io-panel-metric-value { font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700; color: var(--rc-text); }

/* ---------- Trust Field: near-real scale (900x620 = real 1040x680 @ 0.865) ----------
   2026-08-21 correction: reverted the whole-plane rotateX(6deg) tried
   earlier - tilting the entire composition risked degrading legibility
   of node labels/states and connection lines, which must stay perfectly
   flat and readable. The field itself is geometrically flat again -
   3D depth now lives only in the physical elements inside it (the Core
   disc, the hexagonal node plates - see below), never in the plane's
   own orientation or in text/lines/panels. */
.real-core-frame .trust-field-scale-wrap { width: 100%; height: 600px; overflow: hidden; }
.real-core-frame .trust-field { position: relative; width: 900px; height: 600px; margin: 0 auto; transform-origin: top center; }

.real-core-frame .trust-field-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.real-core-frame .tf-line { fill: none; }
.real-core-frame .tf-line-active { stroke: var(--rc-success); stroke-width: 1.2; stroke-dasharray: 2 11; opacity: 0.8; animation: rc-tfFlowToCore 2.4s linear infinite; }
.real-core-frame .tf-line-blocked { stroke: var(--rc-info); stroke-width: 1.2; stroke-dasharray: 2 7; opacity: 0.55; }
.real-core-frame .tf-line-gap-marker { fill: var(--rc-panel); stroke: var(--rc-info); stroke-width: 1.2; opacity: 0.65; }
@keyframes rc-tfFlowToCore { to { stroke-dashoffset: 24; } }

/* Real "heartbeat" (los latidos del corazón) - copied verbatim from the
   real app's own .trust-field-core / coreBreathe / coreRing / core-pulse
   (frontend/index.html). A slow, controlled breathing pulse, never a
   spinner - the same --heartbeat-duration rate the real Core beats at.
   core-pulse is applied here because this snapshot shows activeCount>0
   (8 of 9 nodes Active), exactly the same condition renderTrustField()
   uses to add that class in the real app. */
/* Depth pass: the disc reads as a machined technical lens, not a glass
   sphere - a single dark elevation shadow (grounding it above the
   panel) plus one restrained specular arc from the same top-left light
   source used on the node badges below. No color added, no new hue. */
.real-core-frame .trust-field-core {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(85, 168, 255, 0.12), var(--rc-elevated) 68%);
  border: 1.5px solid var(--rc-accent);
  box-shadow: 0 0 30px rgba(85, 168, 255, 0.16), inset 0 0 22px rgba(85, 168, 255, 0.05), 0 26px 40px -16px rgba(0, 0, 0, 0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2;
  --heartbeat-duration: 4s;
  animation: rc-coreBreathe var(--heartbeat-duration) ease-in-out infinite;
}
.real-core-frame .trust-field-core::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 26%); pointer-events: none; z-index: 1; }
.real-core-frame .trust-field-core-label, .real-core-frame .trust-field-core-name { position: relative; z-index: 2; }
.real-core-frame .trust-field-core::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(85, 168, 255, 0.18); animation: rc-coreRing var(--heartbeat-duration) ease-in-out infinite;
}
.real-core-frame .trust-field-core.core-pulse { animation: rc-coreBreathePulse var(--heartbeat-duration) ease-in-out infinite; }
@keyframes rc-coreBreathe { 0%, 100% { box-shadow: 0 0 0 10px rgba(85, 168, 255, 0.05); } 50% { box-shadow: 0 0 0 18px rgba(85, 168, 255, 0.09); } }
@keyframes rc-coreBreathePulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(85, 168, 255, 0.06); } 50% { box-shadow: 0 0 0 22px rgba(85, 168, 255, 0.12); } }
@keyframes rc-coreRing { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.15; transform: scale(1.08); } }

.real-core-frame .trust-field-core-label { font-size: 9.5px; letter-spacing: 1.2px; color: var(--rc-muted); text-transform: uppercase; }
.real-core-frame .trust-field-core-name { font-size: 17px; font-weight: 700; color: var(--rc-text); margin-top: 4px; letter-spacing: 0.5px; }

.real-core-frame .trust-field-node { position: absolute; width: 111px; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; }
/* Hexagonal badges, not circular icon chips - copied verbatim from the
   real app's own comment: "a deliberate break from generic dashboard
   iconography." */
/* Depth pass: two stacked drop-shadows (drop-shadow follows the real
   hexagon clip-path outline, unlike box-shadow) - a tight contact
   shadow plus a softer, larger elevation shadow, same top-left light
   source as the Core disc, so every plate reads as physically raised
   above the panel rather than a flat icon. */
.real-core-frame .trust-field-node-dot { width: 52px; height: 52px; position: relative; margin-bottom: 9px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); }
.real-core-frame .trust-field-node-dot::before, .real-core-frame .trust-field-node-dot::after { content: ''; position: absolute; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); }
.real-core-frame .trust-field-node-dot::before { inset: 0; background: linear-gradient(150deg, var(--rc-border), rgba(11, 16, 23, 0.92)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset; }
.real-core-frame .trust-field-node-dot::after { inset: 1px; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.07), var(--rc-panel-alt) 72%); }
.real-core-frame .trust-field-node-dot i { position: relative; z-index: 1; font-size: 17px; color: var(--rc-muted); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.real-core-frame .trust-field-node-label { font-size: 12.5px; font-weight: 700; color: var(--rc-text); }
.real-core-frame .trust-field-node-state { font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--rc-muted); margin-top: 4px; font-weight: 700; }

.real-core-frame .trust-field-node.state-active .trust-field-node-dot::before { background: linear-gradient(150deg, rgba(53, 208, 127, 0.32), rgba(11, 16, 23, 0.92)); box-shadow: 0 0 0 1px rgba(53, 208, 127, 0.5) inset, 0 0 14px rgba(53, 208, 127, 0.4); }
.real-core-frame .trust-field-node.state-active .trust-field-node-dot i { color: var(--rc-success); }
.real-core-frame .trust-field-node.state-active .trust-field-node-state { color: var(--rc-success); }
.real-core-frame .trust-field-node.state-blocked .trust-field-node-dot::before { background: linear-gradient(150deg, rgba(85, 168, 255, 0.28), rgba(11, 16, 23, 0.92)); box-shadow: 0 0 0 1px rgba(85, 168, 255, 0.45) inset, 0 0 12px rgba(85, 168, 255, 0.32); }
.real-core-frame .trust-field-node.state-blocked .trust-field-node-dot i { color: var(--rc-info); }
.real-core-frame .trust-field-node.state-blocked .trust-field-node-state { color: var(--rc-info); }

/* ---------- Responsive: uniform transform: scale() only - never an
   independent width/height change, which is what would actually distort
   the hexagon geometry and the circular core. The wrapper's fixed height
   is set to the scaled visual footprint so surrounding layout doesn't
   leave a dead gap or clip the composition. ---------- */
@media (max-width: 980px) {
  .real-core-frame .trust-field { transform: scale(0.72); }
  .real-core-frame .trust-field-scale-wrap { height: 432px; }
}
@media (max-width: 620px) {
  .real-core-frame .trust-field { transform: scale(0.46); }
  .real-core-frame .trust-field-scale-wrap { height: 276px; }
  .real-core-frame .io-instrument { padding: 22px 16px 20px; }
}

/* ================================================================
   Added 2026-08-21: real "Observation Continuity" / "Observed Signals"
   sections and the Trust Field legend, copied from the same real app
   screen the user pasted in full - every number that screen shows
   (177 evidence, 4/4, 92 connections, 305 processes, 112 sessions...)
   is intentionally left out here, replaced with the same real
   qualitative outcome words the app itself already uses for each row
   ("Consistent" / "Active" / "Observed" / "Known Device") - never a
   fabricated word, just the count/fraction stripped off.
================================================================ */

/* ---------- Trust Field legend ---------- */
.real-core-frame .tf-legend { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(130, 155, 190, 0.14); }
.real-core-frame .tf-legend-item { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--rc-muted); }
.real-core-frame .tf-legend-symbol { font-family: 'Courier New', monospace; font-weight: 700; width: 12px; text-align: center; }
.real-core-frame .tf-legend-symbol-active { color: var(--rc-success); }
.real-core-frame .tf-legend-symbol-unavailable { color: var(--rc-muted); }
.real-core-frame .tf-legend-symbol-waiting { color: var(--rc-info); }
.real-core-frame .tf-legend-symbol-failed { color: var(--rc-warning); }

/* ---------- Observation Continuity + Observed Signals ---------- */
.real-core-frame .io-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
@media (max-width: 860px) { .real-core-frame .io-secondary-grid { grid-template-columns: 1fr; } }

.real-core-frame .io-block { position: relative; background: linear-gradient(180deg, #060d16, #050a12); border: 1px solid rgba(130, 155, 190, 0.16); border-radius: 5px; padding: 22px 24px; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.025); }
.real-core-frame .io-block-title { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rc-text); margin: 0 0 6px; }
.real-core-frame .io-block-sub { font-size: 11.5px; color: var(--rc-muted); margin: 0 0 16px; line-height: 1.5; }

.real-core-frame .io-pill { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.real-core-frame .io-pill-consistent, .real-core-frame .io-pill-active { color: var(--rc-success); background: rgba(53, 208, 127, 0.12); }
.real-core-frame .io-pill-observed { color: var(--rc-info); background: rgba(85, 168, 255, 0.12); }

.real-core-frame .io-continuity-item { padding: 12px 0; border-top: 1px solid rgba(130, 155, 190, 0.1); }
.real-core-frame .io-continuity-item:first-of-type { border-top: none; padding-top: 0; }
.real-core-frame .io-continuity-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.real-core-frame .io-continuity-head span:first-child { font-size: 12.5px; font-weight: 600; color: var(--rc-text); }
.real-core-frame .io-continuity-item p { margin: 0; font-size: 11.5px; color: var(--rc-muted); line-height: 1.5; }

.real-core-frame .io-signal-group { margin-bottom: 16px; }
.real-core-frame .io-signal-group:last-child { margin-bottom: 0; }
.real-core-frame .io-signal-group-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--rc-muted); opacity: 0.6; margin: 0 0 8px; }
.real-core-frame .io-signal-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.real-core-frame .io-signal-row i { width: 16px; text-align: center; color: var(--rc-muted); font-size: 12px; flex-shrink: 0; }
.real-core-frame .io-signal-row span:not(.io-pill) { flex: 1; font-size: 12.5px; color: var(--rc-text); }