/* relationship_lab.css -- a graph plus a real-world scene. */
.rl { --rl-a: #8fa8cf; }
.rl-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.75rem; }
.rl-scene svg { display: block; width: 100%; height: auto; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--rl-a) 16%, transparent), transparent 58%); color: var(--rl-a); }
.rl-hook, .rl-rope, .rl-force, .rl-needle, .rl-wave, .rl-mid, .rl-circuit, .rl-rays {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.rl-hook, .rl-mid { stroke: rgba(203, 213, 225, 0.44); }
.rl-spring { fill: none; stroke: #fbbf24; stroke-width: 3; stroke-linecap: round; }
.rl-mass, .rl-resistor, .rl-battery, .rl-card { fill: rgba(15, 23, 42, 0.86); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.rl-force { stroke: var(--rl-a); color: var(--rl-a); }
.rl-tank, .rl-cylinder, .rl-sample { fill: rgba(14, 165, 233, 0.07); stroke: rgba(186, 230, 253, 0.72); stroke-width: 2; }
.rl-water { fill: rgba(56, 189, 248, 0.24); stroke: none; }
.rl-gauge { fill: rgba(15, 23, 42, 0.82); stroke: #bae6fd; stroke-width: 2; }
.rl-piston { fill: rgba(226, 232, 240, 0.42); stroke: #e2e8f0; stroke-width: 1.2; }
.rl-particle { fill: color-mix(in srgb, var(--rl-a) 70%, #fff); stroke: #020617; stroke-width: 0.7; }
.rl-wave { stroke: var(--rl-a); stroke-width: 4; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rl-a) 45%, transparent)); }
.rl-sample { fill: rgba(34, 197, 94, 0.08); }
.rl-star { fill: rgba(251, 191, 36, 0.28); stroke: #facc15; stroke-width: 2; filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.42)); }
.rl-lamp { fill: color-mix(in srgb, var(--rl-a) 34%, #fef3c7); stroke: #fde68a; stroke-width: 2; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rl-a) 45%, transparent)); }
.rl-circuit { stroke: rgba(226, 232, 240, 0.62); }
.rl-tag { fill: #e2e8f0; font-size: 12px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #07111f; stroke-width: 3px; stroke-linejoin: round; }
/* heating scene */
.rl-beaker { fill: rgba(14, 165, 233, 0.06); stroke: rgba(186, 230, 253, 0.7); stroke-width: 2; }
.rl-heat { fill: none; stroke: #fb923c; stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
.rl-thermo { fill: rgba(15, 23, 42, 0.82); stroke: #e2e8f0; stroke-width: 1.6; }
.rl-mercury, .rl-bulb { fill: #fb7185; stroke: none; }
.rl-bulb { stroke: #e2e8f0; stroke-width: 1.6; }
/* field / orbit scene */
.rl-source { fill: color-mix(in srgb, var(--rl-a) 34%, #0f172a); stroke: var(--rl-a); stroke-width: 2; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rl-a) 45%, transparent)); }
.rl-dist { stroke: rgba(203, 213, 225, 0.5); stroke-width: 1.6; stroke-dasharray: 4 4; }
.rl-test { fill: rgba(226, 232, 240, 0.92); stroke: #0b1220; stroke-width: 1; }
/* honest input→output meters (fallback for any unmapped relationship) */
.rl-meter-track { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.rl-in { fill: #38bdf8; }
.rl-out { fill: var(--rl-a); }
.rl-meter-cap { fill: #94a3b8; font-size: 11px; font-weight: 700; text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; }
.rl-meter-val { fill: #f1f5f9; font-size: 12px; font-weight: 800; text-anchor: middle; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #07111f; stroke-width: 3px; stroke-linejoin: round; }
.rl-rule { fill: #cbd5e1; font-size: 11px; font-weight: 700; font-style: italic; text-anchor: middle; }
.rl-base { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.4; }
@media (max-width: 760px) { .rl-grid { grid-template-columns: 1fr; } }