/* Flat simulation tabs (partials/landing_sims_flat.html): a chart, a mail
   mock-up and a floor plan inside the same card frame as the isometric
   figures. Halo family only: iris #5D51B4, aubergine #2B2644, lavender
   #C9C2E8, panel #EFEDF6. Chips and notes come from anatomy-sims.css. */
.sx-figure { margin: 0; }
.sx-plate { position: relative; padding: 20px 24px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(43, 38, 68, 0.12); }
.sx-corners { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; color: rgba(23, 21, 30, 0.5); }
.sx-corners span:first-child { color: #17151e; font-weight: 600; }
.sx-corners--foot span:first-child { color: rgba(23, 21, 30, 0.5); font-weight: 400; }
.sx-corners--foot span:last-child { color: #17151e; font-weight: 500; font-variant-numeric: tabular-nums; }
.sx-corners:first-child { margin-bottom: 14px; }
.sx-corners--foot { margin-top: 14px; }
.sx-caption { margin-top: 14px; font-size: .875rem; line-height: 1.6; color: rgba(23, 21, 30, 0.56); }
.sx-label { margin-right: 4px; font-size: .875rem; color: rgba(23, 21, 30, 0.55); }
.sx text { font-family: inherit; }
/* Colorfigures pages (public/assets/sims/*.html) framed in a plate; sim_atm.js fits the height to the page. */
.sx-frame { display: block; width: 100%; height: 580px; border: 0; border-radius: 12px; background: #f2efe7; }

/* Break-even chart */
.sx-chart { display: block; width: 100%; height: auto; }
.sx-sliders { display: grid; gap: 12px 20px; }
@media (min-width: 640px) { .sx-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-sliders label { display: grid; gap: 4px; font-size: .875rem; color: rgba(23, 21, 30, 0.6); }
.sx-sliders b { color: #17151e; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-sliders input { width: 100%; accent-color: #5d51b4; }

/* 3D circuit (three.js, tools/circuit3d): canvas with an info card on top. */
.cx-stage { position: relative; border-radius: 12px; background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f5f4f8 60%, #efedf6 100%); overflow: hidden; }
.cx-canvas { min-height: 12rem; }
.cx-canvas canvas { display: block; cursor: grab; }
.cx-canvas canvas:active { cursor: grabbing; }
.cx-info { position: absolute; top: 14px; left: 14px; max-width: 19rem; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(43, 38, 68, 0.08), 0 10px 24px -14px rgba(43, 38, 68, 0.4); backdrop-filter: blur(6px); pointer-events: none; }
.cx-info b { display: block; color: #17151e; font-size: .9375rem; font-weight: 600; }
.cx-info p { margin-top: 4px; color: rgba(23, 21, 30, 0.7); font-size: .8125rem; line-height: 1.45; }
.cx-toggle[aria-pressed="true"] { background: #2b2644; border-color: #2b2644; color: #fff; }
.cx-fallback { padding: 3rem 1rem; color: rgba(23, 21, 30, 0.6); text-align: center; }
@media (max-width: 640px) { .cx-info { position: static; max-width: none; margin: 0; border-radius: 0; box-shadow: inset 0 1px 0 rgba(43, 38, 68, 0.08); backdrop-filter: none; } }

/* Floor plan: thin walls on paper, the route in iris. */
.sx-plan { display: block; width: 100%; height: auto; }
.ev-floor { fill: #fbfbfd; stroke: #2b2644; stroke-width: 3; }
.ev-room { fill: none; stroke: #2b2644; stroke-width: 1.6; }
.ev-core { fill: #efedf6; stroke: #2b2644; stroke-width: 1.6; }
.ev-lift { fill: #f5f4f8; }
.ev-lift-split { stroke: #8f84c9; stroke-width: 1; }
.ev-steps line { stroke: #8f84c9; stroke-width: 1; }
.ev-doors line { stroke: #fbfbfd; stroke-width: 4; }
.ev-label { fill: rgba(23, 21, 30, 0.55); font-size: 13px; }
.ev-label--sm { font-size: 11.5px; }
.ev-hatch-line { stroke: #2b2644; stroke-width: 2; stroke-opacity: .5; }
.ev-hot { stroke: #2b2644; stroke-width: 1; }
.ev-flame { fill: #2b2644; }
.ev-smoke { animation: ev-smoke 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ev-smoke { 50% { transform: scale(1.08); opacity: .8; } }
.ev-route { fill: none; stroke: #5d51b4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ev-route.is-bad { stroke: #2b2644; stroke-dasharray: 2 8; }
.ev-you { fill: #fff; stroke: #5d51b4; stroke-width: 3; }
.ev-you-dot { fill: #5d51b4; }
.ev-you-label { fill: #5d51b4; font-weight: 600; }

@media (max-width: 560px) {
  .sx-plate { padding: 14px; }
  .ev-label { font-size: 18px; }
  .ev-label--sm { font-size: 16px; }
  .sx-corners { font-size: 12px; }
  .sx-corners:first-child span:last-child { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .ev-smoke { animation: none; } }