/* Embedding lesson. All rules scoped under .em-* */

.em-sc { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.em-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the map */
.em-map { position: relative; display: flex; flex-direction: column; gap: 6px; }
.em-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.em-bg { fill: #0D1224; stroke: var(--line); }
.em-grid line { stroke: rgba(169,155,255,.07); stroke-width: 1; }
.em-w circle { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.em-w text { font-family: var(--sans); font-size: 15px; font-weight: 700; fill: var(--dim); text-anchor: middle; paint-order: stroke; stroke: #0D1224; stroke-width: 4px; stroke-linejoin: round; transition: fill .4s; }
.em-w.k-an circle { fill: var(--violet); stroke: var(--violet-bright); }
.em-w.k-dr circle { fill: var(--gold); stroke: #FFE2A0; }
.em-w.k-ve circle { fill: var(--streak); stroke: #FFC2AE; }
.em-w.k-dy circle { fill: var(--mint); stroke: #A8F0D2; }
.em-w.k-an text, .em-w.k-dr text, .em-w.k-ve text, .em-w.k-dy text { fill: var(--text); }
.em-w.k-new circle { fill: #fff; stroke: var(--gold); stroke-width: 2.5; }
.em-w.k-new text { fill: #fff; }
.em-w.em-hot circle { stroke: #fff; stroke-width: 3; }
.em-w.em-hot text { fill: #fff; }

/* kitten's neighborhoods */
.em-zone { fill: rgba(169,155,255,.05); stroke: rgba(169,155,255,.22); stroke-width: 1.5; stroke-dasharray: 5 5; cursor: pointer; transition: fill .3s, stroke .3s, opacity .3s; }
.em-zone.em-yes { fill: rgba(123,92,253,.16); stroke: var(--violet-bright); stroke-dasharray: none; }
.em-zone.em-off { opacity: .25; }

/* the arrow */
.em-arrow { cursor: grab; }
.em-arrow .em-hit { stroke: transparent; stroke-width: 34; stroke-linecap: round; }
.em-arrow .em-shaft { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.em-arrow .em-head { fill: var(--gold); }
.em-arrow.em-held .em-shaft { stroke-width: 5; }
.em-arrow.em-landed .em-shaft { stroke: #FFE2A0; }
.em-arrow.em-twin { opacity: .4; pointer-events: none; animation: emFade .4s both; }
@keyframes emFade { from { opacity: 0; } }
.em-ghost circle { fill: transparent; stroke: rgba(169,155,255,.35); stroke-dasharray: 3 3; }
.em-ghost text { opacity: 0; }
.em-ghost.em-found circle { fill: var(--gold); stroke: #FFE2A0; stroke-dasharray: none; transition: fill .3s; }
.em-ghost.em-found text { opacity: 1; fill: #fff; font-size: 17px; transition: opacity .3s; }

/* the sentence being read */
.em-strip { display: flex; justify-content: center; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: var(--serif); font-size: 17px; color: var(--text); text-align: center; }
.em-strip { flex-direction: column; gap: 4px; }
.em-fits { font-family: var(--sans); font-size: 13px; color: var(--dim); }
.em-fits b { color: var(--violet-bright); }
.em-fits s { color: var(--faint); }
.em-w .em-hitw { fill: transparent; stroke: none; }
.em-w.em-cand { cursor: pointer; }
.em-w.em-mine circle:not(.em-hitw) { stroke: var(--violet-bright); stroke-width: 3; }
.em-w.em-mine text { fill: var(--violet-bright); }
.em-w.em-found circle:not(.em-hitw) { fill: var(--gold); stroke: #FFE2A0; }
.em-w.em-found text { fill: #fff; font-size: 17px; }
.em-fill { color: var(--gold); font-style: normal; animation: emLand .25s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes emLand { from { transform: scale(.7); opacity: 0; } }

/* search */
.em-wait { padding: 14px; border-radius: 12px; border: 1.5px dashed var(--line-strong); color: var(--dim); font-size: 14px; line-height: 1.4; text-align: center; }
.em-search { display: flex; flex-direction: column; gap: 12px; }
.em-q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 22px; background: #F2EDE3; color: #1B1A18; font-size: 16px; font-weight: 600; }
.em-q svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #6E6960; stroke-width: 2.4; stroke-linecap: round; }
.em-res { display: flex; flex-direction: column; gap: 8px; }
.em-page { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); }
.em-page span { font-size: 15px; color: var(--violet-bright); font-weight: 600; }
.em-page i { display: block; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; opacity: 0; transition: opacity .3s; }
.em-page i b { display: block; height: 100%; width: 0; background: var(--dim); border-radius: 4px; }
.em-res.em-on .em-page i { opacity: 1; }
.em-page.em-best { border-color: var(--gold); }
.em-page.em-best i b { background: var(--gold); }

/* he to she */
.em-axis { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 16px; background: #0D1224; border: 1px solid var(--line); }
.em-ax-cap { font-size: 13px; color: var(--dim); text-align: center; }
.em-ax { display: flex; align-items: center; gap: 8px; }
.em-end { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--text); }
.em-bar { flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--violet-bright), var(--gold)); }
.em-jobs { position: relative; height: 64px; }
.em-job { position: absolute; top: 0; transform: translateX(-50%); padding: 3px 8px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; animation: emLand .3s cubic-bezier(.34,1.56,.64,1) both; }
.em-job.r2 { top: 32px; }
.em-job.em-top1 { border-color: var(--gold); color: var(--gold); }

.em-pop { animation: emPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes emPop { 50% { opacity: .6; } }

@media (max-height: 700px) {
  .em-strip { min-height: 34px; padding: 6px 10px; font-size: 15px; }
  .em-page { padding: 8px 10px; }
}