/* Psychosexual development lesson. All rules scoped under .px-. */

/* ---------- 1. the case card ---------- */
.px-page {
  position: relative; width: min(100%, 320px); margin: 0 auto; border-radius: 6px; padding: 16px 18px 18px;
  background: #EFE6D2; color: #24190E; transform: rotate(-1.2deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(36,25,14,.12);
  animation: pxPage .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pxPage { from { opacity: 0; transform: rotate(-1.2deg) translateY(10px); } }
.px-page .ph { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A6A55; margin-bottom: 10px; }
.px-page .pt { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.3; }
.px-paul { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; background: #EFE6D2; color: #24190E; }
.px-paul .ph { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7A6A55; }
.px-paul .pt { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.25; }

/* ---------- 2. the first six years ---------- */
.px-stages .px-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.px-stages .slot .n { font-size: 12px; }
.px-stages .px-row .v { font-size: 12px; line-height: 1.15; letter-spacing: -0.01em; }
/* No translate on the entrance: a transform on the scene's last child adds to
   #scene's scrollHeight and play.mjs fails the lesson for overflowing. */
.px-stages .px-after { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; transition: opacity .45s; }
.px-stages.on .px-after { opacity: 1; }
.px-stages .px-after .cap { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.px-stages .pill { padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); font-size: 13px; font-weight: 700; color: var(--dim); line-height: 1.2; }
.px-stages .pill small { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 3px; }

/* ---------- 3. where it sticks: the march ---------- */
.px-march { display: flex; flex-direction: column; gap: 10px; }
.px-lane { position: relative; height: 56px; }
.px-man { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(252,192,80,.5); }
.px-strip { display: grid; grid-template-columns: 38px repeat(3, 1fr) 38px; gap: 6px; align-items: stretch; }
.px-end { display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl; transform: rotate(180deg); }
.px-hide .px-tr-r, .px-hide .px-note { visibility: hidden; }
.px-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 96px; padding: 12px 5px 10px;
  border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--text); font: inherit; text-align: center;
  transition: border-color .2s, background .2s, opacity .2s;
}
.px-cell b { font-size: 15px; font-weight: 800; }
.px-cell small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--dim); }
.px-cell em { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--faint); }
.px-cell .px-tr { font-size: 12px; line-height: 1.2; color: var(--gold); margin-top: 3px; }
.px-flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .2s; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #2A1B00; background: var(--gold); padding: 1px 7px; border-radius: 999px;
}
.px-cell.hot { border-color: var(--gold); background: rgba(252,192,80,.1); }
.px-cell.hot .px-flag { opacity: 1; }
.px-cell.wrong { border-color: var(--red); }
.px-cell.off { opacity: .5; }
.px-cell.told { pointer-events: none; }
.px-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 11px 14px; border-radius: 14px; border: 2px solid var(--gold); background: rgba(252,192,80,.08); }
.px-out .lb { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); flex: none; }
.px-out .tx { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--text); text-align: right; }
.px-out .tx.in { animation: pxFade .25s ease-out both; }
@keyframes pxFade { from { opacity: 0; } }

/* ---------- 4 and 5. the tests ---------- */
.px-test { display: flex; flex-direction: column; gap: 7px; }
.px-tr-h, .px-tr-r { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.px-test.two .px-tr-h, .px-test.two .px-tr-r { grid-template-columns: 112px 1fr; }
.px-tr-h > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.px-keys, .px-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.px-keys b { font-size: 12px; font-weight: 700; color: var(--dim); }
.px-tr-r > span:first-child { font: 600 13px var(--mono); color: var(--dim); }
button.px-tr-r { width: 100%; min-height: 32px; padding: 4px 6px; border: 2px solid transparent; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; }
.px-tr-r.top > span:first-child { color: var(--gold); }
.px-tr-r.top .px-bars i:first-child { background: var(--gold); }
.px-tr-r.wrong { border-color: var(--red); }
.px-tr-r.right { border-color: var(--mint); background: rgba(63,214,154,.1); }
.px-tr-h { padding: 0 8px; }
.px-test.two .px-tr-r > span:first-child { font: 600 14px var(--sans); color: var(--text); }
.px-bars i { display: block; height: 14px; border-radius: 4px; background: var(--violet-bright); }
.px-test.two .px-bars i { height: 22px; }
.px-test.two.lit .px-bars i, .px-test.lit .px-tr-r.top .px-bars i { background: var(--gold); }
.px-note { font-size: 12px; color: var(--faint); }

@media (max-height: 700px) {
  .px-stages .px-after { margin-top: 10px; }
  .px-cell { min-height: 88px; padding-top: 10px; }
  .px-out { min-height: 52px; }
  .px-page .pt { font-size: 20px; }
  .px-bars i { height: 12px; }
  button.px-tr-r { min-height: 28px; padding: 2px 6px; }
}