/* The person row, shared by Guests › People (test-to-live) and the Replies tracker (design-pages). Plan 11 Nov, section (c)
   "The list row" and g1 "Air". One copy only: both branches carry this file byte for byte; change it in one place.
   The list sits on the page with its 20 px side margins (the screen's own); no card, no hairlines between rows.
   Markup:  <div class="ap-plist">
              <div class="ap-pfam">                                   (a household of more than one; else rows directly)
                <div class="ap-prow">
                  <a class="ap-ptap" href="…">                         (the row's tap: opens the detail)
                    <span class="ap-pini">AW</span>                    (or .ap-pini.ap-ptick / .ap-ptick.is-on in Select)
                    <span class="ap-ptx"><b class="ap-pnm">Name</b><span class="ap-pst">Coming · <b class="ap-pal">Serious allergy: peanuts</b></span></span>
                  </a>
                  <button class="ap-pgo">Remind</button>             (still to do: filled navy) or .ap-pq (done: quiet) or .ap-pchev
                </div>
              </div>
            </div> */
.ap-plist{margin:4px 0 0;padding:0}
.ap-pfam{position:relative;margin:0}
.ap-pfam+.ap-pfam,.ap-pfam+.ap-prow,.ap-prow+.ap-pfam{margin-top:16px}
.ap-pfam::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:44px;border-radius:22px;box-shadow:inset 0 0 0 1.25px var(--b-dot,#ddd6c9);pointer-events:none}
.ap-prow{position:relative;display:flex;align-items:center;gap:8px;min-height:68px;margin:0;padding:0;box-sizing:border-box;color:var(--b-ink,#1f1b15)}
.ap-ptap{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 0;border:0;background:none;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-pini{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--b-paper,#fff);color:var(--b-tb,#1d2a44);font:500 16px/1 var(--b-serif,Georgia,serif);letter-spacing:.02em}
.ap-pini .ap-i{width:22px;height:22px}
.ap-pini.ap-ptick{background:var(--b-paper,#fff);box-shadow:inset 0 0 0 1.5px var(--b-field,#c9c1b3)}
.ap-pini.ap-ptick.is-on{background:var(--b-tb,#1d2a44);box-shadow:none;color:#fbf8f2}
.ap-ptx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ap-pnm{font:500 17px/1.25 var(--b-sans);color:var(--b-ink,#1f1b15);overflow-wrap:anywhere}
@media (min-width:390px){.ap-pnm{font-size:18px}}
.ap-pst{font:400 14px/1.3 var(--b-sans);color:var(--b-muted,#6f665a);overflow-wrap:anywhere}   /* wraps to a second line when it must; nothing is cut */
.ap-pst .ap-pal{font-weight:600;color:var(--b-red,#a3332a)}
.ap-pgo{flex:none;position:relative;min-width:44px;height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--b-tb,#1d2a44);color:#fbf8f2;font:600 15px/44px var(--b-sans);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-pgo::after,.ap-pq::after{content:"";position:absolute;inset:0 -2px}   /* 44 px tall, as seen and as touched (lead, fresh-user run) */
.ap-pgo:disabled{opacity:.45;cursor:default}
.ap-pq{flex:none;position:relative;height:44px;padding:0 4px;border:0;background:none;color:var(--b-tb,#1d2a44);font:600 15px/44px var(--b-sans);white-space:nowrap;cursor:pointer}
.ap-pchev{flex:none;width:18px;height:18px;color:var(--b-chev,#b5ab98);pointer-events:none}
.ap-ptap:active{background:var(--b-floor,#faf8f4)}
:is(.ap-ptap,.ap-pgo,.ap-pq):focus-visible{outline:2px solid var(--b-ta,#d4ae5c);outline-offset:2px;border-radius:12px}