/* =============================================================
   150 — shared cross-page components
   (portrait placeholders, the read scan, phone/app UI, team thread)
   Loaded on Programme / Science / Membership (home.css covers Home).
   ============================================================= */

/* portrait placeholders (warm tonal until real assets drop in) */
[data-portrait]{
  background:
    radial-gradient(60% 45% at 50% 32%, rgba(244,239,226,.16), transparent 60%),
    linear-gradient(155deg,#4b4639 0%,#6E6A5B 55%,#897d68 100%);
  background-size:cover;background-position:center top;position:relative;isolation:isolate;
}
[data-portrait]::after{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 38% at 62% 40%, rgba(0,0,0,0), rgba(36,30,21,.28));mix-blend-mode:multiply}
[data-portrait].is-photo::after{display:none}

/* the read (scan line passing over a portrait) */
.read-scan{position:relative;overflow:hidden}
.read-scan__line{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(244,239,226,.9),transparent);
  box-shadow:0 0 16px 3px rgba(244,239,226,.5);opacity:0;z-index:4}
.read-scan.is-scanning .read-scan__line{animation:readpass 4.6s var(--ease-soft) .2s infinite}
@keyframes readpass{0%{top:6%;opacity:0}6%{opacity:1}46%{top:94%;opacity:.9}54%{top:94%;opacity:0}100%{top:6%;opacity:0}}
.read-marks{position:absolute;inset:0;pointer-events:none;z-index:3;color:rgba(244,239,226,.5)}

/* ---- phone + 150 app UI ---- */
.phone{width:min(300px,82%);margin:0 auto;aspect-ratio:300/620;background:#0d0b08;border-radius:42px;padding:11px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(205,187,163,.12),inset 0 0 0 2px #2a241a;position:relative}
.phone__notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#0d0b08;border-radius:14px;z-index:5}
.phone__screen{width:100%;height:100%;background:var(--oat);border-radius:32px;overflow:hidden;padding:30px 14px 14px;display:flex;flex-direction:column;gap:9px;color:#2A3128}
.appui__top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.appui__logo{display:flex;align-items:center;gap:4px;font-family:var(--serif);font-weight:300}.appui__logo .orb-sm{width:16px;height:16px}
.appui__set{opacity:.5}
.appui__tabs{display:flex;gap:12px;font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#90966E;padding:0 4px 4px;border-bottom:1px solid rgba(36,30,21,.08)}
.appui__tabs b{color:#2A3128;font-weight:500;border-bottom:1px solid #2A3128;padding-bottom:4px}
.appui__card{background:#fff;border-radius:12px;padding:11px 13px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.appui__age{display:flex;align-items:center;justify-content:space-between}
.appui__age .num{font-size:38px}.appui__ring{color:var(--tan);width:34px;height:34px}
.appui__delta{font-size:10px;color:#6E7561}.appui__delta i{color:var(--olive);font-style:normal;font-weight:600}
.appui__protocol ul{list-style:none;margin-top:6px}
.appui__protocol li{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid rgba(36,30,21,.06)}
.appui__protocol li i{font-style:normal;color:#90966E;font-family:var(--mono);font-size:9px}
.appui__biomk{list-style:none}
.appui__biomk li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:11px;padding:5px 0;border-bottom:1px solid rgba(36,30,21,.06)}
.appui__biomk b{font-family:var(--sans);font-weight:440}
.appui__biomk em{font-style:normal;font-family:var(--mono);font-size:8px;color:var(--olive);letter-spacing:.06em}
.appui__next{background:var(--bark);color:var(--oat);border-radius:12px;padding:11px 13px;margin-top:auto}
.appui__next-row{display:flex;align-items:center;gap:8px;margin-top:5px}
.appui__next-row b{font-size:13px}.appui__sun{color:var(--sand)}
.appui__go{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--tan);color:var(--bark);display:grid;place-items:center;font-size:.7rem}

/* ---- team thread (member — concierge — physician) ---- */
.team__thread{display:flex;align-items:center;gap:18px;margin-top:2.4em}
.team__node{display:flex;align-items:center;gap:12px}
.team__avatar{width:64px;height:64px;border-radius:50%;border:1px solid var(--rule);overflow:hidden;flex:none}
.team__avatar--orb{display:grid;place-items:center;color:var(--sand)}.team__avatar--orb .orb-sm{width:30px;height:30px}
.team__node .mono-label b{font-family:var(--sans);color:var(--fg);font-size:.95rem;font-weight:500}
.team__wire{flex:1;display:flex;align-items:center;gap:6px;min-width:40px;position:relative}
.team__wireline{flex:1;height:1px;background:linear-gradient(90deg,var(--sand),transparent,var(--sand))}
/* the connector glow-dot sits at the MIDPOINT of the wire (m26 / m05) */
.team__wire .glow-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:2}

/* ---- whatsapp chat panel ---- */
.team__chat{padding:18px;max-width:420px;margin-left:auto;background:rgba(244,239,226,.95);color:#2A3128;border-color:rgba(36,30,21,.1)}
.chat__head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(36,30,21,.1)}
.chat__av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.chat__head b{display:block;font-size:.95rem}.chat__head .mono-label{color:#6E7561}
.chat__wa{margin-left:auto;width:30px;height:30px;color:#4F5640}
.chat__msg{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:10px;padding:12px 14px;margin-top:12px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.chat__ico{width:26px;height:26px;flex:none;color:var(--tan);margin-top:2px}
.chat__msg b{display:block;font-size:.9rem}.chat__msg span{font-size:.82rem;color:#6E7561}
.chat__bar{display:flex;align-items:center;gap:10px;margin-top:14px;color:#90966E}
.chat__input{flex:1;height:34px;background:#fff;border-radius:999px;border:1px solid rgba(36,30,21,.08)}
.chat__send{width:34px;height:34px;border-radius:50%;background:#4F5640;color:#fff;display:grid;place-items:center;font-size:.8rem}

/* ---- page end CTA (shared apply close) ---- */
.endcta{position:relative}
.endcta__mark{display:flex;align-items:center;justify-content:center;color:var(--sand)}
.endcta__orb{width:clamp(140px,18vw,240px);height:clamp(140px,18vw,240px)}
.endcta .btn{margin-top:1.6em}