/* Analysis paralysis lesson. All rules scoped under .apz-* */

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

/* the two apartments */
.apz-scale { --t: 0deg; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.apz-cards { width: 100%; display: grid; grid-template-columns: 1fr 74px 1fr; align-items: end; gap: 6px; }
.apz-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.apz-card img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; display: block; transition: filter .5s, opacity .5s; }
.apz-card b { font: 800 16px var(--sans); color: var(--text); }
.apz-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 4px; }
.apz-day { padding: 4px 10px; border-radius: 999px; background: var(--raised); border: 2px solid var(--line-strong); font: 600 13px var(--mono); white-space: nowrap; }
.apz-mid small { font-size: 12px; color: var(--dim); font-weight: 700; white-space: nowrap; }
.apz-stamp { position: absolute; top: 34%; left: 50%; padding: 4px 10px; border: 3px solid var(--text); border-radius: 8px; background: rgba(10, 14, 26, .85); color: var(--text); font: 800 15px var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); transition: opacity .25s, transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.apz-rented .apz-ca img { filter: grayscale(1); opacity: .45; }
.apz-rented .apz-ca .apz-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }

/* the balance */
.apz-bal { position: relative; width: 100%; height: 156px; }
.apz-post { position: absolute; left: 50%; bottom: 0; width: 14px; height: 70px; margin-left: -7px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--gold), var(--gold-deep)); }
.apz-post::after { content: ''; position: absolute; left: -22px; right: -22px; bottom: -4px; height: 8px; border-radius: 4px; background: var(--gold-deep); }
.apz-beam { position: absolute; left: 21%; right: 21%; bottom: 68px; height: 8px; border-radius: 4px; background: var(--gold); transform: rotate(var(--t)); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.apz-pan { position: absolute; bottom: 4px; width: 120px; margin-left: -60px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; transform: rotate(calc(-1 * var(--t))); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.apz-pa { left: 0; }
.apz-pb { left: 100%; }
.apz-pan > i { display: block; width: 100%; height: 8px; border-radius: 0 0 10px 10px; background: rgba(252, 192, 80, .5); }
.apz-chips { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; padding-bottom: 3px; }
.apz-chip { display: block; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; animation: apz-drop .45s cubic-bezier(.3, 1.3, .5, 1) both; }
.apz-ka { background: rgba(216, 120, 85, .22); border: 1.5px solid #D98A5F; color: #F3C9AE; }
.apz-kb { background: rgba(120, 170, 230, .2); border: 1.5px solid #7FA8DC; color: #CFE0F6; }
@keyframes apz-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }

/* small scales */
.apz-mini { max-width: 200px; }
.apz-mini .apz-bal { height: 100px; }
.apz-mini .apz-post { height: 46px; }
.apz-mini .apz-beam { bottom: 44px; left: 26%; right: 26%; }
.apz-mini .apz-pan { width: 76px; margin-left: -38px; }
.apz-mini .apz-chip { font-size: 12px; padding: 4px 6px; }
.apz-mini.apz-wide { max-width: 320px; }
.apz-wide .apz-pan { width: 120px; margin-left: -60px; }
.apz-wide .apz-beam { left: 22%; right: 22%; }
.apz-pairs-box { width: 100%; max-width: 360px; }
.apz-pairs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.apz-pairs .choice { padding: 0; }
.apz-pair { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 6px 4px 10px; }
.apz-pair small { font-size: 12px; font-weight: 700; color: var(--dim); text-align: center; }
.apz-note.on { color: var(--gold); font-weight: 700; }
.apz-took-a .apz-ca img, .apz-took-b .apz-cb img { filter: drop-shadow(0 0 10px rgba(252, 192, 80, .8)); }
.apz-took-a .apz-ca b, .apz-took-b .apz-cb b { color: var(--gold); }
.apz-clock { font-size: 14px; color: var(--dim); }
.apz-clock b { font-family: var(--mono); color: var(--streak); }

.apz-note { font-size: 13px; color: var(--dim); text-align: center; }
.apz-takes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-height: 700px) {
  .apz-card img { max-width: 92px; }
  .apz-bal { height: 140px; }
}