/* ID card "where do I go?" map card (assets/easter-lk.js). Tokens and motion from design.md §2 and §4. */

@keyframes rich-content-in { from { opacity: 0; filter: blur(6px); transform: translateY(10px) scale(.99); } }

.lk-where { margin-top: 32px; }

/* the card sits in the answer's place, then stays above it */
.lk-card { margin-top: 32px; padding: 8px; background: #fff; border-radius: var(--r-32); box-shadow: 0 0 0 1px var(--ink-5), var(--shadow-el-1); }
.lk-card:not(.in) { display: none; }
.lk-card.in { animation: rich-content-in .7s var(--ease) both; }
.lk-map { position: relative; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #dfe1e4; isolation: isolate; }
.lk-pic { position: absolute; inset: 0; }

/* tile pyramid: every layer is anchored on the office at the centre, then translated and scaled */
.lk-tiles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.lk-lyr { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: none; }
.lk-lyr.on { display: block; will-change: transform, opacity; }
.lk-lyr img { position: absolute; left: 0; top: 0; width: 257px; height: 257px; max-width: none; user-select: none; } /* 1px overlap hides seams */

/* the municipality: dim outside, white border */
.lk-border { position: absolute; left: 0; top: 0; z-index: 25; overflow: visible; transform-origin: 0 0; pointer-events: none; }
.lk-dim { fill: #000c1f; fill-opacity: .42; opacity: 0; }
.lk-line { fill: none; stroke: #fff; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }

.lk-shade { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(to top, #000c1f4d, #000c1f00 28%); box-shadow: inset 0 0 0 1px #000c1f0d; border-radius: inherit; }
.lk-pin { position: absolute; left: 50%; top: 50%; z-index: 31; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--navy); box-shadow: 0 0 0 3px #fff, 0 4px 12px #000c1f66; opacity: 0; }
.lk-pin.on { opacity: 1; }
.lk-ring { position: absolute; inset: -3px; border-radius: 999px; border: 2px solid #fff; opacity: 0; }
.lk-place { position: absolute; left: calc(50% + 18px); top: 50%; margin-top: -14px; z-index: 31; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-composer); white-space: nowrap; opacity: 0; }
.lk-place.on { opacity: 1; }
.lk-attr { position: absolute; right: 16px; bottom: 10px; z-index: 31; font-size: 10.5px; line-height: 1; letter-spacing: 0; color: #ffffffbf; }

/* under the map: a status line while looking, then the office */
.lk-foot { padding: 14px 12px 8px; }
.lk-status { display: grid; overflow: hidden; font-size: 15px; line-height: 1.4; color: var(--ink); }
.lk-g { grid-area: 1 / 1; }
.lk-g > span { display: inline-block; }
.lk-g.busy { color: var(--ink-65); animation: pulse 2s linear infinite; }

.lk-office { display: flex; flex-direction: column; gap: 6px; }
.lk-for { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-65); }
.lk-change { border: 0; background: none; padding: 0; font: inherit; color: var(--blue); cursor: pointer; }
.lk-change:hover { text-decoration: underline; text-underline-offset: 3px; }
.lk-name { font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.lk-facts { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--ink-65); }
.lk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lk-act { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink-10); background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s var(--ease); }
.lk-act:hover { background: var(--grey-50); }
.lk-act-main { border-color: var(--navy); background: var(--navy); color: #fff; }
.lk-act-main:hover { background: #00107a; }
.lk-act.lk-src { margin-left: auto; height: auto; padding: 0; border: 0; background: none; color: var(--ink-45); font-size: 13px; font-weight: 400; }
.lk-act.lk-src:hover { background: none; color: var(--ink-65); text-decoration: underline; text-underline-offset: 3px; }

.lk-turn .msg-ai > div:not(.thinking):first-child > :first-child { animation: rich-content-in .7s var(--ease) both; }

@media (max-width: 767px) {
  .lk-card { border-radius: 28px; padding: 6px; }
  .lk-map { border-radius: 22px; }
  .lk-foot { padding: 12px 10px 6px; }
  .lk-status { font-size: 14px; }
  .lk-name { font-size: 16px; }
  .lk-facts { font-size: 14px; }
  .lk-act.lk-src { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-card.in, .lk-turn .msg-ai > div:not(.thinking):first-child > :first-child { animation: none; }
}