/* Cognitive dissonance lesson. All rules scoped under .cd-* */

.cd-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cd-note { font-size: 12px; color: var(--faint); text-align: center; max-width: 330px; }
.cd-hero img { width: 100%; max-width: 300px; max-height: 250px; object-fit: contain; display: block; margin: 0 auto; }

/* the peg board */
.cd-board { display: grid; grid-template-columns: repeat(4, 54px); gap: 8px; padding: 12px; border-radius: 18px; background: #6A4A32; border: 3px solid #8E6A4C; }
.cd-peg { width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0; background: #3A2618; display: grid; place-items: center; cursor: pointer; }
.cd-peg i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #D9B98A; box-shadow: inset 0 -3px 0 #A88658; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.cd-peg b { display: block; width: 4px; height: 22px; border-radius: 2px; background: #6A4A32; }
.cd-mini { grid-template-columns: repeat(4, 30px); gap: 5px; padding: 7px; border-radius: 12px; }
.cd-mini .cd-peg { width: 30px; height: 30px; cursor: default; }
.cd-mini .cd-peg i { width: 18px; height: 18px; border-radius: 4px; }
.cd-mini .cd-peg b { height: 12px; width: 3px; }
.cd-count { font: 700 14px var(--mono); color: var(--dim); }
.cd-count b { color: var(--text); }

/* the rating scale */
.cd-rscale { width: 100%; max-width: 320px; padding: 30px 8px 0; }
.cd-rline { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #5B6A8E, var(--line-strong), var(--gold-deep)); }
.cd-rdot { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 0 4px rgba(169, 155, 255, .25); transition: left .15s; }
.cd-rends { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; line-height: 1.25; }

/* pictures */
.cd-pic { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.cd-pic img { height: 170px; max-width: 100%; object-fit: contain; display: block; }
.cd-pic span { font-size: 13px; color: var(--dim); font-weight: 600; }
.cd-smk img { height: 92px; }

/* the machine */
.cd-m { --k: 0; width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cd-card { position: relative; padding: 9px 14px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; transition: border-color .4s, box-shadow .4s; }
.cd-card small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cd-card b { display: block; font: 700 18px/1.25 var(--serif); }
.cd-rsn { display: none; margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(63, 214, 154, .14); color: var(--mint); font-size: 14px; font-weight: 700; }
.cd-has-rsn .cd-rsn { display: inline-block; }
.cd-wv { position: relative; height: 58px; }
.cd-wv canvas { width: 100%; height: 100%; display: block; }
.cd-free .cd-think { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252, 192, 80, .18); }
.cd-free .cd-did { opacity: .7; }

/* $1 or $20 */
.cd-bills img { height: 64px; display: block; }
.cd-chart { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 7px; }
.cd-row { display: grid; grid-template-columns: 1fr; gap: 2px; }
.cd-row > span { font-size: 13px; font-weight: 700; color: var(--dim); }
.cd-trk { position: relative; height: 22px; border-radius: 11px; background: var(--raised); }
.cd-trk::before { content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; background: var(--line-strong); }
.cd-trk i { position: absolute; top: 3px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #8FA8E8; opacity: 0; transition: left 1s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.cd-trk b { position: absolute; top: 1px; left: 50%; font: 800 14px/20px var(--mono); opacity: 0; transition: opacity .4s .7s, left 1s cubic-bezier(.2, .8, .2, 1); }
.cd-shown .cd-trk i { left: var(--x); opacity: 1; }
.cd-shown .cd-trk b { left: calc(var(--x) + 12px); opacity: 1; }
.cd-d1 .cd-trk i { background: var(--gold); }
.cd-d1 .cd-trk b { color: var(--gold); }
.cd-none .cd-trk i { background: var(--dim); }
.cd-you .cd-trk i { background: var(--violet-bright); opacity: 1; left: var(--x); }
.cd-you .cd-trk b { opacity: 1; left: calc(var(--x) + 12px); color: var(--violet-bright); transition: none; }
.cd-you > span { color: var(--violet-bright); }
.cd-axis { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--faint); }

/* effort bars */
.cd-ebars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 5px; }
.cd-eb { display: grid; grid-template-columns: 124px 1fr; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--dim); }
.cd-eb > div { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.cd-eb i { display: block; height: 100%; width: 0; border-radius: 7px; background: #8FA8E8; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cd-shown .cd-eb0 i { width: 52%; }
.cd-shown .cd-eb1 i { width: 51%; }
.cd-shown .cd-eb2 i { width: 70%; background: var(--gold); }
.cd-ebars small { font-size: 12px; color: var(--faint); text-align: center; }

/* the toy warnings */
.cd-warn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 330px; }
.cd-warn div { padding: 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); text-align: center; }
.cd-warn small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cd-warn b { font: 700 17px/1.25 var(--serif); }

@media (max-height: 700px) {
  .cd-board:not(.cd-mini) { grid-template-columns: repeat(4, 48px); gap: 7px; padding: 10px; }
  .cd-board:not(.cd-mini) .cd-peg { width: 48px; height: 48px; }
  .cd-mini { grid-template-columns: repeat(4, 24px); }
  .cd-mini .cd-peg { width: 24px; height: 24px; }
  .cd-mini .cd-peg i { width: 15px; height: 15px; }
  .cd-pic img { height: 120px; }
  .cd-smk img { height: 64px; }
  .cd-card { padding: 6px 12px 7px; }
  .cd-card b { font-size: 16px; }
  .cd-wv { height: 44px; }
  .cd-bills img { height: 44px; }
  .cd-chart { gap: 4px; }
  .cd-hero img { max-height: 190px; }
}