/* Comparative method lesson. All rules scoped under .cpm-* */
.cpm-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* word tiles */
.cpm-tl { display: inline-block; text-align: center; white-space: nowrap; min-width: 84px; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #2A2F4A, #1C2135); border: 1.5px solid var(--line-strong); box-shadow: 0 4px 0 #0D1122;
  font: 700 22px var(--serif); color: var(--text); letter-spacing: .01em; }
.cpm-tl small { display: block; font: 700 11.5px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.cpm-tl i, .cpm-w i { font-style: normal; transition: color .35s, background .35s, box-shadow .35s; border-radius: 6px; padding: 0 1px; }

/* the table */
.cpm-tab { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.cpm-hd, .cpm-row { display: grid; grid-template-columns: 52px 1fr 1fr; align-items: center; gap: 10px; padding: 0 4px 0 10px; }
.cpm-hd b { font: 800 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.cpm-row { width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; min-height: 56px; border-radius: 14px;
  animation: cpmDrop .5s cubic-bezier(.2,.9,.25,1.2) both; }
button.cpm-row { cursor: pointer; }
@keyframes cpmDrop { from { opacity: 0; translate: 0 -26px; } }
.cpm-mean { font: 700 14px var(--sans); color: var(--dim); }
.cpm-w { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; background: linear-gradient(180deg, #2A2F4A, #1C2135);
  border: 1.5px solid var(--line-strong); box-shadow: 0 4px 0 #0D1122; font: 700 23px var(--serif); color: var(--text); }
.cpm-row.cpm-lit .cpm-w { border-color: rgba(252,192,80,.55); }
.cpm-row.cpm-lit .cpm-w i, .cpm-solved .cpm-tl i { color: #1A1206; background: var(--gold); box-shadow: 0 0 14px rgba(252,192,80,.6); }

/* answer tiles in the scene */
.cpm-pk { width: 100%; }
.cpm-pk .choices.cpm-opts { display: flex; flex-direction: row; justify-content: center; gap: 10px; }
.cpm-pk .cpm-opts .choice { flex: 0 1 104px; min-height: 54px; justify-content: center; font: 700 21px var(--serif); padding: 6px 8px; }
.cpm-pk .cpm-clay .choice { background: linear-gradient(180deg, #C99A6B, #A8774B); color: #2B1808; border-color: #E0B88A; }
.cpm-pk .cpm-clay .choice.right { border-color: var(--mint); box-shadow: 0 0 0 2px var(--mint); }
.cpm-pk .cpm-clay .choice.wrong { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }

/* a family: parent over children */
.cpm-fam { width: 100%; max-width: 330px; padding-top: 8px; display: flex; flex-direction: column; align-items: center; }
.cpm-par { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cpm-par small, .cpm-kid small { font: 700 11.5px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.cpm-par .cpm-tl { min-width: 110px; border-style: dashed; border-color: var(--violet-bright); }
.cpm-solved .cpm-par .cpm-tl { border-style: solid; border-color: var(--gold); box-shadow: 0 4px 0 #0D1122, 0 0 12px rgba(252,192,80,.35); }
.cpm-lines { width: 70%; height: 36px; margin: 4px 0; }
.cpm-lines path { stroke: var(--violet-bright); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; opacity: .7; }
.cpm-kids { width: 100%; display: flex; justify-content: space-between; gap: 8px; }
.cpm-two .cpm-kids { justify-content: center; gap: 48px; }
.cpm-kid { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: cpmDrop .5s cubic-bezier(.2,.9,.25,1.2) both; }
.cpm-two .cpm-kid { flex: 0 0 auto; }
.cpm-kid:nth-child(2) { animation-delay: .18s; } .cpm-kid:nth-child(3) { animation-delay: .36s; }
.cpm-kid .cpm-tl { min-width: 0; width: 100%; max-width: 100px; font-size: 20px; padding: 8px 6px; }
.cpm-rule { min-height: 20px; font: 800 14px var(--sans); font-style: normal; color: var(--gold); opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s; }
.cpm-rule.cpm-on { opacity: 1; translate: 0 0; }

/* the Roman stone */
.cpm-slab { position: relative; width: 100%; max-width: 340px; padding: 0; border: 0; background: none; cursor: pointer; }
.cpm-slab img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.cpm-cut { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .06em; font: 700 64px var(--serif); letter-spacing: .08em; }
.cpm-cut b { color: #8C8377; text-shadow: 0 -1px 0 rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.7); opacity: 0; scale: 1.4; transition: opacity .25s, scale .25s; }
.cpm-cut b.cpm-on { opacity: 1; scale: 1; }

/* Saussure and bone */
.cpm-sau { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.cpm-face { width: 38%; max-width: 150px; border-radius: 14px; box-shadow: 0 6px 14px rgba(0,0,0,.45); margin: 10px 0; }
.cpm-face.cpm-solo { width: 60%; max-width: 240px; }
.cpm-bone { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cpm-bpar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cpm-bpar small { font: 700 11.5px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.cpm-bpar .cpm-tl { border-style: dashed; border-color: var(--violet-bright); }
.cpm-gap { display: inline-flex; vertical-align: -5px; margin-right: 2px; align-items: center; justify-content: center; width: 26px; height: 30px; border: 2px dashed var(--gold); border-radius: 6px; font-style: normal; color: #1A1206; }
.cpm-gap.cpm-pulse { animation: cpmPulse 1.2s ease-in-out 3; }
.cpm-gap.cpm-found { border-style: solid; background: var(--gold); box-shadow: 0 0 16px rgba(252,192,80,.7); }
@keyframes cpmPulse { 50% { box-shadow: 0 0 14px rgba(252,192,80,.8); } }
.cpm-bkids { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cpm-bkids .cpm-tl { min-width: 0; font-size: 19px; padding: 6px 10px; }
.cpm-sau .cpm-bkids { flex-direction: column; align-items: stretch; }

/* the tablet */
.cpm-photo { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 28px 30px; min-height: 0; }
.cpm-photo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 16px; box-shadow: 0 8px 18px rgba(0,0,0,.5); }

@media (max-height: 700px) {
  .cpm-tab { gap: 7px; }
  .cpm-row, .cpm-w { min-height: 46px; }
  .cpm-w { font-size: 21px; }
  .cpm-cut { font-size: 52px; }
  .cpm-face { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .cpm-row, .cpm-kid { animation: none; } }