/* /resources/css/step-demo.css — shared styles for the click-through step-demo pattern
   (legend + colored step buttons + formula/message/result boxes).
   Used by many resource pages; each page still has its own dedicated .js file that
   defines its diagram and step content, and calls the shared engine in step-demo.js. */

.sdemo-demo { margin: 20px 0 10px; }
.sdemo-source {
  text-align: center; font-size: 1.5rem; font-weight: 800; font-family: monospace;
  letter-spacing: 1px; color: #1e293b; margin: 0 0 12px;
}
.sdemo-source-label {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: #64748b; font-family: inherit; text-transform: uppercase; margin-bottom: 2px;
}
.sdemo-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; }
.sdemo-leg-item { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: #444; }
.sdemo-leg-dot { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; }
.sdemol-blue   { background: #3b82f6; border: 1px solid #2563eb; }
.sdemol-kept   { background: #22c55e; border: 1px solid #16a34a; }
.sdemol-ab     { background: #93c5fd; border: 1px solid #60a5fa; }
.sdemol-corner { background: #f68a0a; border: 1px solid #c2670a; }
.sdemol-gray   { background: #e2e8f0; border: 1px dashed #94a3b8; }
.sdemol-green  { background: #22c55e; border: 1px solid #16a34a; }
.sdemol-purple { background: #c4b5fd; border: 1px solid #a78bfa; }
.sdemol-pink   { background: #f9a8d4; border: 1px solid #ec4899; }

.sdemo-svg-wrap { text-align: center; }
.sdemo-piece  { transition: opacity 0.5s ease-in-out; }
.sdemo-egroup {
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity 0.5s ease-in-out, transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.sdemo-fillfade { transition: fill 0.5s ease-in-out, stroke 0.5s ease-in-out, opacity 0.5s ease-in-out; }

.sdemo-formula { text-align: center; font-size: 1.35rem; font-weight: 800; color: #1e293b; margin: 10px 0 16px; min-height: 1.4em; }
.sdemo-formula-sub { display: block; font-size: 0.72em; font-weight: 700; color: #3b82f6; margin-top: 4px; }
@keyframes sdemoFormulaIn { from { transform: scale(0.85); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
.sdemo-formula.sdemo-pop { animation: sdemoFormulaIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

.sdemo-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; justify-content: center; }
.sdemo-btn {
  padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.sdemo-btn:disabled { opacity: 0.28; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
.sdemo-btn:not(:disabled):hover { filter: brightness(0.9); }
.sdemo-btn.sdemo-pulse { box-shadow: 0 0 0 3px rgba(0,0,0,0.18); transform: scale(1.04); }
.sdemo-b1 { background: #bbdefb; color: #0d47a1; }
.sdemo-b2 { background: #ffe0b2; color: #e65100; }
.sdemo-b3 { background: #f3c6e2; color: #880e4f; }
.sdemo-b4 { background: #c8e6c9; color: #1b5e20; }
.sdemo-b5 { background: #e1bee7; color: #4a148c; }
.sdemo-b6 { background: #b2ebf2; color: #006064; }
.sdemo-ba { background: linear-gradient(135deg,#fff176,#ffca28); color: #7c4a00; border: 1px solid #ff8f00; }
.sdemo-br { background: #f0f0f0; color: #555; }

.sdemo-msg {
  text-align: center; font-size: 0.88rem; font-weight: 500; color: #444;
  background: #f0f4ff; border-radius: 8px; padding: 12px 14px;
  max-width: 500px; margin: 0 auto 10px; min-height: 18px;
  line-height: 1.5;
}

.sdemo-result {
  display: none; text-align: center; font-size: 0.9rem;
  max-width: 500px; margin: 8px auto 0;
  background: #fffde7; border: 1px solid #ffe082; border-radius: 8px; padding: 12px 14px;
  color: #333; line-height: 1.7;
}
.sdemo-result strong { color: #e65100; }

@media (max-width: 500px) {
  .sdemo-btn { padding: 7px 10px; font-size: 0.76rem; }
  .sdemo-formula { font-size: 1.15rem; }
}