/* EduQuant Kit — Lab 13 VQE workbench (vqe_lab.js) */

.vqe-card .card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vqe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.vqe-row { display: grid; grid-template-columns: 150px 1fr; align-items: start; border-bottom: 1px solid var(--border); margin-bottom: -1px; }
.vqe-label { padding: 10px 12px; font-size: 13px; font-weight: 600; background: var(--bg); border-right: 1px solid var(--border); align-self: stretch; }
.vqe-control { padding: 6px 10px; min-width: 0; }
.vqe-control select, .vqe-control input { width: 100%; max-width: 260px; }
.vqe-control .field-hint { margin-top: 4px; line-height: 1.4; }
.vqe-opt-desc { margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid var(--primary-light); background: #EFF6FF; border-radius: 0 var(--radius) var(--radius) 0; font-size: 13.5px; line-height: 1.5; }
.vqe-opt-desc .muted { display: block; margin-top: 2px; font-size: 12.5px; }
.vqe-status { font-size: 12.5px; }

.tab-panel[data-panel="vqe"] { padding-bottom: 8px; }
.vqe-section { margin: 4px 0 18px; }
.vqe-section h3 { font-size: 14.5px; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.vqe-energy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; align-items: start; }
.vqe-energies { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13.5px; }
.vqe-energies dt { color: var(--text-secondary); }
.vqe-energies dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vqe-energies dd.vqe { color: #1D4ED8; }
.vqe-energies dd.exact { color: #B91C1C; }
.vqe-energies dd.hf { color: #15803D; }
.vqe-energies dd.model { color: var(--text-secondary); }
.vqe-energies dd.good { color: #047857; }
.vqe-energies dd.warn { color: #B45309; }
.vqe-energies dd .field-hint { font-weight: 400; }
.vqe-notes { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.vqe-min-label { margin-top: 6px; font-size: 13px; font-weight: 600; color: #92400E; }
.vqe-min-label .star { color: #D4A017; font-size: 16px; }

.vqe-how ol { margin: 0; padding-left: 0; list-style: none; counter-reset: vqe; }
.vqe-how li { counter-increment: vqe; display: grid; grid-template-columns: 22px 26px 1fr; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; line-height: 1.5; }
.vqe-how li::before { content: counter(vqe) "."; font-weight: 600; color: var(--text-secondary); }
.vqe-how li .ico { text-align: center; }
.vqe-how li b { display: inline; }

.vqe-details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.vqe-details > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.vqe-details[open] > summary { border-bottom: 1px solid var(--border); }
.vqe-details-body { padding: 4px 14px 12px; font-size: 13.5px; line-height: 1.55; }
.vqe-formula { margin: 8px 0 12px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif; font-size: 19px; text-align: center; overflow-x: auto; white-space: nowrap; }
.vqe-formula .op { font-family: var(--font); font-size: 15px; font-weight: 600; margin-right: 6px; }
.vqe-details-body i { font-family: 'Cambria Math', 'STIX Two Math', 'Times New Roman', serif; font-size: 1.08em; }
.vqe-where, .vqe-steps { margin: 0 0 10px; padding-left: 18px; }
.vqe-steps { list-style: none; padding-left: 6px; }
.vqe-terms { max-width: 420px; margin-top: 6px; }
.vqe-terms td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 640px) {
  .vqe-row { grid-template-columns: 1fr; }
  .vqe-label { border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; }
  .vqe-control select, .vqe-control input { max-width: none; }
  .vqe-formula { font-size: 16px; }
}

/* "VQE Circuit — Auto-generated" (vqe_lab.js): stands in for the lab's palette + canvas on Lab 13 */
.vqe-auto-panel {
  border: 2px dashed #93C5FD; border-radius: var(--radius-lg); background: #F8FBFF;
  padding: 16px 18px; min-height: 200px; font-size: 13.5px; line-height: 1.55;
}
.vqe-auto-panel p { margin: 0 0 10px; }
.vqe-auto-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--primary); }
.vqe-auto-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.vqe-auto-facts dt { color: var(--text-secondary); font-weight: 600; }
.vqe-auto-facts dd { margin: 0; font-weight: 600; }
.vqe-auto-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.vqe-auto-panel .field-hint { margin-bottom: 4px; }
/* while the circuit editor is open, the panel shrinks to a reminder above it */
.vqe-auto-panel.compact { min-height: 0; padding: 10px 14px; margin-bottom: 10px; }
.vqe-auto-panel.compact > p, .vqe-auto-panel.compact .vqe-auto-facts, .vqe-auto-panel.compact > .field-hint { display: none; }
.vqe-auto-panel.compact .vqe-auto-title { margin-bottom: 6px; }