/* Net worth lesson. All rules scoped under .nw-* */

/* the opening */
.nw-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.nw-who { height: 200px; width: auto; }
.nw-tags { display: flex; gap: 8px; }
.nw-tag { padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; background: var(--surface); border: 2px solid var(--gold); color: var(--gold); }
.nw-tag.car { border-color: var(--line-strong); color: var(--text); }
.nw-intro small { font-size: 12px; color: var(--faint); }
.nw-in .nw-who { animation: nwWalk .7s cubic-bezier(.3,1.2,.5,1) both; }
.nw-in .nw-tag { animation: nwDrop .5s cubic-bezier(.3,1.5,.5,1) both; }
.nw-in .nw-tag.pay { animation-delay: .55s; } .nw-in .nw-tag.car { animation-delay: .8s; }
@keyframes nwWalk { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nwDrop { from { transform: translateY(-24px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* the staircase */
.nw-st { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.nw-read { display: flex; align-items: baseline; gap: 8px; }
.nw-read span { font-size: 13px; font-weight: 700; color: var(--dim); }
.nw-read b { font: 700 22px var(--mono); color: var(--gold); }
.nw-read.neg b { color: var(--violet-bright); }
.nw-svg { width: 100%; max-width: 330px; height: auto; display: block; overflow: visible; }
.nw-under { fill: rgba(123,92,253,.07); }
.nw-ground { stroke: #6FBF73; stroke-width: 3; }
.nw-gl { fill: var(--dim); font: 700 14px var(--mono); }
.nw-ledge { stroke: var(--text); stroke-width: 2; opacity: .5; }
.nw-blk rect { stroke: rgba(0,0,0,.3); stroke-width: 1; }
.nw-blk.own rect { fill: var(--gold); }
.nw-blk.owe rect { fill: var(--violet); stroke: rgba(255,255,255,.6); stroke-width: 1.5; stroke-dasharray: 5 3; }
.nw-blk text { font: 700 14px var(--sans); text-anchor: middle; fill: #1d1405; }
.nw-blk.owe text { fill: #fff; }
.nw-blk text.out { fill: var(--text); }

/* the cards to tap */
.nw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.nw-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 64px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--text); text-align: left; }
.nw-card small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nw-card.own { border-color: rgba(252,192,80,.7); background: rgba(252,192,80,.10); } .nw-card.own small { color: var(--gold); }
.nw-card.owe { border-color: rgba(169,155,255,.8); border-style: dashed; background: rgba(123,92,253,.14); } .nw-card.owe small { color: var(--violet-bright); }
.nw-card b { font-size: 15px; }
.nw-card span { font-size: 12px; color: var(--dim); font-weight: 600; line-height: 1.2; }
.nw-card.used { opacity: .35; }

/* side by side */
.nw-pair { width: 100%; }
.nw-pair .choices.nw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.nw-pair .choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; min-height: 0; text-align: center; }
.nw-pair .choice img { height: 120px; width: auto; }
.nw-pair .choice b { font-size: 16px; }
.nw-pair .choice small { font-size: 12px; color: var(--dim); font-weight: 700; }
.nw-nw { font-style: normal; font: 700 15px var(--mono); color: var(--gold); margin-top: 4px; min-height: 20px; }
.nw-nw.neg { color: var(--violet-bright); }

/* ten years on */
.nw-two-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; text-align: center; }
.nw-two-figs > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nw-two-figs img { height: 150px; width: auto; }
.nw-two-figs b { font-size: 16px; }
.nw-two-figs small { font-size: 12px; color: var(--dim); font-weight: 700; }

@media (max-height: 700px) {
  .nw-who { height: 150px; }
  .nw-svg { max-width: 284px; }
  .nw-lee img { height: 40px; }
  .nw-card { min-height: 56px; padding: 6px 9px; }
  .nw-pair .choice img { height: 90px; }
  .nw-two-figs img { height: 110px; }
}

.nw-nb { white-space: nowrap; }
.nw-int { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--violet-bright); text-align: center; opacity: 0; transition: opacity .4s; }
.nw-int.on { opacity: 1; }
.nw-lee { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 330px; margin: 0 auto 6px; padding: 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.nw-lee img { height: 48px; width: auto; }
.nw-lee span { font-size: 13px; font-weight: 700; color: var(--dim); }
.nw-lee b { font: 700 16px var(--mono); color: var(--violet-bright); }
.nw-lee em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: var(--dim); }
.nw-compact .nw-svg { max-width: 280px; }
@media (max-height: 700px) { .nw-compact .nw-svg { max-width: 258px; } }
.nw-nw small { display: block; font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.nw-lee b { white-space: nowrap; }