/* Attachment Styles lesson. All rules scoped under .ast-* */

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

/* the map */
.ast-map { --anx: #A99BFF; --avo: #4FC9C2; display: block; width: 100%; max-width: 330px; height: auto; max-height: 40vh; margin: 0 auto; overflow: visible; }
.ast-box { fill: #141A2E; stroke: var(--line-strong); stroke-width: 1; }
.ast-grid line { stroke: rgba(234, 227, 215, .06); stroke-width: 1; }
.ast-ya, .ast-yh { stroke: var(--anx); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .3s, stroke-width .3s; }
.ast-xa, .ast-xh { stroke: var(--avo); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .3s, stroke-width .3s; }
.ast-yl { font: 700 15px var(--sans); fill: var(--anx); }
.ast-xl { font: 700 15px var(--sans); fill: var(--avo); text-anchor: end; }
.ast-map.ast-hi-anx .ast-ya, .ast-map.ast-hi-anx .ast-yh { opacity: 1; stroke-width: 4; }
.ast-map.ast-hi-avo .ast-xa, .ast-map.ast-hi-avo .ast-xh { opacity: 1; stroke-width: 4; }
.ast-seg { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: .6; }

.ast-dot .ast-glow { fill: var(--gold); opacity: .22; }
.ast-dot .ast-core { fill: var(--gold); stroke: #FFF3D6; stroke-width: 2; }
.ast-dot { transition: opacity .3s; }
.ast-map.ast-crowd .ast-dot { opacity: .9; }

/* corners */
.ast-qf { fill: transparent; stroke: none; transition: fill .3s; }
.ast-cn { font: 700 15px var(--sans); fill: var(--text); text-anchor: middle; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ast-map.ast-quiet .ast-q.lit .ast-qf { fill: rgba(252, 192, 80, .08); }
.ast-map.ast-quiet .ast-q.lit .ast-cn { opacity: 1; }
.ast-map.ast-lines .ast-q.lit .ast-cn { opacity: .55; }
.ast-mid line { stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; transition: opacity .4s; }
.ast-map.ast-lines .ast-mid line { opacity: .7; }

/* the crowd and three people */
.ast-cloud circle { fill: var(--dim); opacity: .45; }
.ast-map.ast-end .ast-cloud circle { opacity: .18; }
.ast-people { display: none; }
.ast-map.ast-ppl .ast-cloud circle { opacity: .2; }
.ast-map.ast-ppl .ast-q.lit .ast-cn { opacity: .3; }
.ast-map.ast-ppl .ast-dot { opacity: .3; }
.ast-map.ast-ppl .ast-people { display: inline; }
.ast-people circle { fill: var(--violet-bright); stroke: #fff; stroke-width: 1.5; }
.ast-people text { font: 700 14px var(--sans); fill: var(--text); paint-order: stroke; stroke: #0A0E1A; stroke-width: 4px; }
.ast-d1, .ast-d2 { stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.ast-d1 { stroke: var(--mint); }
.ast-d2 { stroke: var(--red); stroke-dasharray: 5 4; }
.ast-map.ast-dist .ast-d1, .ast-map.ast-dist .ast-d2 { opacity: 1; }

/* the questions */
.ast-scale { width: 100%; max-width: 360px; margin: 0 auto; }
.ast-lik { display: flex; justify-content: space-between; gap: 4px; }
.ast-o { flex: 1 1 0; min-width: 0; height: 48px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ast-o i { display: block; border-radius: 50%; border: 2.5px solid var(--line-strong); background: var(--surface); transition: transform .15s, background .15s, border-color .15s; }
.ast-o1 i, .ast-o7 i { width: 40px; height: 40px; }
.ast-o2 i, .ast-o6 i { width: 34px; height: 34px; }
.ast-o3 i, .ast-o5 i { width: 28px; height: 28px; }
.ast-o4 i { width: 22px; height: 22px; }
.ast-o1 i, .ast-o2 i, .ast-o3 i { border-color: #6F7A99; }
.ast-o5 i, .ast-o6 i, .ast-o7 i { border-color: var(--gold-deep); }
.ast-o:active i { transform: scale(.9); }
.ast-o.on i { background: var(--gold); border-color: var(--gold); transform: scale(1.08); }
.ast-ends { display: flex; justify-content: space-between; margin-top: 4px; font: 700 13px var(--sans); color: var(--dim); padding: 0 4px; }

@media (max-height: 700px) {
  .ast-map { max-height: 40vh; }
}