/* naturfag-lab.css — de få ting, det fælles cockpit ikke kan arve.
 *
 * Cockpittet i naturfag-lab.js udskriver Balances egne klassenavne, så det
 * arver næsten hele designet fra naturfag.css uden en eneste ny regel.
 *
 * Tre regler dér hænger på id'er i stedet for klasser, og et id kan kun
 * findes ét sted på en side. Dem spejler vi her for vores egne klasser.
 * Balances egne vælgere står uændret i naturfag.css og rammes ikke.
 *
 * Resten af filen er det, cockpittet tilføjer, og som Balance ikke har:
 * niveauknapper, gætteknapper og guidede forsøg som knapper.
 */

/* ── Spejlet fra naturfag.css ──────────────────────────────────────────── */

/* svarer til .systems-visual>#systemsCanvas */
.pp-lab-visual { position: relative; }
.pp-lab-visual > .pp-lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* svarer til #systemMoreControls>summary */
.pp-lab-mere > summary { display: none; min-height: 44px; cursor: pointer; color: #ddf4f4; font-weight: 750; font-size: .875rem; }

@media (max-width: 1050px) {
  /* svarer til .systems-controls>#systemControls */
  .systems-controls > .pp-lab-skydere,
  .systems-controls > .pp-lab-forsoeg { grid-column: 2; }
}
@media (max-width: 900px) {
  .pp-lab-mere > summary { display: list-item; align-content: center; margin-left: 16px; }
}

/* ── Nyt i det fælles cockpit ──────────────────────────────────────────── */

.pp-lab-spm { margin: 0 0 8px; color: #cfe4f0; font-size: .68rem; line-height: 1.45; }

.pp-lab-gaet {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 6px 6px 0;
  padding: 0 13px; border: 1px solid #2c4a68; border-radius: 12px;
  background: #102943; color: #e8f4ff; font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer;
}
.pp-lab-gaet[aria-pressed="true"] { background: #1aa1a8; border-color: #1aa1a8; color: #04201f; }
.pp-lab-gaet:focus-visible,
.pp-lab-niveau:focus-visible,
.pp-lab-forsoegsknap:focus-visible { outline: 3px solid #8fd0ff; outline-offset: 2px; }

.pp-lab-niveauer { display: flex; gap: 6px; margin: 0 0 12px; }
.pp-lab-niveau {
  min-width: 44px; min-height: 44px; border: 1px solid #294660; border-radius: 10px;
  background: #102943; color: #cfe4f0; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer;
}
.pp-lab-niveau[aria-pressed="true"] { background: #1aa1a8; border-color: #1aa1a8; color: #04201f; }

.pp-lab-forsoeg { margin: 16px 0 0; }
.pp-lab-forsoegsliste { display: grid; gap: 7px; }
.pp-lab-forsoegsknap {
  display: block; width: 100%; min-height: 44px; padding: 9px 11px; text-align: left;
  border: 1px solid #294660; border-radius: 11px; background: #102943; color: #e8f4ff;
  font: inherit; cursor: pointer;
}
.pp-lab-forsoegsknap:hover { border-color: #52ced4; }
.pp-lab-forsoegsknap[disabled] { opacity: .55; cursor: progress; }
.pp-lab-forsoegsknap strong { display: block; font-size: .68rem; font-weight: 800; }
.pp-lab-forsoegsknap small { display: block; margin-top: 2px; color: #7891a7; font-size: .58rem; line-height: 1.35; }

.pp-lab-intet { margin: 0; color: #91a8ba; font-size: .6rem; }

/* Svaret på gættet skal kunne ses uden farve alene. */
.prediction-feedback[data-rigtigt="ja"] { color: #7fe3d4; }
.prediction-feedback[data-rigtigt="uklart"] { color: #f0b89a; }

@media (prefers-reduced-motion: reduce) {
  .system-meter i b { transition: none; }
}