/* action ai · the People screen (REDESIGN-R4-FOLLOWUPS-PEOPLE-2026-10-06).
   LIFTED from BUILD HANDOVER 2026-10-05 mockups/People Interactive v11 (review round 4).html (page CSS
   from src/people/pp.py; the name lines from src/review-tools/build_people_followups.py). Layout Option B
   (event sections, 2-column cards, locked 2026-05-20) is the app's own; only its look changes.
   Every value is the mockup's; only the SELECTORS change to the app's own classes (WIRING.md §5):
   .hd -> .learn-header, .ln -> .people-mode-btn / .tasks-filter-btn, .srch -> .people-search-bar,
   .eh -> .people-event-header, .grid -> .people-event-grid, .pcard -> .people-pcard, .prow -> .person-row,
   .dot -> .aa-conn--dot, .fn -> .aa-person-first + .pp4-last, .owe -> .aa-owed, .cl -> .aa-conn--row.
   Scoped to .scene-people.pp4; keyframes carry the pp4- prefix (KIT-1). Reduced motion: no animation. */

.scene-people.pp4 { position: relative; isolation: isolate; color: #F4F4F5; font-family: 'Hanken Grotesk', system-ui, sans-serif; padding-bottom: 110px; }
.scene-people.pp4 > * { position: relative; z-index: 1; }
/* the large-title sentinel stays out of the flow (index.html .lt-sentinel: absolute, 41px); the rule above made it a
   41px in-flow block that pushed the whole page down (found by spec 84 pin A's control, R4 finish) */
.scene-people.pp4 > .lt-sentinel { position: absolute; }
.scene-people.pp4 > .pp4-hsky { position: absolute; left: 0; right: 0; top: 0; height: 460px; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.pp4-hsky .sky1, .pp4-hsky .sky2 { position: absolute; inset: 0; background-repeat: repeat; }
.pp4-hsky .sky1 { background-image: radial-gradient(.6px .6px at 150px 20px,#fff9,transparent),radial-gradient(.6px .6px at 280px 120px,#fff7,transparent),radial-gradient(1px 1px at 20px 30px,#fff8,transparent),radial-gradient(1px 1px at 120px 80px,#fff6,transparent),radial-gradient(1.4px 1.4px at 200px 160px,#fffa,transparent),radial-gradient(1px 1px at 300px 40px,#fff5,transparent),radial-gradient(1px 1px at 60px 200px,#fff7,transparent); background-size: 340px 240px; opacity: .28; }
.pp4-hsky .sky2 { background-image: radial-gradient(1.6px 1.6px at 80px 60px,#C7C0FF,transparent),radial-gradient(1.2px 1.2px at 260px 190px,#FFE7B0,transparent),radial-gradient(1.2px 1.2px at 170px 120px,#B6F5E4,transparent); background-size: 360px 280px; opacity: .25; }

/* small-caps title */
/* the header box (its min-height reservation and its hairline under the account button) is the app's own, pinned by
   spec 84 pin A; only the title inside it is restyled */
.scene-people.pp4 .learn-header > div[style] { display: none; }
.scene-people.pp4 .learn-header .dash-title { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin: 0; text-align: left; flex: 1; }

/* the locked banner: card, amber 30% edge, lock icon, its own words, 16px */
.scene-people.pp4 .people-locked-banner { display: flex; gap: 12px; align-items: flex-start; margin: 10px 16px 0; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(253,203,110,.3); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }
.scene-people.pp4 .people-locked-banner b { color: #fff; }
.scene-people.pp4 .people-locked-banner-icon { width: 20px; height: 20px; color: #FDCB6E; flex: none; margin-top: 1px; font-size: 20px; }

/* By event / A-Z / Filter, the status filters and the goal buttons: 44px pills, white when active */
.scene-people.pp4 .people-mode-row, .scene-people.pp4 .tasks-filter { display: flex; gap: 8px; padding: 12px 16px 0; margin: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; background: none; border: 0; }
.scene-people.pp4 .people-mode-row::-webkit-scrollbar, .scene-people.pp4 .tasks-filter::-webkit-scrollbar { display: none; }
.scene-people.pp4 .people-mode-btn, .scene-people.pp4 .tasks-filter-btn { flex: none; height: 44px; min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); background: transparent; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: inline-flex; align-items: center; gap: 6px; }
.scene-people.pp4 .people-mode-btn.active, .scene-people.pp4 .tasks-filter-btn.active { background: #F4F4F5; color: #0b0b0d; box-shadow: none; }
.scene-people.pp4 .people-mode-count, .scene-people.pp4 .tasks-filter-count { font-style: normal; color: rgba(255,255,255,.45); background: none; padding: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; }
.scene-people.pp4 .people-mode-btn.active .people-mode-count, .scene-people.pp4 .tasks-filter-btn.active .tasks-filter-count { color: rgba(0,0,0,.5); }
.scene-people.pp4 .people-filter-chev { display: inline-flex; }
.scene-people.pp4 .people-filter-chev svg { width: 16px; height: 16px; transition: transform .3s; }
.scene-people.pp4 .tasks-filter-btn svg { width: 16px; height: 16px; }
/* the Filter panel opens with a .35s grid-row reveal */
.scene-people.pp4 .people-filter-panel { display: grid; grid-template-rows: 1fr; animation: pp4-reveal .35s cubic-bezier(.2,.8,.2,1); margin: 0; padding: 0; border: 0; background: none; }
.scene-people.pp4 .people-filter-panel > * { overflow: hidden; min-height: 0; }
.scene-people.pp4 .people-filter-panel .people-mode-row { padding-top: 10px; }
@keyframes pp4-reveal { from { grid-template-rows: 0fr; } }
/* Order / Sort: a 44px segmented control while Filter is open */
.scene-people.pp4 .people-suborder-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px 2px; font-size: 14px; color: rgba(255,255,255,.56); }
.scene-people.pp4 .people-suborder-label { font-size: 14px; color: rgba(255,255,255,.56); }
/* R4 finish (fidelity, pp-filter-open): the mockup's ONE capsule, `.seg2{padding:3px;border-radius:12px;background:#121215;
   box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}` with `.seg2 button{height:44px;padding:0 12px;border-radius:9px}`
   and `.seg2 .on{background:#26262b;color:#fff}`. PeopleSubOrderRow has no wrapper, so the buttons join (no gap), the
   buttons stay 44px and join (no gap); the capsule's 3px padding is a 3px spread in its own colour around each button
   (the active pill sits above its neighbours' spread), and its hairline is each button's ::after ring, open on the
   sides where two buttons meet, so it runs once round the outside. */
.scene-people.pp4 .people-suborder-btn { position: relative; height: 44px; margin: 3px 0; padding: 0 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.5); background: #121215; border: 0; box-shadow: 0 0 0 3px #121215; }
.scene-people.pp4 .people-suborder-btn + .people-suborder-btn { margin-left: -10px; }
.scene-people.pp4 .people-suborder-label + .people-suborder-btn { margin-left: 3px; }
.scene-people.pp4 .people-suborder-btn.active { background: #26262b; color: #fff; z-index: 1; }
.scene-people.pp4 .people-suborder-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.07); pointer-events: none; }
.scene-people.pp4 .people-suborder-label + .people-suborder-btn::after { border-radius: 12px 0 0 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.07), inset 1px 0 0 rgba(255,255,255,.07); }
.scene-people.pp4 .people-suborder-btn:last-child::after { border-radius: 0 12px 12px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.07); }

/* search: 52px, blur, periwinkle focus ring, typed letters bold in results */
.scene-people.pp4 .people-search-bar { margin: 14px 16px 0; height: 52px; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .25s; position: relative; }
.scene-people.pp4 .people-search-bar:focus-within { box-shadow: inset 0 0 0 1.5px #A29BFE; }
.scene-people.pp4 .people-search-input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: #fff; font: 500 16px 'Hanken Grotesk', sans-serif; padding: 0; box-shadow: none; }
.scene-people.pp4 .people-search-input::placeholder { color: rgba(255,255,255,.45); }
.scene-people.pp4 .people-search-clear { position: static; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.6); background: none; border: 0; }
.scene-people.pp4 .people-search-clear svg { width: 16px; height: 16px; }
/* R4-FIX-PHONE · FX-6 / FX-7: the mockup's glyph before the field (.si svg{width:18px;height:18px;color:rgba(255,255,255,.56)}) */
.scene-people.pp4 .pp4-si { flex: none; display: grid; place-items: center; }
.scene-people.pp4 .pp4-si svg { width: 18px; height: 18px; color: rgba(255,255,255,.56); display: block; }
.scene-people.pp4 mark.pp4-hit { background: none; color: #fff; font-weight: 800; }
/* R4-FIX-PHONE · FX-5 (Alex 2026-10-08: "don't see those letters in bold"). Measured at 375x812: the row
   name is already 700, so the 800 mark rendered "al" 12.91px wide against 12.81px unmarked (+0.7%), which
   no eye can see; and the name's flex gap (6px) split it around the mark ("Tom W al sh"). The name is now
   one inline run (.pp4-nm), and while a search marks it the rest of the name drops to 500 so the typed
   letters, at the heaviest face the app loads (800), read visibly heavier. Unsearched names are unchanged. */
.scene-people.pp4 .pp4-nm { min-width: 0; }
.scene-people.pp4 .pp4-nm.pp4-q { font-weight: 500; }

.scene-people.pp4 .people-count { padding: 18px 16px 2px; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); }

/* Option B: an event section, its header (spaced caps .14em, spectral hairline, mini constellation, count pill), then 2 cards a row */
/* R4-FIX-PHONE · FX-7: the sections' own 18px top margin is the mockup's whole gap (.sec{margin-top:18px});
   index.html's older .people-events { gap: 24px } stacked on it (measured 42px between sections vs 18px). */
.scene-people.pp4 .people-events { padding: 0; gap: 0; }
.scene-people.pp4 .people-event-section { padding: 0 16px; margin-top: 18px; }
.scene-people.pp4 .people-event-header { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0; margin: 0; background: none; border: 0; }
.scene-people.pp4 .people-event-name { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0; background: none; border: 0; text-align: left; color: #fff; cursor: pointer; }
.scene-people.pp4 .people-event-name-text { display: block; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp4-ebar { flex: 1 1 8px; height: 1px; min-width: 8px; background: linear-gradient(90deg, #FF7676, #55EFC4 40%, transparent); opacity: .7; }
/* R4-FIX-PHONE · FX-8: the mini constellation is a button now (it opens its event); the reset keeps its look
   byte-for-byte and gives it a 44px-tall target around the 92x40 drawing. */
.pp4-mc { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin: 0; background: none; border: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp4-mc svg.mc { width: 92px; height: 40px; overflow: visible; }
.scene-people.pp4 .people-event-header:active .pp4-mc svg { filter: drop-shadow(0 0 6px rgba(162,155,254,.6)); }
.pp4-mc .star { animation: pp4-bloom 3.6s ease-in-out infinite; }
@keyframes pp4-bloom { 50% { filter: drop-shadow(0 0 3px rgba(199,192,255,.75)); } }
.scene-people.pp4 .people-event-pill { flex: none; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 99px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #C7C0FF; background: rgba(162,155,254,.14); }
.scene-people.pp4 .people-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }

/* the card (.pc): avatar in the person's colour, status dot ABOVE the ring, first and last name on their own lines */
.scene-people.pp4 .people-pcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); text-align: left; min-height: 44px; overflow: hidden; color: #F4F4F5; }
.scene-people.pp4 .people-pcard:active { background: #16161a; }
.scene-people.pp4 .people-pcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scene-people.pp4 .people-pcard-avatar { position: relative; flex: none; width: 44px; height: 44px; }
.scene-people.pp4 .aa-conn--dot { position: absolute; z-index: 2; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #111114; }
.scene-people.pp4 .pp4-fn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1; }
.scene-people.pp4 .aa-person-first--card { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-people.pp4 .pp4-last { font-size: 16px; font-weight: 600; color: rgba(244,244,245,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-people.pp4 .aa-sent-mark { width: 16px; height: 16px; flex: none; color: #55EFC4; font-size: 16px; }
.scene-people.pp4 .people-pcard-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scene-people.pp4 .people-pcard-company { font-size: 14px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-people.pp4 .people-pcard-role { font-size: 14px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-people.pp4 .people-pcard .aa-owed, .scene-people.pp4 .person-row .aa-owed { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0; margin: 0; border: 0; border-top: 0; background: none; font-size: 14px; color: #FDCB6E; text-align: left; min-width: 0; }
.scene-people.pp4 .aa-owed-dot { width: 6px; height: 6px; border-radius: 50%; background: #FDCB6E; flex: none; box-shadow: 0 0 8px rgba(253,203,110,.8); font-size: 0; color: transparent; }
.scene-people.pp4 .aa-owed-text { color: #FDCB6E; font-size: 14px; }
/* locked cards: blurred content and an amber lock badge */
.scene-people.pp4 .people-pcard.is-locked .people-pcard-top, .scene-people.pp4 .people-pcard.is-locked .people-pcard-meta, .scene-people.pp4 .people-pcard.is-locked .aa-owed { filter: blur(5px); opacity: .6; }
.scene-people.pp4 .people-pcard-lock { position: absolute; z-index: 3; top: -2px; right: auto; left: calc((min(100vw, 480px) - 42px) / 2 - 54px); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(253,203,110,.14); color: #FDCB6E; font-size: 16px; }

/* A-Z flat rows: name, role · company, owes, the state pill and "Nd ago" */
.scene-people.pp4 .people-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 0; }
.scene-people.pp4 .person-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: #111114; border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); text-align: left; color: #F4F4F5; }
.scene-people.pp4 .person-row-body { flex: 1; min-width: 0; }
.scene-people.pp4 .person-row-name { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-style: normal; font-size: 16px; font-weight: 700; display: flex; gap: 6px; align-items: center; color: #fff; }
.scene-people.pp4 .aa-rolecompany { font-size: 14px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-people.pp4 .person-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.scene-people.pp4 .aa-conn--row { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.scene-people.pp4 .aa-conn--row .aa-conn-label { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 10px; border-radius: 99px; }
.scene-people.pp4 .aa-conn--row .aa-conn-since, .scene-people.pp4 .person-row-ft { font-size: 14px; color: rgba(255,255,255,.5); }

/* the empty search, the hydrate-error banner, skeletons and the empty state: the same card treatment */
.scene-people.pp4 .ev-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 16px; text-align: center; font-size: 16px; color: rgba(255,255,255,.6); }
.scene-people.pp4 .ev-empty strong { color: #fff; font-size: 16px; }
.scene-people.pp4 .ev-empty span { font-size: 16px; }
.scene-people.pp4 .pp4-hydrate { display: flex; align-items: center; gap: 10px; margin: 12px 16px; padding: 14px; border-radius: 18px; background: #111114; box-shadow: inset 0 0 0 1px rgba(253,203,110,.3); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); }
.scene-people.pp4 .pp4-hydrate .btn { flex: none; height: 44px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.scene-people.pp4 .people-skeletons { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; }
.scene-people.pp4 .people-skeletons .skeleton-row { padding: 14px; border-radius: 18px; background: #111114; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-people.pp4 .pp4-paste { margin: 14px 16px 0; padding: 14px; border-radius: 18px; background: #111114; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.scene-people.pp4 .pp4-paste .pp4-paste-eb { font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.56); margin-bottom: 6px; }
.scene-people.pp4 .pp4-paste .pp4-paste-h { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.scene-people.pp4 .pp4-paste .pp4-paste-p { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.scene-people.pp4 .pp4-paste textarea { width: 100%; min-height: 130px; padding: 12px 14px; border-radius: 16px; background: rgba(20,20,24,.75); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font: 400 16px/1.45 'Hanken Grotesk', sans-serif; resize: vertical; outline: 0; }
.scene-people.pp4 .pp4-paste textarea:focus { box-shadow: inset 0 0 0 1.5px #A29BFE; }
.scene-people.pp4 .pp4-paste-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.scene-people.pp4 .pp4-paste-row .btn { min-height: 44px; padding: 0 18px; border-radius: 99px; font-size: 15px; font-weight: 800; background: #F4F4F5; color: #0b0b12; border: 0; }
.scene-people.pp4 .pp4-paste-n { margin-left: auto; font-size: 14px; color: rgba(255,255,255,.45); }
.scene-people.pp4 .pp4-paste-alt { margin-top: 22px; padding: 12px; border-radius: 16px; background: rgba(20,20,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.75); }
.scene-people.pp4 .pp4-paste-alt button { margin-top: 8px; min-height: 44px; background: transparent; border: 0; padding: 0; color: rgba(255,255,255,.6); font-size: 14px; text-decoration: underline; cursor: pointer; }

/* the entrances: header, mode row and search rise in (.7s), then each section (.6s, 70ms apart) */
.scene-people.pp4 .learn-header, .scene-people.pp4 > .people-mode-row, .scene-people.pp4 .people-search-bar { opacity: 0; animation: pp4-rin .7s cubic-bezier(.2,.8,.2,1) forwards; }
.scene-people.pp4 > .people-mode-row { animation-delay: .06s; }
.scene-people.pp4 .people-search-bar { animation-delay: .12s; }
.scene-people.pp4 .people-event-section { opacity: 0; transform: translateY(14px); animation: pp4-rin .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--pp4-k, 0) * .07s); }
@keyframes pp4-rin { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scene-people.pp4 *, .scene-people.pp4 *::before, .scene-people.pp4 *::after { animation: none !important; transition: none !important; }
  .scene-people.pp4 .learn-header, .scene-people.pp4 > .people-mode-row, .scene-people.pp4 .people-search-bar, .scene-people.pp4 .people-event-section { opacity: 1 !important; transform: none !important; }
}
.scene-people.pp4 .pp4-mc svg.mc { width: 92px !important; height: 40px !important; }