/* Hindsight bias lesson. All rules scoped under .hb-* */

.hb-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* the flip card */
.hb-card { position: relative; width: calc(100% - 16px); max-width: 340px; height: 150px; margin: 6px 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; perspective: 900px; }
.hb-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 0 5px 0 var(--line-strong); backface-visibility: hidden; transition: transform .6s cubic-bezier(.2, .8, .2, 1); text-align: left; }
.hb-face small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hb-face b { font: 700 19px/1.3 var(--serif); }
.hb-back { transform: rotateY(180deg); border-color: var(--gold); box-shadow: 0 5px 0 var(--gold-deep); }
.hb-back small { color: var(--gold); }
.hb-flip .hb-front { transform: rotateY(-180deg); }
.hb-flip .hb-back { transform: rotateY(0); }
.hb-card.hb-flip { pointer-events: none; }
.hb-why { opacity: 0; transition: opacity .4s; width: 100%; max-width: 340px; }
.hb-why.on { opacity: 1; }
.hb-why span { display: block; padding: 10px 14px; border-radius: 14px; background: rgba(123, 92, 253, .14); border-left: 4px solid var(--violet-bright); font-size: 15px; line-height: 1.35; }

.hb-q { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; padding: 18px; border-radius: 20px; background: var(--surface); border: 2px dashed var(--line-strong); text-align: center; }
.hb-q small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hb-q b { font: 700 20px/1.3 var(--serif); }

/* before and after */
.hb-two { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; width: 100%; }
.hb-pan { display: flex; flex-direction: column; gap: 6px; padding: 16px 10px; min-height: 120px; justify-content: center; border-radius: 18px; background: var(--surface); border: 2px dashed var(--line-strong); text-align: center; }
.hb-pan small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hb-pan b { font-size: 16px; line-height: 1.25; }
.hb-after { border: 2px solid var(--gold); }
.hb-alt { border-color: var(--violet-bright); }
.hb-arrow { font-size: 22px; font-weight: 800; color: var(--dim); }

/* said and remembered */
.hb-bars { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.hb-bar span { display: block; font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 4px; }
.hb-track { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 7px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.hb-said { width: 40%; background: var(--violet-bright); }
.hb-mem { width: 0; background: var(--gold); }
.hb-shown .hb-mem { width: 62%; }
.hb-note { font-size: 12px; color: var(--faint); text-align: center; }

/* pictures */
.hb-pic { width: 100%; display: flex; justify-content: center; }
.hb-pic img { height: 130px; max-width: 100%; object-fit: contain; display: block; }
.hb-scan { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hb-scan img { height: 200px; max-width: 100%; object-fit: contain; border-radius: 12px; display: block; }
.hb-scan span { font-size: 13px; color: var(--dim); }
@media (max-height: 700px) { .hb-scan img { height: 150px; } .hb-pic img { height: 96px; } .hb-card { height: 136px; } }