/* Bohr-model atom builder — a sandbox, not a game.
 *
 * Loaded alongside quiz.css (shares .quiz-btn, .quiz-wrap, .quiz-lib__h)
 * and inherits the .hdwk design tokens from movie.css. Tokens only, no raw
 * brand hex — scripts/check_css_tokens.py enforces this.
 *
 * Colour language: teal is structure and "as expected", amber carries a
 * refusal ("that shell is full"), tangerine marks the proton controls.
 * Never red-for-wrong, never red-with-green — and a sandbox has no wrong
 * anyway, only refusals with reasons.
 */

.hdwk .bohr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 760px) {
  .hdwk .bohr-layout { grid-template-columns: 1fr; }
}

/* ------------------------------- stage ------------------------------- */

.hdwk .bohr-stage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
}
.hdwk .bohr-svg {
  display: block;
  width: 100%;
  height: auto;
  /* The whole surface is a drop target; a grab cursor invites the drag. */
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.hdwk .bohr-shell {
  fill: none;
  stroke: var(--teal2);
  stroke-width: 2;
  opacity: .55;
  transition: opacity .15s ease, stroke-width .15s ease;
}
.hdwk .bohr-shell.is-faint { opacity: .22; stroke-dasharray: 4 6; }
/* The band a drag is hovering: the ring answers, so the student knows
   exactly which shell will take the drop before they let go. */
.hdwk .bohr-shell.is-over { opacity: 1; stroke-width: 5; }

.hdwk .bohr-nucleus circle {
  fill: var(--soft);
  stroke: var(--teal2);
  stroke-width: 2;
}
.hdwk .bohr-nucleus text {
  text-anchor: middle;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
}
.hdwk .bohr-nucleus__p { fill: var(--accent); }
.hdwk .bohr-nucleus__n { fill: var(--muted); }

.hdwk .bohr-electron circle {
  fill: var(--teal);
  stroke: #fff;
  stroke-width: 2;
}
.hdwk .bohr-electron text {
  text-anchor: middle;
  dominant-baseline: central;
  fill: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
}
.hdwk .bohr-electron { cursor: grab; }
.hdwk .bohr-electron.is-lifted { opacity: .3; }
/* The invisible touch halo bohr.js draws around each electron — it must not
   inherit the teal fill the rule above gives every electron circle, and
   "transparent" (not "none") keeps it hit-testable. */
.hdwk .bohr-electron circle.bohr-electron__hit { fill: transparent; stroke: none; }
/* outline on an SVG <g> is unreliable across engines, so keyboard focus
   paints the electron itself: a gold ring nothing else on the stage wears. */
.hdwk .bohr-electron:focus { outline: none; }
.hdwk .bohr-electron:focus-visible .bohr-electron__dot {
  stroke: var(--gold);
  stroke-width: 5;
}

/* Each occupied shell drifts at its own pace — the "alive" the owner asked
   for. Rotation is around the atom's centre, so distance-from-centre
   hit-testing is untouched by it. */
.hdwk .bohr-orbit { transform-origin: 280px 280px; }
.hdwk .bohr-orbit--0 { animation: bohr-spin 26s linear infinite; }
.hdwk .bohr-orbit--1 { animation: bohr-spin 44s linear infinite reverse; }
.hdwk .bohr-orbit--2 { animation: bohr-spin 62s linear infinite; }
.hdwk .bohr-orbit--3 { animation: bohr-spin 80s linear infinite reverse; }
@keyframes bohr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hdwk .bohr-orbit { animation: none; }
  .hdwk .bohr-shell, .hdwk .bohr-note { transition: none; }
}

/* ------------------------------ controls ------------------------------ */

.hdwk .bohr-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem .4rem 0;
}
.hdwk .bohr-protonctl {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.hdwk .bohr-protonctl__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}
.hdwk .bohr-arrow {
  appearance: none;
  border: 2px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  width: 44px;   /* full thumb-sized target — these are phone controls */
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.hdwk .bohr-arrow:hover { border-color: var(--accent); }
/* Teal focus on the light page, matching the quiz.css convention. */
.hdwk .bohr-arrow:focus-visible,
.hdwk .bohr-tray__chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.hdwk .bohr-tray {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.hdwk .bohr-tray__chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hdwk .bohr-tray__chip.is-lifted { opacity: .35; }
.hdwk .bohr-tray__hint {
  font-size: .8rem;
  color: var(--muted);
  max-width: 15em;
}

/* The dragged electron that follows the pointer. Positioned inline by
   bohr.js (left/top track the pointer — genuinely dynamic, the same
   precedent as drill.js's ghost tile). Appended inside the stage, not to
   <body>, so the .hdwk tokens are in scope. */
.hdwk .bohr-ghost {
  position: fixed;
  z-index: 40;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  pointer-events: none;
}

/* ------------------------------ readout ------------------------------- */

.hdwk .bohr-readout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.hdwk .bohr-readout__id {
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.hdwk .bohr-readout__symbol {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
}
.hdwk .bohr-readout__symbol sup { font-size: 1.2rem; }
.hdwk .bohr-readout__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
}
.hdwk .bohr-readout__count {
  font-size: .85rem;
  color: var(--muted);
  margin: .5rem 0 .8rem;
}
.hdwk .bohr-readout__rows {
  margin: 0 0 .8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .8rem;
}
.hdwk .bohr-readout__rows > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--line);
  padding-bottom: .25rem;
}
.hdwk .bohr-readout__rows dt {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}
.hdwk .bohr-readout__rows dd {
  margin: 0 0 0 .6rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}
/* The arrangement value ("2,8,8,2") outgrows a half-width cell — give the
   last row the whole line so label and value never collide. */
.hdwk .bohr-readout__rows > div:last-child { grid-column: 1 / -1; }
.hdwk .bohr-readout__charge { margin: 0 0 .4rem; }
.hdwk .bohr-tag {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}
.hdwk .bohr-tag--neutral {
  background: var(--soft);
  color: var(--teal);
  border: 1px solid var(--teal2);
}
/* An ion is not an error — gold, the house "notice this" colour, not amber
   (amber is reserved for refusals here). */
.hdwk .bohr-tag--ion {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border: 1px solid var(--gold-line);
}
.hdwk .bohr-readout__hint {
  font-size: .85rem;
  color: var(--ink);
  background: var(--soft);
  border-radius: 10px;
  padding: .6rem .8rem;
  margin: .6rem 0 .5rem;
}
.hdwk .bohr-tidy { font-size: .8rem; }

/* -------------------------------- note -------------------------------- */

.hdwk .bohr-note {
  min-height: 3.2em;
  margin-top: .8rem;
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.hdwk .bohr-note.is-on {
  opacity: 1;
  background: var(--soft);
  color: var(--teal);
  border: 1px solid var(--teal2);
}
/* Refusals are amber — visible, reasoned, and never red. */
.hdwk .bohr-note.is-refuse {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border: 1px solid var(--amber);
}

/* ---------------------------------------------------------------------
   Atom challenge — the question laid over the builder.
   Right is teal, wrong is tangerine: never red, never red-with-green.
   --------------------------------------------------------------------- */

.hdwk .atomq {
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal2);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px 16px;
  margin: 0 0 18px;
}

.hdwk .atomq__bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .04em;
}

.hdwk .atomq__score { color: var(--teal); font-weight: 700; }

.hdwk .atomq__ask {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.3;
  color: var(--teal);
  margin: 6px 0 2px;
}

.hdwk .atomq__hint { font-size: 14px; color: var(--muted); margin: 0 0 10px; }

.hdwk .atomq__answer { margin-bottom: 10px; }

.hdwk .atomq__input {
  font: inherit;
  font-size: 17px;
  padding: 11px 13px;
  width: min(22rem, 100%);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.hdwk .atomq__input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.hdwk .atomq__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hdwk .atomq__btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  cursor: pointer;
}

.hdwk .atomq__btn:hover { background: var(--teal2); }
.hdwk .atomq__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hdwk .atomq__btn--next { background: var(--accent); }

.hdwk .atomq__verdict { margin: 10px 0 0; font-size: 15px; font-weight: 600; min-height: 1.2em; }
.hdwk .atomq__verdict.is-right { color: var(--teal); }
.hdwk .atomq__verdict.is-wrong { color: var(--accent); }

/* Practice / quiz chooser. Two cards rather than a switch: the difference
   is worth spelling out, because one of them writes a score down and the
   other deliberately does not. Selection is carried by border, weight and
   the is-on background together, never by colour alone. */
.hdwk .atomq-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.hdwk .atomq-mode__opt {
  display: block;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  min-height: 44px;
}

.hdwk .atomq-mode__opt:hover { border-color: var(--teal2); }
.hdwk .atomq-mode__opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.hdwk .atomq-mode__opt.is-on {
  border-color: var(--teal);
  background: var(--soft);
}

.hdwk .atomq-mode__name {
  display: block;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
}

.hdwk .atomq-mode__opt.is-on .atomq-mode__name::after {
  content: " \2713";
}

.hdwk .atomq-mode__what {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}