/* The four topic warm-ups. Coordinates are artboard px off Storyboard 5a. */

/* The "Nice work!" / "Completed!" banner shared by three of the four. */
.wu-done {
  position: absolute;
  margin: 0;
  color: var(--teal);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

/* On the footer line beside Back (P2 p24, p42). */
.wu-done-foot {
  top: 561px;
  left: 0;
  right: 0;
}

/* Just right of Back, where the care board ends (P2 p4). */
.wu-done-left {
  top: 557px;
  left: 178px;
  width: 340px;
}

/* ---------- Family History: the family tree (p11-14) ---------- */

.mintcard-tree {
  top: 133px;
  left: 191px;
  width: 676px;
  height: 453px;
  padding: 25px 12px;
}

.tree-instruction {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

/* Asset126 drawn 1:1 where p12 places it (stage 267, 196.25), measured from
   the mint card's padding box; the person buttons are clear hit areas over
   each avatar and its name, in the art's own units. */
.tree {
  position: absolute;
  top: 51.25px;
  left: 64px;
  width: 524px;
  height: 354.9px;
}

.tree > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tree-person {
  position: absolute;
  width: 104px;
  height: 98px;
  margin: -33px 0 0 -52px;
  background: none;
}

.tree-person:not(.is-source):not([disabled]) {
  cursor: pointer;
}

.tree-person::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 21px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transition: box-shadow 0.2s ease;
}

.tree-person:not(.is-source):not([disabled]):not([aria-pressed="true"]):not(.is-wrong):hover::before {
  box-shadow: 0 0 0 3px var(--aqua);
}

/* Wrong picks keep the hover ring off — the red layer already marks them. */
.tree-person.is-wrong {
  animation: none;
  border-color: transparent !important;
  color: inherit !important;
}

/* shake() flags the person and their _red ring for 2s: both wiggle, and the
   ring overrides the layer's inline display:none while it's flagged. */
.tree g.is-wrong {
  display: inline !important;
  transform-box: fill-box;
}

.tree g.is-new {
  transform-box: fill-box;
  transform-origin: center;
  animation: dna-in 0.4s ease both;
}

@keyframes dna-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tree-side {
  top: 133px;
  left: 891px;
  width: 365px;
  min-height: 277px;
  padding: 16px 22px;
  text-align: center;
}

.tree-count {
  margin: 28px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.tree-count strong {
  font-weight: 600;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 20px;
}

.star {
  display: block;
  width: 63px;
  height: 61px;
  color: var(--white);
}

.star svg {
  display: block;
  width: 100%;
  height: 100%;
}

.star.is-on {
  color: var(--lime);
}

.tree-note {
  margin: 33px 0 0;
  font-size: var(--fs-body);
  line-height: 1.38;
  text-align: left;
}

.tree-note.is-done {
  margin-top: 12px;
}

/* ---------- Drag-and-drop (care board) ---------- */

.drag-chip {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.drag-chip.is-dragging {
  /* Hide the tray copy while the floating ghost follows the pointer so the
     two don't stack into a trail under the scaled stage. */
  opacity: 0;
  pointer-events: none;
}

/* The tap/keyboard equivalent of holding an item mid-drag: the picked item
   lifts and every drop zone advertises itself as a target. */
.drag-chip[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--teal), var(--shadow-pop);
  transform: translateY(-3px);
}

[data-drop].is-target {
  cursor: pointer;
}

[data-drop].is-target::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--teal);
  pointer-events: none;
}

/* ---------- Managing Kidney Disease: the care board (P2 p1-4) ---------- */

.board {
  position: absolute;
  top: 139px;
  left: 60px;
  width: 580px;
  height: 389px;
  border: 12px solid #b9e1dd;
  border-radius: 22px;
  background: var(--mint);
}

.board.is-over {
  border-color: var(--teal);
}

.board-tab {
  position: absolute;
  top: 21px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 175px;
  height: 35px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #7fbdb6;
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
}

.board-slots {
  display: grid;
  grid-template-columns: repeat(2, 154px);
  justify-content: center;
  gap: 25px 50px;
  margin-top: 73px;
}

.board-slot {
  position: relative;
  display: grid;
  place-items: center;
  height: 119px;
  border: 2px dashed #8fc4be;
  border-radius: 12px;
}

.board-slot.is-filled {
  border: 0;
}

.board-slot > .note-pin {
  top: 6px;
  left: 30px;
  transform: none;
}

.note-tray {
  position: absolute;
  top: 197px;
  left: 704px;
  display: grid;
  grid-template-columns: repeat(3, 146px);
  gap: 20px 38px;
}

.note {
  position: relative;
  display: grid;
  place-items: center;
  height: 119px;
  padding: 14px 10px;
  border: 2px solid #cfe3e6;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.note.is-wrong {
  border-color: #e3a2a6;
  background: #fbeced;
}

.note.is-pinned {
  width: 100%;
  height: 100%;
  animation: pin-in 0.35s ease both;
}

@keyframes pin-in {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-4deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.note-pin {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.note-pin svg {
  width: 20.4px;
  height: 21.1px;
}

/* ---------- Risk and Early Detection: A Closer Look (P2 p22-24) ---------- */

.scan-grid {
  position: absolute;
  top: 120px;
  left: 196px;
  display: grid;
  grid-template-columns: repeat(2, 420px);
  gap: 14px 12px;
}

.scan-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  height: 201px;
  padding: 9px 14px 0;
  border: 9px solid var(--mint);
  border-radius: 14px;
  outline: 1px solid var(--aqua);
  outline-offset: -1px;
  background: var(--white);
  overflow: hidden;
}

.scan-face {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.scan-card strong {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
}

.scan-card p {
  margin: 7px 0 0;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
}

.scan-btn {
  width: 124px;
  height: 36px;
  margin-top: 10px;
  font-size: 17px;
}

.scan-tag {
  margin-top: 11px;
  color: var(--teal);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Asset152: the 373.5 x 4 green line that sweeps down the card while it
   scans, starting level with the top of the avatar (P2 p23). */
.scan-beam {
  position: absolute;
  top: 20.2px;
  left: 14.4px;
  width: 373.5px;
  height: 4px;
  background: #b8d537;
  opacity: 0;
}

.scan-card.is-scanning .scan-beam {
  animation: scan-sweep 0.9s linear;
}

@keyframes scan-sweep {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(157px);
  }
}

/* ---------- Healthy Lifestyle: Power Up Your Habits (P2 p40-42) ---------- */

.mintcard-meter {
  top: 111.4px;
  left: 219.4px;
  width: 826.1px;
  height: 292.7px;
  /* With .gauge's top margin, the title's ink sits ~13px from the card edge
     and ~13px above the arcs. */
  padding: 9px 0 0;
  text-align: center;
}

.meter-title {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
  font-weight: 600;
}

.gauge {
  width: 255.4px;
  margin: 11px auto 0;
}

.gauge svg {
  display: block;
  width: 100%;
  overflow: visible;
}

/* Rotates about the hub of Asset157's needle. */
.gauge-needle {
  transform-box: view-box;
  transform-origin: 125.3px 128.3px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.meter-pct {
  display: inline-block;
  min-width: 101.5px;
  margin: 6px 0 0;
  padding: 1px 16px;
  border-radius: 10px;
  background: #e9f1c0;
  color: var(--navy);
  font-size: 30px;
  font-weight: 600;
  line-height: 39.4px;
}

.meter-pct.is-zero {
  color: var(--meter-empty);
}

.meter-count {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

/* Two rows of three, sized to P2 p40: the long first habit wraps to two
   lines and the second row is centred under the first. */
.habit-grid {
  position: absolute;
  top: 418.5px;
  left: 217.5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px 15px;
  width: 830px;
}

.habit {
  height: 53px;
  padding: 0 16px;
  line-height: 22.5px;
  border: 1px solid var(--aqua);
  border-radius: 8px;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18.27px;
  white-space: pre-line;
  font-weight: 500;
  transition:
    opacity 0.4s ease,
    background 0.2s ease;
}

.habit:nth-child(1) {
  width: 412.7px;
  padding: 0 6px;
  font-size: 17.85px;
}

.habit:nth-child(2) {
  width: 192.5px;
}

.habit:nth-child(3) {
  width: 189.5px;
}

.habit:nth-child(4) {
  width: 236px;
}

.habit:nth-child(5) {
  width: 295.4px;
}

.habit:nth-child(6) {
  width: 175.7px;
}

.habit:hover:not(:disabled) {
  background: var(--ice);
}

/* A charged habit greys out in place rather than vanishing, so the list
   still reads as a whole at 4 of 4 (P2 p42). */
.habit.is-on {
  border-color: #eef3f3;
  background: #f9fcfc;
  color: #c9cfd1;
  pointer-events: none;
}

.habit.is-wrong {
  border-color: #d1495b;
  background: #fdecee;
  color: #a5273a;
}