/* BEAM Member Operating System — shared surface styling.
 *
 * One visual language for the platform map, the eleven pillar views,
 * My Agents, and Settings & Privacy. Premium, calm, institutional.
 * No dashboard cards-for-their-own-sake, no gamification, no progress
 * rings implying life balance, no gold glow beyond one quiet horizon.
 */
:root{
  --ob:#0B0B0F; --deep:#07070B; --gold:#E2B644; --ink:#EDEAE2;
  --mut:#9a958a; --dim:#6d685e; --line:rgba(255,255,255,.08);
  /* Receipts — drift D-06.
     A receipt is the member's own words, or the source behind a claim. It is
     the component BEAM's trust promise rests on, so it is NOT fine print.
     `--dim` is 4.1:1 and only safe for large or non-essential text; receipts
     were being set in it at 12.5px. These two tokens are the canonical
     treatment, and every receipt surface uses them. */
  --receipt:#9a958a;        /* 7.4:1 on --deep — legible at any size */
  --receipt-size:13.5px;    /* the approved floor for receipt prose */
}
/* Shared receipt primitive. New surfaces should use this class rather than
   restyling a receipt from scratch. */
.receipt{color:var(--receipt);font:italic var(--receipt-size)/1.6 Georgia,'Times New Roman',serif;}
.receipt--label{color:var(--receipt);font:10px Futura,'Avenir Next',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-style:normal;}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--deep);}
body{background:transparent;color:var(--ink);font:16.5px/1.65 Georgia,'Times New Roman',serif;min-height:100vh;}
.env{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(3.5% 60% at 50% 0%, rgba(226,182,68,.18), transparent 75%),
  radial-gradient(40% 30% at 50% 0%, rgba(226,182,68,.06), transparent 70%),
  linear-gradient(180deg,var(--ob),var(--deep));}
.wrap{max-width:860px;margin:0 auto;padding:52px 22px 120px;}
a{color:var(--gold);}
.lbl{font-family:Futura,'Avenir Next',sans-serif;font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);}

/* ── header ─────────────────────────────────────────────────────────── */
.ph{text-align:center;margin-bottom:6px;}
.ph .icon{font-size:26px;display:block;margin-bottom:12px;filter:saturate(.6);}
.ph .eyebrow{font-family:Futura,'Avenir Next',sans-serif;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);}
.ph h1{font-size:clamp(26px,4vw,38px);font-weight:400;letter-spacing:.06em;margin:12px 0 10px;}
.ph .q{color:var(--ink);font-style:italic;font-size:18px;opacity:.9;}
.ph .desc{color:var(--mut);font-size:15px;max-width:620px;margin:14px auto 0;}
.ph .ctx{color:var(--gold);font-style:italic;font-size:15px;margin-top:16px;}
.status{display:inline-block;margin-top:18px;font-family:Futura,'Avenir Next',sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:4px 10px;}
.status--available{color:var(--gold);border-color:rgba(226,182,68,.35);}

/* ── sections ───────────────────────────────────────────────────────── */
section{margin-top:52px;}
section > h2{font-family:Futura,'Avenir Next',sans-serif;font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px;}
.rows{display:flex;flex-direction:column;gap:2px;}
.row{border:1px solid var(--line);padding:16px 18px;background:rgba(255,255,255,.012);}
.row .t{font-size:17px;}
.row .m{color:var(--mut);font-size:14px;margin-top:5px;}
.row .meta{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-family:Futura,'Avenir Next',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.row .meta .src{border:1px solid var(--line);padding:2px 7px;}
.row a.act{display:inline-block;margin-top:11px;font-family:Futura,'Avenir Next',sans-serif;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(226,182,68,.4);padding-bottom:2px;}
.row a.act:hover,.row a.act:focus-visible{border-color:var(--gold);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.empty{color:var(--mut);font-style:italic;font-size:15px;border-left:1px solid rgba(226,182,68,.3);padding:4px 0 4px 16px;}
.empty a{text-decoration:none;border-bottom:1px solid rgba(226,182,68,.4);}

/* connections between pillars — explanation, never score */
.conn{display:flex;flex-wrap:wrap;gap:8px;}
.conn a{text-decoration:none;color:var(--mut);border:1px solid var(--line);padding:7px 12px;font-size:14px;transition:border-color .25s,color .25s;}
.conn a:hover,.conn a:focus-visible{color:var(--gold);border-color:rgba(226,182,68,.4);}

/* agent panel — honest preview, never a fake chat */
.agent{border:1px solid var(--line);padding:22px;background:rgba(255,255,255,.012);}
.agent .name{font-size:19px;}
.agent .say{color:var(--mut);font-size:14.5px;margin-top:8px;}
.agent .now{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
.agent .now a{text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:8px 13px;font-size:14px;transition:border-color .25s;}
.agent .now a:hover,.agent .now a:focus-visible{border-color:rgba(226,182,68,.5);}

/* journey */
.mem{border-left:1px solid rgba(226,182,68,.28);padding:10px 0 10px 18px;margin-bottom:2px;}
.mem .d{font-family:Futura,'Avenir Next',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);}
.mem .t{font-size:16.5px;margin-top:3px;}

.foot{margin-top:64px;text-align:center;}
.foot a{text-decoration:none;font-family:Futura,'Avenir Next',sans-serif;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);}
.foot a:hover,.foot a:focus-visible{color:var(--gold);}
.loading{color:var(--dim);font-style:italic;text-align:center;padding:40px 0;}

@media (max-width:720px){ .wrap{padding:34px 18px 100px;} .ph .q{font-size:16px;} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }

/* Focus is never removed, only made deliberate — WCAG 2.2 focus appearance. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;}

/* Facet chips — derived from the corpus, never invented. A filter the data
   cannot support is a filter that lies, so these render only when counted. */
.conn a.filt{display:inline-flex;gap:7px;align-items:baseline;}
.conn a.filt b{font-weight:400;color:var(--gold);font-size:12.5px;}


/* PRESENCE — the member's mark and identity card. Not a photo, not a face:
   a deterministic mark drawn only from choices the member made. */
.bp-card{display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--line);padding:20px 22px;margin:0 0 26px;}
.bp-card--compact{padding:14px 16px;gap:12px;}
.bp-card__mark{flex:0 0 auto;line-height:0;}
.bp-mark{display:block;}
.bp-card__body{flex:1 1 auto;min-width:0;}
.bp-card__name{font:400 21px Georgia,serif;color:var(--ink);margin:0 0 2px;}
.bp-card__set{color:var(--receipt,#9a958a);font:10px Futura,'Avenir Next',sans-serif;
  letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px;}
.bp-card__set--none{letter-spacing:0;text-transform:none;font:italic 14px Georgia,serif;}
.bp-card__set a{color:var(--gold);}
.bp-card__l{font:16px/1.6 Georgia,serif;color:var(--ink);margin:0 0 12px;}
.bp-card__l span{display:block;font:10px Futura,'Avenir Next',sans-serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:3px;}
.bp-card__why{display:block;color:var(--receipt,#9a958a);
  font:italic 13px/1.6 Georgia,serif;letter-spacing:0;text-transform:none;margin-top:3px;}
@media (max-width:620px){ .bp-card{flex-direction:column;gap:12px;} }