/* =========================================================
   Simulation Panel & Phase Animation Styles
   Temperature & Pressure Simulation Panel
   ========================================================= */

/* =============== Simulation Panel Container =============== */
.sim-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding: 36px; margin-bottom:28px; box-shadow:var(--shadow);
  grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:900px){
  .sim-panel{ grid-template-columns:1fr; }
}

.sim-section-header{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--accent-2);
}
[data-theme="dark"] .sim-section-header{ color:var(--accent-2-dark); }
.sim-icon{ font-size:1.1rem; }

/* =============== noUiSlider Wrapper =============== */
.sim-noui-wrap{ margin-bottom:12px; }
.sim-noui-slider{ margin:0 6px 8px; }

/* noUiSlider theme overrides */
.sim-noui-slider .noUi-connect{ background:var(--accent-2); border-radius:99px; }
.sim-noui-slider .noUi-handle{
  width:20px; height:20px; border-radius:50%; right:-10px; top:-8px;
  background:var(--accent); border:2px solid var(--surface); cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.sim-noui-slider .noUi-handle:active{ cursor:grabbing; }
[data-theme="dark"] .sim-noui-slider .noUi-handle{
  background:var(--accent-dark); border-color:var(--surface-2);
}
.sim-noui-slider .noUi-tooltip{
  background:var(--ink); color:#fff; border:none; border-radius:6px;
  padding:4px 8px; font-size:.75rem; font-family:var(--font-mono);
}
[data-theme="dark"] .sim-noui-slider .noUi-tooltip{ background:var(--surface-3); color:var(--ink); }
.sim-noui-slider .noUi-pips-horizontal{
  padding:0; height:0; top:14px;
}
.sim-noui-slider .noUi-marker{ background:var(--border); }
.sim-noui-slider .noUi-value{ font-size:.7rem; color:var(--ink-muted); font-family:var(--font-mono); }
.sim-noui-slider .noUi-value.active-pip{ color:var(--accent); font-weight:700; }
[data-theme="dark"] .sim-noui-slider .noUi-value.active-pip{ color:var(--accent-dark); }

/* =============== Readout =============== */
.sim-readout{
  text-align:center; padding:8px 0 0;
  font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft);
}
.sim-readout-val{ font-weight:600; color:var(--ink); }
.sim-readout-unit{ color:var(--ink-muted); font-size:.78rem; }
.sim-readout-sep{ color:var(--border-strong); margin:0 2px; }

/* =============== Timeline Controls =============== */
.sim-timeline{
  grid-column:1 / -1;
}
.sim-timeline-controls{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.sim-timeline-btn{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.sim-play-btn{ background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.sim-play-btn:hover{ background:var(--accent-2-dark); }
.sim-pause-btn{ background:var(--accent); color:#fff; border-color:var(--accent); }
.sim-pause-btn:hover{ background:var(--accent-dark); }
.sim-reset-btn:hover{ border-color:var(--danger); color:var(--danger); }

.sim-speed-group{ display:flex; gap:4px; margin-inline-end:auto; }
.sim-speed-btn{
  padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-muted); font-size:.75rem;
  cursor:pointer; font-family:var(--font-mono); font-weight:600; transition:all .15s;
}
.sim-speed-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* =============== Advanced Mode Toggle =============== */
.sim-advanced-section{
  grid-column:1 / -1; border:none; background:transparent; padding:0;
  display:flex; justify-content:center;
}
.sim-toggle-label{
  display:flex; align-items:center; gap:10px; padding:10px 20px;
  border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; transition:all .15s;
}
.sim-toggle-label:hover{ border-color:var(--accent-2); }
.sim-adv-mode-toggle{ accent-color:var(--accent-2); cursor:pointer; }
.sim-toggle-text{
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
}

/* =============== Phase Legend =============== */
.sim-phase-legend{
  grid-column:1 / -1;
}
.sim-phase-legend-items{ display:flex; gap:14px; flex-wrap:wrap; }
.sim-phase-legend-item{
  display:flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:7px; border:1px solid var(--border); background:var(--surface);
  font-size:.82rem; color:var(--ink-soft); font-weight:500;
}
.sim-phase-swatch{ width:12px; height:12px; border-radius:4px; }

/* Phase swatch colors */
.sim-phase-legend-item.phase-solid .sim-phase-swatch{ background:#6b7280; }
.sim-phase-legend-item.phase-liquid .sim-phase-swatch{ background:#3b82f6; }
.sim-phase-legend-item.phase-gas .sim-phase-swatch{ background:#10b981; }
.sim-phase-legend-item.phase-plasma .sim-phase-swatch{
  background:linear-gradient(135deg, #f59e0b, #ef4444);
}

/* =============== Element Tile Phase Overlay =============== */
.el-tile .phase-indicator{
  position:absolute; bottom:3px; left:3px;
  width:7px; height:7px; border-radius:50%;
  transition:background .3s ease, box-shadow .3s ease;
}
.el-tile .phase-indicator-solid{ background:#6b7280; }
.el-tile .phase-indicator-liquid{ background:#3b82f6; }
.el-tile .phase-indicator-gas{ background:#10b981; }
.el-tile .phase-indicator-plasma{
  background:#f59e0b;
  box-shadow:0 0 6px #f59e0b, 0 0 12px #ef4444;
}

/* Phase state visual effects */
.el-tile.phase-solid{
  opacity:1;
}

.el-tile.phase-liquid{
  position:relative;
}
.el-tile.phase-liquid::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, transparent 40%, rgba(59,130,246,.15) 100%);
  animation:liquidWave 3s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes liquidWave{
  0%,100%{ opacity:.6; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-1px); }
}

.el-tile.phase-gas{
  opacity:.65;
  animation:gasFloat 4s ease-in-out infinite;
}
@keyframes gasFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}

.el-tile.phase-plasma{
  position:relative;
  animation:plasmaPulse 1.5s ease-in-out infinite;
}
.el-tile.phase-plasma::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  border:2px solid transparent;
  background:linear-gradient(var(--surface), var(--surface)) padding-box,
             linear-gradient(135deg, #f59e0b, #ef4444, #f59e0b) border-box;
  animation:plasmaBorder 2s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes plasmaPulse{
  0%,100%{ box-shadow:0 0 8px rgba(245,158,11,.3), 0 0 16px rgba(239,68,68,.2); }
  50%{ box-shadow:0 0 14px rgba(245,158,11,.5), 0 0 28px rgba(239,68,68,.35); }
}
@keyframes plasmaBorder{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}

/* Reduced motion: disable all phase animations */
@media (prefers-reduced-motion: reduce){
  .el-tile.phase-liquid::before,
  .el-tile.phase-gas,
  .el-tile.phase-plasma,
  .el-tile.phase-plasma::before{
    animation:none !important;
  }
  .el-tile.phase-gas{ opacity:.65; }
  .el-tile.phase-plasma{
    box-shadow:0 0 10px rgba(245,158,11,.4), 0 0 20px rgba(239,68,68,.25);
  }
}

/* =============== Inspector Panel =============== */
.sim-inspector{ padding:0; }
.insp-header{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.insp-tile{
  width:64px; height:64px; border-radius:12px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-sm);
}
.insp-tile .insp-number{ font-family:var(--font-mono); font-size:.65rem; opacity:.85; }
.insp-tile .insp-symbol{ font-family:var(--font-mono); font-size:1.6rem; font-weight:700; line-height:1; }
.insp-titles{ flex:1; }
.insp-name{ font-size:1.2rem; margin:0 0 2px; }
.insp-en{ font-family:var(--font-mono); color:var(--ink-muted); font-size:.82rem; }

.insp-phase-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:999px; font-size:.82rem; font-weight:600; margin-bottom:16px;
}
.insp-phase-dot{ width:8px; height:8px; border-radius:50%; }
.insp-phase-badge.phase-solid{ background:rgba(107,114,128,.12); color:#374151; }
.insp-phase-badge.phase-solid .insp-phase-dot{ background:#6b7280; }
.insp-phase-badge.phase-liquid{ background:rgba(59,130,246,.12); color:#1d4ed8; }
.insp-phase-badge.phase-liquid .insp-phase-dot{ background:#3b82f6; }
.insp-phase-badge.phase-gas{ background:rgba(16,185,129,.12); color:#047857; }
.insp-phase-badge.phase-gas .insp-phase-dot{ background:#10b981; }
.insp-phase-badge.phase-plasma{
  background:linear-gradient(135deg, rgba(245,158,11,.12), rgba(239,68,68,.12));
  color:#b45309;
}
.insp-phase-badge.phase-plasma .insp-phase-dot{
  background:linear-gradient(135deg, #f59e0b, #ef4444);
}

[data-theme="dark"] .insp-phase-badge.phase-solid{ color:#d1d5db; }
[data-theme="dark"] .insp-phase-badge.phase-liquid{ color:#93c5fd; }
[data-theme="dark"] .insp-phase-badge.phase-gas{ color:#6ee7b7; }
[data-theme="dark"] .insp-phase-badge.phase-plasma{ color:#fbbf24; }

.insp-section{ margin-bottom:18px; }
.insp-section-title{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--accent-2);
  border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:10px;
}
[data-theme="dark"] .insp-section-title{ color:var(--accent-2-dark); }

.insp-facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.insp-fact{ font-size:.82rem; }
.insp-fact dt{ color:var(--ink-muted); font-size:.68rem; margin-bottom:1px; }
.insp-fact dd{ margin:0; font-weight:600; font-family:var(--font-mono); font-size:.85rem; }

/* Dynamic property highlight */
.insp-fact.dynamic dt::after{
  content:"⟳"; margin-inline-end:4px; color:var(--accent); font-size:.75rem;
}

/* Mini Phase Diagram */
.insp-phase-diagram{
  margin-top:16px;
}
.insp-pt-canvas{
  width:100%; height:auto; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); margin-top:8px;
}

/* =============== Extreme Value Indicators =============== */
.el-tile.extreme-highest-mp{
  box-shadow:inset 0 0 0 2px #f59e0b;
}
.el-tile.extreme-lowest-bp{
  box-shadow:inset 0 0 0 2px #06b6d4;
}
.extreme-tag{
  position:absolute; top:2px; right:2px; font-size:.45rem; padding:1px 3px;
  border-radius:3px; font-family:var(--font-mono); font-weight:700; z-index:3;
}
.extreme-tag-mp{ background:#f59e0b; color:#fff; }
.extreme-tag-bp{ background:#06b6d4; color:#fff; }

/* =============== Accessibility: Focus Indicators =============== */
.sim-panel button:focus-visible,
.sim-panel input:focus-visible,
.sim-panel select:focus-visible{
  outline:3px solid var(--accent-2); outline-offset:2px;
}

/* =============== Print =============== */
@media print{
  .sim-panel{ display:none; }
  .phase-indicator{ display:none; }
}

/* =============== Screen Reader Only =============== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}