/* PEOPLE: TWO PHASES, NOTHING IN BETWEEN.
   Josh, 5 Oct: "It's either you're interacting with their profile or you're
   not." Phase one is #pcard, a chip that sits clear of the bottom bar and the
   video plates. Phase two is #pprof, a whole screen on a phone and a large
   centred panel on desktop, with its own Back. There is no half-height sheet,
   because a half-height sheet is what covered the buttons.
   The People directory (#donors) gets the same rule on a phone: a full sheet
   with a Close, so the disclaimer and the contribution tile cannot sit on it. */

:root { --pp-gold:#e9c46a; --pp-gold-hi:#ffe9b5; --pp-ink:rgba(12,16,14,.97); }

/* ---------- phase one: the chip ---------- */
#pcard { position:fixed; left:50%; z-index:9; display:none; width:min(92vw,360px);
  transform:translateX(-50%); bottom:calc(var(--pad-b,0px) + 78px + env(safe-area-inset-bottom,0px));
  box-sizing:border-box; padding:8px 10px 8px 8px; border-radius:999px;
  background:rgba(12,16,14,.92); border:1px solid rgba(233,196,106,.45);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,.5); color:#fff; font-family:var(--sans);
  align-items:center; gap:10px; cursor:pointer;
  -webkit-user-select:none; user-select:none; touch-action:manipulation }
#pcard.open { display:flex; animation:pcIn .16s ease-out }
@keyframes pcIn { from { opacity:0; transform:translate(-50%,8px) } to { opacity:1; transform:translate(-50%,0) } }
#pcard .pf, #pprof .pf { flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  background:#26302b center/cover no-repeat; border:2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; font-family:var(--ui);
  font-size:15px; color:var(--pp-gold-hi) }
#pcard .pf.t-bronze, #pprof .pf.t-bronze { border-color:#d98a4a }
#pcard .pf.t-silver, #pprof .pf.t-silver { border-color:#dfe5ec }
#pcard .pf.t-gold, #pprof .pf.t-gold { border-color:var(--pp-gold); box-shadow:0 0 12px rgba(233,196,106,.5) }
#pcard .pi { flex:1; min-width:0 }
#pcard .pnm { font-size:16px; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#pcard .ps { font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px }
#pcard .pa { flex:0 0 auto; display:flex; gap:6px }
#pcard .pa button { min-height:0; padding:8px 12px; border-radius:999px; font-family:var(--ui);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  background:var(--pp-gold); color:#1a1608; border:0; font-weight:500 }
#pcard .pa button:not([data-pc=more]) { display:none }
#pcard .px { flex:0 0 28px; width:28px; height:28px; min-height:0; padding:0; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; border:0; font-size:17px; line-height:1; cursor:pointer }
@media (min-width:760px) {
  #pcard { left:auto; right:20px; bottom:96px; transform:none; width:340px }
  @keyframes pcIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
}

/* ---------- phase two: the profile ---------- */
#pprof { position:fixed; inset:0; z-index:40; display:none; font-family:var(--sans); color:#fff;
  background:rgba(4,6,5,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  align-items:center; justify-content:center; overscroll-behavior:contain }
#pprof.open { display:flex; animation:ppBg .14s ease-out }
@keyframes ppBg { from { opacity:0 } to { opacity:1 } }
#pprof .sheet { position:relative; width:min(560px,100%); height:min(860px,92vh); display:flex; flex-direction:column;
  background:var(--pp-ink); border:1px solid rgba(233,196,106,.28); border-radius:6px; overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.65); animation:ppUp .22s cubic-bezier(.2,.8,.2,1) }
@keyframes ppUp { from { transform:translateY(18px); opacity:0 } to { transform:none; opacity:1 } }
#pprof .scroll { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
#pprof .top { position:absolute; z-index:5; left:0; right:0; top:0; display:flex; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) 10px 0; pointer-events:none }
#pprof .top button { pointer-events:auto; min-height:44px; min-width:44px; padding:0 14px; border-radius:999px;
  background:rgba(0,0,0,.5); color:#fff; border:1px solid rgba(255,255,255,.25); cursor:pointer;
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
#pprof .top .xb { font-size:22px; padding:0; width:44px; letter-spacing:0 }

#pprof .hero { position:relative; height:250px; overflow:hidden; background:#101612 center/cover no-repeat }
#pprof .hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease }
#pprof .hero video.on { opacity:1 }
#pprof .hero::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(12,16,14,.35),rgba(12,16,14,.1) 35%,var(--pp-ink) 100%) }
#pprof .hero.none { background:radial-gradient(120% 90% at 50% 0%,#1d3a2a,#0c100e) }

#pprof .id { position:relative; z-index:2; margin-top:-70px; padding:0 18px; text-align:center }
#pprof .id .pf { width:112px; height:112px; flex-basis:112px; margin:0 auto; border-width:3px; font-size:38px;
  border-color:var(--pp-gold); box-shadow:0 0 0 4px var(--pp-ink),0 0 24px rgba(233,196,106,.35) }
#pprof .id .pf:not(.t-gold):not(.t-silver):not(.t-bronze) { border-color:rgba(233,196,106,.7) }
#pprof h2 { margin:12px 0 0; font-size:30px; font-weight:400; letter-spacing:.02em; line-height:1.1 }
#pprof .where { margin-top:5px; font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7) }
#pprof .badge { display:inline-block; margin-top:10px; padding:4px 11px; border-radius:999px; font-family:var(--ui);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:#1a1608;
  background:linear-gradient(100deg,var(--pp-gold),var(--pp-gold-hi)) }
#pprof .badge.t-bronze { background:#d98a4a } #pprof .badge.t-silver { background:#dfe5ec }
#pprof .words { margin:12px auto 0; max-width:420px; font-size:16px; line-height:1.45; color:rgba(255,255,255,.85) }

#pprof .stats { display:grid; grid-template-columns:repeat(4,1fr); margin:18px 18px 0; border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12) }
#pprof .stats div { padding:12px 0 10px; text-align:center }
#pprof .stats b { display:block; font-size:26px; font-weight:400; color:var(--pp-gold-hi); font-variant-numeric:tabular-nums }
#pprof .stats span { font-family:var(--ui); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62) }

#pprof .acts { display:flex; gap:8px; padding:16px 18px 0 }
#pprof .acts button { min-height:46px; border-radius:999px; cursor:pointer; font-family:var(--ui); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); padding:0 18px }
#pprof .acts .go { flex:1; background:var(--pp-gold); color:#1a1608; border-color:var(--pp-gold); font-weight:500;
  transition:transform .12s ease, background .2s ease }
#pprof .acts .go:active { transform:scale(.97) }
#pprof .acts .go.on { background:transparent; color:var(--pp-gold); }

#pprof .tabs { position:sticky; top:0; z-index:3; display:flex; margin-top:14px; background:var(--pp-ink);
  border-bottom:1px solid rgba(255,255,255,.12) }
#pprof .tabs button { flex:1; min-height:46px; background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer;
  font-family:var(--ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; position:relative }
#pprof .tabs button[aria-selected="true"] { color:var(--pp-gold-hi) }
#pprof .tabs i { position:absolute; left:0; bottom:-1px; height:2px; width:33.333%; background:var(--pp-gold);
  transition:transform .25s cubic-bezier(.2,.8,.2,1) }
#pprof .pane { display:none; padding:12px 12px 40px; animation:ppTab .22s ease-out }
#pprof .pane.on { display:block }
@keyframes ppTab { from { opacity:0; transform:translateX(var(--pp-dx,16px)) } to { opacity:1; transform:none } }

#pprof .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px }
#pprof .grid button { position:relative; width:100%; min-width:0; overflow:hidden; aspect-ratio:3/4; padding:0; border:0; cursor:pointer; background:#17201b center/cover no-repeat;
  min-height:0; border-radius:2px }
#pprof .grid button.v::after { content:'\25B6'; position:absolute; right:6px; bottom:5px; font-size:11px; color:#fff;
  text-shadow:0 1px 4px #000 }
#pprof .grid em { position:absolute; left:6px; bottom:5px; font-style:normal; font-family:var(--ui); font-size:10px; color:#fff; text-shadow:0 1px 4px #000 }
#pprof .empty { text-align:center; padding:36px 22px; color:rgba(255,255,255,.7); font-size:17px; line-height:1.45 }
#pprof .empty b { display:block; font-size:21px; font-weight:400; color:var(--pp-gold-hi); margin-bottom:6px }
#pprof .plot { display:flex; gap:14px; align-items:center; width:100%; padding:12px; margin-bottom:8px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:6px; color:#fff; font-family:inherit }
#pprof .plot svg { flex:0 0 96px; width:96px; height:96px; border-radius:4px; background:#0f1a14 }
#pprof .plot b { display:block; font-weight:400; font-size:19px }
#pprof .plot span { display:block; margin-top:3px; font-family:var(--ui); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65) }
#pprof .plot u { display:inline-block; margin-top:8px; text-decoration:none; color:var(--pp-gold); font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase }

@media (max-width:759px) {
  #pprof { background:var(--pp-ink); backdrop-filter:none; -webkit-backdrop-filter:none; align-items:stretch }
  #pprof .sheet { width:100%; height:100%; height:100dvh; border:0; border-radius:0; box-shadow:none }
  #pprof .hero { height:calc(230px + env(safe-area-inset-top,0px)) }
}
@media (prefers-reduced-motion:reduce) {
  #pcard.open, #pprof.open, #pprof .sheet, #pprof .pane { animation:none }
  #pprof .tabs i, #pprof .hero video { transition:none }
}

/* ---------- the People directory on a phone: a whole sheet, not a panel ---------- */
#donors .dclose { display:none }
@media (max-width:759px) {
  #donors[style*="block"] { position:fixed; inset:0; z-index:30; width:auto; max-width:none; box-sizing:border-box;
    border-radius:0; border:0; background:var(--pp-ink); overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)) }
  #donors[style*="block"] .dclose { display:flex; align-items:center; justify-content:center; position:absolute;
    right:12px; top:calc(8px + env(safe-area-inset-top,0px)); width:44px; height:44px; min-height:0; padding:0;
    border-radius:50%; background:rgba(255,255,255,.1); color:#fff; border:0; font-size:22px; cursor:pointer }
  #donors[style*="block"] b { font-size:11px; padding-right:52px; margin-bottom:14px }
  #donors[style*="block"] .row { padding:12px 6px; font-size:12px; min-height:44px }
  #donors[style*="block"] .row em { font-size:10px }
}

/* THE PROFILE IS THE ONLY THING YOU CAN TOUCH. The map chrome (nav, search,
   camera, locate, toasts) sits above z 40, so it showed through and half-
   blocked the profile's own buttons. Hidden, not covered: a covered control is
   still reachable by keyboard. */
body.pprof-open #nav, body.pprof-open #navMenu, body.pprof-open #navBack, body.pprof-open #quickCam,
body.pprof-open #search, body.pprof-open #humBtn, body.pprof-open #psToast, body.pprof-open #locate,
body.pprof-open #panel, body.pprof-open #donors, body.pprof-open #rotateTip { visibility:hidden }

@media (max-width:759px) {
  #donors[style*="block"] #donorFind { box-sizing:border-box }
  #donors[style*="block"] b a { position:absolute; right:64px; top:calc(22px + env(safe-area-inset-top,0px)) }
}
@media (max-width:759px){ #pprof .top .xb { display:none } }