/* Persona overlap (widgets/overlap/overlap.js) */
.ov { --ov-0: #3fb1bd; --ov-1: #f7931e; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 24px; padding: 18px 24px; }
.ov__pick { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.ov__row { display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
.ov__p { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--a-card); box-shadow: inset 0 0 0 1px var(--a-line); font-size: 11px !important; font-weight: 600; letter-spacing: .02em; }
.ov__p:hover, .ov__p:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; }
.ov__p:disabled { opacity: .3; }
.ov__p.is-on[data-side="0"] { background: var(--ov-0); color: #fff; box-shadow: none; }
.ov__p.is-on[data-side="1"] { background: var(--ov-1); color: #fff; box-shadow: none; }
.ov__main { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.ov__heads { display: flex; align-items: center; gap: 14px; }
.ov__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ov__who b { display: block; font-size: 14px; font-weight: 600; }
.ov__sub { font-size: 11.5px; color: var(--muted); }
.ov__init { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; }
.ov__who[data-side="0"] .ov__init { background: var(--ov-0); } .ov__who[data-side="1"] .ov__init { background: var(--ov-1); }
.ov__x { color: var(--muted); }
.ov__tracks { display: grid; gap: 7px; }
.ov__tr { display: grid; grid-template-columns: 80px minmax(0, 1fr) 70px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.ov__tr > span:first-child { text-align: right; }
.ov__tr.is-far > span { color: var(--ink); font-weight: 600; }
.ov__line { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ov__span { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: left .6s ease, width .6s ease; }
.ov__tr.is-far .ov__span { background: color-mix(in srgb, var(--a-coral) 35%, transparent); }
.ov__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--a-surface); transition: left .6s cubic-bezier(.3,.8,.3,1); }
.ov__dot--0 { background: var(--ov-0); } .ov__dot--1 { background: var(--ov-1); }
.ov__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ov__out p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.ov__out em { font-style: normal; color: var(--muted); }
.ov__how { margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.ov__tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--a-teal) 18%, transparent); font-size: 11.5px; }
.ov__tag--pain { background: color-mix(in srgb, var(--a-coral) 16%, transparent); }
/* Narrow frames (≤ 640px; class set by widgets/aha-kit/kit.js). */
.ov.aha--w640 { grid-template-columns: 1fr; align-content: start; padding: 14px; }
.aha--w640 .ov__main { justify-content: flex-start; }
.aha--w640 .ov__pick { flex-direction: column; align-items: flex-start; gap: 6px; }
.aha--w640 .ov__row { grid-template-columns: repeat(6, 26px); gap: 3px; }
.aha--w640 .ov__p { width: 26px; height: 26px; font-size: 9.5px !important; }
.aha--w640 .ov__out { grid-template-columns: 1fr; gap: 6px; }
.aha--w640 .ov__tr { grid-template-columns: 62px minmax(0, 1fr) 52px; font-size: 10.5px; }
.aha--w640 .ov__x { display: none; }
.aha--w640 .ov__heads { flex-direction: column; align-items: flex-start; gap: 6px; }