/* Feature landing page people-management only (its mock UI from src/features/people-management.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.mk-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--line-200); border-radius: 999px; font-size: 14px; color: var(--ink-400); }
.mk-search--lg { height: 50px; border: 2px solid var(--blue-360); color: var(--ink-900); font-size: 15px; }
.dot--lav { background: var(--lavender-300); }
.pm-dir { max-width: 1120px; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-frame); transform-origin: 50% 0; will-change: transform, opacity; }
.pm-dir__bar { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line-100); }
.pm-dir__title { display: flex; flex-direction: column; }
.pm-dir__title b { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.pm-dir .mk-search { width: 300px; margin-left: auto; color: var(--ink-900); }
.pm-dir__add { margin-left: 0; height: 38px; }
.pm-dir__filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; }
.pm-row { display: grid; grid-template-columns: 2fr 1.1fr 1fr 1.4fr 1.6fr; align-items: center; gap: 12px; padding: 11px 22px; font-size: 13.5px; color: var(--ink-600); }
.pm-row--head { padding-top: 8px; padding-bottom: 8px; background: var(--surface-1); font-size: 11px; color: var(--ink-300); }
.pm-row__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-row__who b { font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.pm-row.is-match { background: #f3f7ff; }
.pm-hub__group { margin: 18px 0 6px; font-size: 11px; color: var(--ink-300); }
.pm-hub__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.pm-hub__row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pm-hub__row b { font-weight: 500; }
.pm-hub__row small { display: flex; align-items: center; gap: 6px; }
.pm-hub__row .dot { width: 8px; height: 8px; }
.pm-profile__head { display: flex; align-items: center; gap: 14px; }
.pm-profile__head .mk-av { width: 52px; height: 52px; font-size: 17px; }
.pm-profile__head > div { flex: 1; }
.pm-profile__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-profile__info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0; }
.pm-profile__info div { padding: 10px 12px; border-radius: 12px; background: var(--surface-1); }
.pm-profile__info .pm-wide { grid-column: span 2; }
.pm-profile__info dt { font-size: 11px; color: var(--ink-350); }
.pm-profile__info dd { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-800); }
.pm-profile__info dd .i { color: var(--blue-500); }
.pm-profile__label { margin: 18px 0 8px; font-size: 11px; color: var(--ink-300); }
.pm-profile__hist { display: flex; justify-content: space-between; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-1); font-size: 14px; }
.pm-profile__hist em { font-style: normal; color: var(--ink-350); font-size: 13px; }
.pm-team__head { display: flex; align-items: center; gap: 14px; }
.pm-team__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-team__leader { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border-radius: 14px; background: var(--surface-1); }
.pm-team__leader > span { display: flex; flex-direction: column; font-size: 14px; }
.pm-team__leader b { font-weight: 500; }
.pm-team__leader small { display: flex; align-items: center; gap: 5px; color: var(--blue-500); }
.pm-team__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-team__roles div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--surface-1); font-size: 14px; }
.pm-team__roles .is-open { grid-column: span 2; background: #fff; border: 1.5px dashed var(--blue-200); color: var(--ink-600); }
.pm-team__roles .pill-dark .i { margin-right: 4px; }
.pm-team__note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink-500); }
.pm-team__note .i { color: var(--blue-500); }
.pm-links { width: 100%; max-width: 440px; }
.pm-links__person { display: flex; align-items: center; gap: 12px; max-width: 300px; padding: 14px 16px; }
.pm-links__person .mk-av { width: 44px; height: 44px; font-size: 15px; }
.pm-links__person > span { display: flex; flex-direction: column; font-size: 16px; }
.pm-links__list { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0 34px; padding: 12px 0 0 30px; }
.pm-links__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 34px; width: 1.5px; background: rgba(255, 255, 255, .28); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s var(--ease-out); }
.pm-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.pm-link::before { content: ""; position: absolute; left: -31px; top: 50%; width: 30px; height: 1.5px; background: rgba(255, 255, 255, .28); }
.pm-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.pm-link b { font-weight: 500; }
.pm-link em { font-style: normal; font-size: 12px; color: var(--ink-400); }
.pm-links.is-in .pm-links__list::before { transform: none; }
.pm-links.is-in .pm-link { opacity: 1; transform: none; }
.pm-links.is-in .pm-link:nth-child(2) { transition-delay: .18s; }
.pm-links.is-in .pm-link:nth-child(3) { transition-delay: .36s; }
.pm-engage { max-width: 520px; }
.pm-engage__head { display: flex; align-items: baseline; justify-content: space-between; }
.pm-engage__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-heat { display: grid; grid-template-columns: 70px repeat(12, minmax(0, 1fr)); gap: 5px; align-items: center; margin-top: 18px; }
.pm-heat__label { font-size: 11px; color: var(--ink-350); }
.pm-heat i, .pm-engage__legend i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--surface-3); }
.pm-heat i { opacity: 0; transform: scale(.6); }
.pm-heat.is-in i { animation: heatIn .6s var(--ease-out) var(--d) both; }
.pm-heat i.l1, .pm-engage__legend i.l1 { background: #dbe8fe; }
.pm-heat i.l2, .pm-engage__legend i.l2 { background: #9fc3fb; }
.pm-heat i.l3, .pm-engage__legend i.l3 { background: var(--blue-500); }
.pm-engage__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--ink-350); }
.pm-engage__legend i { width: 11px; }
.pm-engage__legend span { margin: 0 4px; }
.pm-engage__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.pm-engage__stats div { padding: 12px; border-radius: 12px; background: var(--surface-1); }
.pm-engage__stats b { display: block; margin-top: 2px; font-size: 24px; font-weight: 500; letter-spacing: -0.045em; }
.pm-fields { max-width: 480px; }
.pm-fields__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pm-fields__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-field { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: var(--surface-1); font-size: 14px; }
.pm-field b { flex: 1; font-weight: 500; }
.pm-field em { font-style: normal; font-size: 12px; color: var(--ink-400); padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-150); }
.pm-field--new { background: #fff; border: 1.5px dashed var(--blue-300); }
.pm-fields__btn { margin-top: 14px; height: 40px; padding: 0 18px; font-size: 14px; gap: 6px; }
.pm-family { max-width: 440px; }
.pm-family__head { display: flex; align-items: center; gap: 14px; }
.pm-family__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-family__label { margin: 18px 0 8px; font-size: 11px; color: var(--ink-300); text-align: center; }
.pm-family__row { position: relative; display: flex; justify-content: center; align-items: center; gap: 28px; }
.pm-fm { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; padding: 12px 8px; border-radius: 14px; background: var(--surface-1); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.pm-fm .mk-av { width: 40px; height: 40px; font-size: 14px; }
.pm-fm b { font-weight: 500; }
.pm-family__link { width: 28px; height: 1.5px; margin: 0 -28px; background: var(--blue-300); transform: scaleX(0); transition: transform .6s var(--ease-out) .3s; }
.pm-family__tree { position: relative; height: 26px; margin-top: 6px; }
.pm-family__tree i { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--blue-300); transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s var(--ease-out) .5s; }
.pm-family__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; }
.pm-family__stats span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface-1); font-size: 12px; color: var(--ink-600); }
.pm-family__stats .i { color: var(--blue-500); }
.pm-family.is-in .pm-fm { opacity: 1; transform: none; }
.pm-family.is-in .pm-family__row:last-of-type .pm-fm { transition-delay: .7s; }
.pm-family.is-in .pm-family__link, .pm-family.is-in .pm-family__tree i { transform: none; }
.pm-tl { max-width: 480px; }
.pm-tl__head b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }
.pm-tl__list { position: relative; margin-top: 16px; padding-left: 22px; }
.pm-tl__list::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: var(--line-200); }
.pm-tl__list li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--ink-600); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out) var(--d), transform .6s var(--ease-out) var(--d); }
.pm-tl__list li i { position: absolute; left: -21px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--blue-500); }
.pm-tl__list li:nth-child(n+4) i { border-color: var(--ink-300); }
.pm-tl__list b { font-weight: 500; color: var(--ink-900); }
.pm-tl__list span { flex: 1; }
.pm-tl__list em { font-style: normal; font-size: 12px; color: var(--ink-350); white-space: nowrap; }
.pm-tl.is-in li { opacity: 1; transform: none; }
.pm-tl__alert { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--pink-150); color: #b9587b; font-size: 13px; }
.reduce-motion .pm-link, .reduce-motion .pm-fm, .reduce-motion .pm-tl__list li, .reduce-motion .pm-heat i { opacity: 1; transform: none; animation: none; }
.reduce-motion .pm-links__list::before, .reduce-motion .pm-family__link, .reduce-motion .pm-family__tree i { transform: none; }
@keyframes heatIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .pm-dir__bar { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .pm-dir .mk-search { order: 3; width: 100%; }
  .pm-dir__add { margin-left: auto; }
  .pm-dir__filters { padding: 12px 16px; flex-wrap: nowrap; overflow: hidden; -webkit-mask: linear-gradient(90deg, #000 78%, transparent); mask: linear-gradient(90deg, #000 78%, transparent); }
  .pm-row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr); padding: 10px 16px; font-size: 13px; }
  .pm-hide-s { display: none; }
  .pm-links__list { margin-left: 20px; padding-left: 22px; }
  .pm-link::before { left: -23px; width: 22px; }
  .pm-heat { grid-template-columns: 56px repeat(12, minmax(0, 1fr)); gap: 3px; }
  .pm-fm { width: 84px; }
  .pm-engage__stats { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
  .pm-engage__stats div { padding: 10px; }
  .pm-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .pm-link .mk-ico { grid-row: span 2; }
  .pm-link em { grid-column: 2; justify-self: start; }
}