/* Attachment in adults lesson. All rules scoped under .aia-* */

.aia-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aia-note { font-size: 12px; color: var(--faint); text-align: center; min-height: 15px; }

/* same bond */
.aia-pairs { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.aia-ph { display: grid; grid-template-columns: 1fr 22px 1fr; font: 700 13px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.aia-ph span:last-child { grid-column: 3; }
.aia-pr { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; opacity: .15; transition: opacity .4s; }
.aia-pr.on { opacity: 1; }
.aia-pr span { padding: 10px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); font-size: 14px; line-height: 1.3; color: var(--text); }
.aia-pr span:first-child { border-color: #6F7A99; }
.aia-pr span:last-child { border-color: var(--gold-deep); }
.aia-pr i { font-style: normal; text-align: center; color: var(--gold); }

/* the claim */
.aia-claim { width: 100%; max-width: 340px; padding: 18px 18px 14px; border-radius: 16px; background: var(--raised); border-left: 3px solid var(--gold); }
.aia-claim q { display: block; font: 600 21px/1.3 var(--serif); color: var(--text); }
.aia-claim span { display: block; margin-top: 8px; font-size: 13px; color: var(--dim); }

/* fifty babies */
.aia-grid { display: block; width: 100%; max-width: 360px; height: auto; max-height: 34vh; overflow: visible; }
.aia-tok { transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.aia-tok circle { fill: #3A4263; stroke: #6F7A99; stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.aia-tok.same circle { fill: var(--gold); stroke: #FFF3D6; }
.aia-tok.chg circle { fill: var(--red); stroke: #FFD9D9; }
.aia-gl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; opacity: 0; transition: opacity .4s; }
.aia-grid.split .aia-gl { opacity: 1; }
.aia-count { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 30px; }
.aia-count span { padding: 5px 12px; border-radius: 12px; font: 700 14px var(--sans); }
.aia-k0 { background: var(--surface); color: var(--dim); }
.aia-k1 { background: rgba(252, 192, 80, .16); color: var(--gold); }
.aia-k2 { background: rgba(216, 85, 85, .16); color: #FF9C9C; }

@media (max-height: 700px) {
  .aia-grid { max-height: 29vh; }
}