/* Avatars, profile photos and the negotiation table band.
 * A later pass over the base layer — order matters, keep it loaded after the files above. */
.avatar{overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.large{width:80px;height:80px;font-size:1.8rem;background:#dde6f6;color:#263e68}
.photo-row{margin:8px 0 22px}
.photo-label{cursor:pointer;position:relative}
.photo-label:focus-within{outline:3px solid #829dff}
.profile-top{border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer}
.lesson-point{padding:22px 0;border-bottom:1px solid var(--line)}
.lesson-point:first-child{padding-top:0}
.lesson-point:last-child{border:0;padding-bottom:0}
.lesson-point h2{font-size:1.3rem;margin:16px 0 9px}
.lesson-point p{color:#4c5f7a;margin:0}
.lesson-ref{font-size:.9rem}
.lesson-ref a{text-decoration:none;font-weight:600}
.answer{display:block;width:100%;text-align:left;padding:15px;border:1px solid var(--line);border-radius:9px;margin:10px 0;background:white;color:var(--ink);line-height:1.6}
.answer:hover{border-color:var(--blue)}
.answer.correct{background:#eef8d5;border-color:#7b9e37}
.answer.incorrect{background:#fff1e8;border-color:#c99263}
.source .btn{margin-top:auto}
summary{cursor:pointer;font-weight:600}
.profile-top .avatar{width:33px;height:33px}
.lesson-layout h1{font-size:clamp(2rem,3vw,3rem)}
.negotiation-table{background:#14213a;color:#fff;border-radius:22px;padding:27px;display:grid;grid-template-columns:1fr .8fr 1fr;gap:22px;margin:26px 0}
.participant{display:flex;align-items:center;gap:16px;min-width:0}
.participant h2{font-size:1.3rem;margin:6px 0;letter-spacing:-.025em}
.participant p{font-size:.82rem;line-height:1.5;margin:0;color:#b7c7df}
.participant .eyebrow{font-size:.67rem;color:#d6f774;letter-spacing:.13em}
.participant.them .eyebrow{color:#a8bdff}
.character-head,.avatar.character-head{width:88px;height:88px;flex-shrink:0;border-radius:50%;border:3px solid #d6f774;box-shadow:0 0 0 6px #ffffff0b;display:grid;place-items:center;overflow:hidden;font-size:2.2rem;background-color:#dbe5f8;color:#14213a}
.character-head.illustrated{background-size:500% 200%;border-color:#a4b8ff}
.avatar.character-head img{width:100%;height:100%;object-fit:cover}
.table-center{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:9px}
.table-center .tag{align-self:center;background:#34415b;color:#e0eaff;font-size:.7rem}
.table-center b{font-size:.95rem;line-height:1.4}
.table-center small{color:#9db0ca}
.deal-metrics{grid-column:1/-1;border-top:1px solid #ffffff22;padding-top:23px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.deal-metrics>div{padding-left:18px;border-left:1px solid #ffffff22}
.deal-metrics>div:first-child{padding-left:0;border:0}
.deal-metrics span{display:block;font-size:.79rem;color:#cad6e7}
.deal-metrics b{font-size:2.15rem;letter-spacing:-.04em;display:block;margin:7px 0;color:#d6f774;font-variant-numeric:tabular-nums}
.deal-metrics small{font-size:.73rem;color:#a5b8d2}
.deal-metrics .their-metric b{color:#b2c3ff}
.issue legend{display:flex;align-items:center;gap:10px}
.issue-number{border-radius:6px;background:#eaf0ff;color:#3d60df;font-size:.75rem;padding:5px 7px}
.option-value{display:block;font-size:1.04rem;font-weight:700;line-height:1.5;margin-top:4px;font-variant-numeric:tabular-nums}
.choice input{width:16px;height:16px}
.option-points{margin-top:9px}
.option-points b{font-size:1rem}
.tour-bubble{position:fixed;margin:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border:1px solid #cfdcf3;border-radius:16px;padding:23px;box-shadow:0 24px 80px #0a183d55;z-index:9999}
.tour-bubble::backdrop{background:#0e193e55}
.tour-bubble h2{font-size:1.4rem;margin:20px 0 12px}
.tour-bubble p{font-size:.94rem;color:#50617c;line-height:1.7}
.tour-bubble .btn{font-size:.88rem;padding:10px 15px}
.tour-bubble .tag{font-size:.68rem}
.tour-skip{background:transparent;color:#60728e;text-decoration:underline;font-size:.78rem;padding:4px}
.tour-target{outline:4px solid #b9e85d!important;outline-offset:5px;border-radius:12px}
.tour-bubble[data-side=left]{border-right:5px solid #90afed}
.tour-bubble[data-side=right]{border-left:5px solid #90afed}
.tour-bubble[data-side=bottom]{border-top:5px solid #90afed}