/* naturfag-model-atom3d.css — 3D-atom/binding (Fase A).
 *
 * Mål:
 *  - scene + primær kontrol er synlige samtidig ved 320 × 568 uden
 *    dokumentscroll mellem dem;
 *  - alle handlinger er mindst 44 × 44 px;
 *  - én primær kontrol direkte under scenen, øvrige i lette rækker;
 *  - reduceret bevægelse respekteres;
 *  - ingen vandret sidescroll.
 */

.atom3d {
  --pp-ink: #16302f;
  --pp-marine: #2c5f6b;
  --pp-teal: #12c4a8;
  --pp-coral: #c8553d;
  --pp-amber: #e0b563;
  --pp-knaekket: #e9f1ef;
  --pp-papir: #f7fbfa;
  --pp-kant: #cfd8d6;
  --pp-tekst: #3c4c4a;

  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
  color: var(--pp-tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  /* Mobilcockpit: de interaktive dele får en fast, sammenhængende rækkefølge
     omkring scenen. Forklaring og sekundært stof følger bagefter. */
  display: flex;
  flex-direction: column;
}

.atom3d *, .atom3d *::before, .atom3d *::after { box-sizing: border-box; }

/* `[hidden]` skal altid vinde — ellers kan en .atom3d__*-regel med display:flex
   gøre skjulte kontroller synlige og fokusérbare (A2-fund). */
.atom3d [hidden] { display: none !important; }

/* ── Scene ─────────────────────────────────────────────────────────── */

.atom3d__stage {
  position: relative;
  width: 100%;
  height: clamp(200px, 42dvh, 380px);
  border: 1px solid var(--pp-kant);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pp-knaekket);
}

.atom3d__phase {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 5px 9px;
  border: 1px solid rgba(22, 48, 47, 0.2);
  border-radius: 999px;
  background: rgba(247, 251, 250, 0.92);
  box-shadow: 0 2px 8px rgba(22, 48, 47, 0.08);
  color: var(--pp-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.atom3d__canvas { position: absolute; inset: 0; }
/* pan-y lader browseren beholde lodret scroll; kun tydelige vandrette gestusser
   fortolkes som rotation i modellen. */
.atom3d__canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.atom3d__lewis {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--pp-papir);
  pointer-events: none;
}
.atom3d__lewis--on { display: flex; }

.atom3d-lewis-svg { width: min(80%, 340px); height: auto; }
.atom3d-lewis-core { fill: var(--pp-coral); }
.atom3d-lewis-label { fill: #ffffff; font-size: 40px; font-weight: 700; }
.atom3d-lewis-dots circle { fill: var(--pp-marine); }

/* ── Info ──────────────────────────────────────────────────────────── */

.atom3d__info {
  margin: 10px 0;
  min-height: 2.6em;
  font-size: 16px;
  color: var(--pp-ink);
}

/* ── Kontroller ────────────────────────────────────────────────────── */

.atom3d__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atom3d__views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.atom3d-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--pp-kant);
  border-radius: 10px;
  background: var(--pp-papir);
  color: var(--pp-ink);
  font: 600 15px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.atom3d-btn:hover { border-color: var(--pp-marine); }
.atom3d-btn:focus-visible { outline: 3px solid var(--pp-teal); outline-offset: 2px; }
.atom3d-btn:disabled { opacity: 0.45; cursor: default; }

.atom3d-btn--view[aria-pressed="true"],
.atom3d-btn--active { background: var(--pp-marine); border-color: var(--pp-marine); color: #fff; }

.atom3d-btn--primary {
  background: var(--pp-teal);
  border-color: var(--pp-teal);
  color: #06231f;
  font-weight: 700;
}
.atom3d-btn--ghost { background: transparent; }

.atom3d__mode, .atom3d__camera { display: flex; flex-wrap: wrap; gap: 8px; }
.atom3d__mode .atom3d-btn { flex: 1 1 auto; }
.atom3d__camera .atom3d-btn { flex: 1 1 auto; }

.atom3d__playback { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Primær handling + sekundært panel ─────────────────────────────── */

.atom3d__primary { width: 100%; margin: 10px 0; }

.atom3d__secondary { margin: 6px 0 14px; }
.atom3d__secondary > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pp-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--pp-kant);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--pp-papir);
}
.atom3d__secondary-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 0;
}

/* ── Atom-bygning ───────────────────────────────────────────────────── */

.atom3d__build { margin: 4px 0 12px; }

.atom3d__readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.atom3d__readout > div {
  background: var(--pp-papir);
  border: 1px solid var(--pp-kant);
  border-radius: 10px;
  padding: 8px 10px;
}
.atom3d__readout dt { font-size: 12px; color: var(--pp-tekst); }
.atom3d__readout dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--pp-ink); }

.atom3d__steppers { display: flex; flex-direction: column; gap: 8px; }
.atom3d-stepper {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 6px;
}
.atom3d-stepper__label { font-weight: 600; color: var(--pp-ink); }
.atom3d-stepper__val { min-width: 2ch; text-align: center; font-size: 18px; font-weight: 700; }
.atom3d-stepper .atom3d-btn { min-width: 44px; padding: 6px 10px; }

.atom3d-feedback { margin: 10px 0 0; font-size: 15px; color: var(--pp-ink); }
.atom3d-feedback--ok { color: var(--pp-marine); font-weight: 600; }

/* ── Salt før/nu-kort ───────────────────────────────────────────────── */

.atom3d__saltkort {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.atom3d__saltkort > div {
  background: var(--pp-papir);
  border: 1px solid var(--pp-kant);
  border-radius: 10px;
  padding: 8px 12px;
}
.atom3d__saltkort dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--pp-ink); }

/* ── Iongitter-forklaring ───────────────────────────────────────────── */

.atom3d__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  font-size: 14px;
  color: var(--pp-ink);
}
.atom3d__legend-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.atom3d__legend-dot--na { background: var(--pp-coral); }
.atom3d__legend-dot--cl { background: #4fa3b8; }
.atom3d__legend-note { color: var(--pp-tekst); }
.atom3d__neutralitet {
  flex: 1 1 100%;
  padding: 7px 9px;
  border: 1px solid var(--pp-teal);
  border-radius: 8px;
  background: #e6f7f3;
  color: var(--pp-ink);
  text-align: center;
}

/* ── Afslutning ──────────────────────────────────────────────────────── */

.atom3d__done {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--pp-teal);
  border-radius: 12px;
  background: #e6f7f3;
  color: var(--pp-ink);
  font-size: 16px;
  font-weight: 600;
}

/* ── Modelbegrænsninger og kilder ───────────────────────────────────── */

.atom3d__limits, .atom3d__sources {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--pp-kant);
  border-radius: 10px;
  background: var(--pp-papir);
}
.atom3d__limits summary, .atom3d__sources summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pp-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.atom3d__limits ul, .atom3d__sources ul { margin: 6px 0 0 18px; padding: 0; }
.atom3d__limits li, .atom3d__sources li { margin: 4px 0; font-size: 15px; }
.atom3d__sources a { color: var(--pp-marine); }

/* ── Fallback ───────────────────────────────────────────────────────── */

.pp3d-fallback { padding: 12px; }
.pp3d-fallback__title { font-weight: 700; color: var(--pp-ink); margin: 0 0 4px; }
.pp3d-fallback__text { margin: 0; font-size: 15px; color: var(--pp-tekst); }

.atom3d__fallback-stage {
  position: relative;
  width: 100%;
  min-height: 200px;
  border: 1px solid var(--pp-kant);
  border-radius: 14px;
  background: var(--pp-papir);
  display: flex;
  align-items: center;
  justify-content: center;
}
.atom3d-fallback-svg { width: min(100%, 340px); height: auto; }

.f-shell { fill: none; stroke: var(--pp-kant); stroke-width: 2; }
.f-shell--valens { stroke: var(--pp-teal); stroke-width: 2.5; }
.f-nucleus { fill: var(--pp-coral); }
.f-h { fill: var(--pp-marine); }
.f-label { fill: #fff; font-size: 24px; font-weight: 700; }
.f-bond { stroke: var(--pp-teal); stroke-width: 4; stroke-linecap: round; }
.f-dot { fill: var(--pp-marine); }
.f-dot--valens { fill: var(--pp-teal); }
.f-dot--deling { fill: var(--pp-teal); }
.f-dot--overfoer { fill: var(--pp-amber); }
.f-dot--uparret { fill: var(--pp-marine); stroke: #fff; stroke-width: 2; }
.f-meta { fill: var(--pp-tekst); font-size: 14px; }
.f-meta--angle { font-size: 16px; font-weight: 700; fill: var(--pp-ink); }
.f-meta--neutral { font-size: 15px; font-weight: 700; fill: var(--pp-ink); }
.f-meta--source, .f-meta--target { font-size: 13px; font-weight: 750; fill: var(--pp-ink); }
.f-angle { fill: none; stroke: var(--pp-ink); stroke-width: 2; stroke-dasharray: 3 3; }
.f-lone-pair { filter: drop-shadow(0 0 3px rgba(44, 95, 107, 0.28)); }
.f-transfer-path { fill: none; stroke: var(--pp-amber); stroke-width: 3; stroke-dasharray: 7 5; }
.f-transfer-electron { filter: drop-shadow(0 0 5px rgba(224, 181, 99, 0.9)); }
.f-na { fill: var(--pp-coral); }
.f-cl { fill: var(--pp-marine); }
.f-proton { fill: var(--pp-coral); }
.f-neutron { fill: var(--pp-ink); opacity: 0.5; }

/* ── Reduceret bevægelse ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .atom3d-btn, .atom3d__info, .atom3d__limits, .atom3d__sources {
    transition: none;
  }
}

/* På telefoner skal scene, primær handling og atombygning fungere som ét
   cockpit i den første skærmhøjde. Derfor er scenen kompakt, og de faktiske
   opgavekontroller kommer før brødtekst og sekundært stof. */
@media (max-width: 719px) {
  .atom3d__stage, .atom3d__fallback-stage { order: 0; }
  .atom3d__primary { order: 1; margin: 6px 0; }
  .atom3d__build, .atom3d__saltkort { order: 2; }
  .atom3d__legend { order: 3; }
  .atom3d__secondary, .atom3d__controls { order: 3; }
  .atom3d__info, .atom3d-feedback--outside { order: 4; }
  .atom3d__info { margin: 6px 0; min-height: 2.5em; font-size: 14px; }
  .atom3d__done, .pp3d-fallback { order: 6; }
  .atom3d__limits { order: 7; }
  .atom3d__sources { order: 8; }

  .atom3d__stage {
    height: clamp(176px, 32dvh, 230px);
  }
  .atom3d__fallback-stage { min-height: 176px; height: clamp(176px, 32dvh, 230px); }
  .atom3d__readout { gap: 5px; margin-bottom: 6px; }
  .atom3d__readout > div { padding: 5px 7px; }
  .atom3d__readout dd { font-size: 17px; }
  .atom3d__steppers { gap: 4px; }
  .atom3d-stepper { gap: 4px; }
  .atom3d-feedback { margin-top: 5px; font-size: 13px; }
  .atom3d__build { margin: 2px 0 6px; }
  .atom3d__saltkort { margin-bottom: 6px; gap: 5px; }
  .atom3d__saltkort > div { padding: 5px 8px; }
  .atom3d__saltkort dd { font-size: 13px; }
  .atom3d__legend { margin: 4px 0 6px; gap: 6px; font-size: 13px; }
}

/* ── Bredere skærme: scene og kontroller side om side ───────────────── */

@media (min-width: 720px) {
  .atom3d {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
  }
  .atom3d__stage { flex: 1 1 55%; min-width: 320px; height: clamp(360px, 60dvh, 560px); }
  .atom3d__info, .atom3d__build, .atom3d__readout, .atom3d__saltkort, .atom3d__primary,
  .atom3d__secondary, .atom3d__legend { flex: 1 1 40%; min-width: 280px; }
  .atom3d__done, .atom3d__limits, .atom3d__sources { flex: 1 1 100%; }
  .atom3d > .atom3d-feedback--outside { flex: 1 1 40%; min-width: 280px; }
}