/* ============================================================
   platform-mock.css — a faithful, STATIC recreation of the real
   Everborn coordinator app (black + gold), ported from the
   original platform build mocks. Scoped entirely under #rp-mock
   so it cannot collide with site.css / funnel.css. No JavaScript:
   this is a screenshot, not a live control — nothing is clickable.
   All data is aliased (Person 1/2/3…, neutral sample tenant).
   ============================================================ */
#rp-mock{
  --ink:#0E0F10; --gold:#CBA135;
  --gold-hi:color-mix(in srgb,var(--gold),#fff 26%);
  --gold-deep:color-mix(in srgb,var(--gold),#000 36%);
  --gold-soft:color-mix(in srgb,var(--gold),transparent 87%);
  --gold-line:color-mix(in srgb,var(--gold),transparent 74%);
  --on-accent:color-mix(in srgb,var(--gold),#000 82%);
  --ivory:#F5F3EE; --card-2:#FBFAF7; --card-3:#F3F1EB;
  --text:#151515; --muted:#5E5B54; --faint:#8C877D;
  --on-dark:#F4F1EA; --on-dark-muted:#B7B2A6;
  --line:rgba(18,18,18,.09); --line-d:rgba(255,255,255,.09);
  --red:#C0392B; --green:#2F8558; --blue:#4A6FA5; --amber:#B7791F;
  --disp:'Cinzel',Georgia,serif;
}
#rp-mock, #rp-mock *{ box-sizing:border-box; }
#rp-mock{ color:var(--text); }

/* two-up layout: desktop window + phone */
#rp-mock .rp-cols{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; align-items:start; }
#rp-mock .rp-cols > div{ min-width:0; }
@media (max-width:900px){ #rp-mock .rp-cols{ grid-template-columns:1fr; gap:40px; } }
#rp-mock .rp-lbl{ font-size:0.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-ink,#5b6b62); font-weight:700; margin:0 2px 11px; display:flex; align-items:center; gap:9px; }
#rp-mock .rp-lbl::after{ content:""; flex:1; height:1px; background:rgba(15,51,39,.14); }
#rp-mock .rp-lbl.center{ justify-content:center; }
#rp-mock .rp-lbl.center::before{ content:""; flex:1; height:1px; background:rgba(15,51,39,.14); }

/* desktop window */
#rp-mock .rp-dframe{ width:100%; background:var(--ivory); border-radius:15px; overflow:hidden; box-shadow:0 1px 2px rgba(15,51,39,.06),0 26px 60px -18px rgba(14,15,16,.45); border:1px solid rgba(14,15,16,.5); }
#rp-mock .rp-winbar{ display:flex; align-items:center; gap:7px; padding:9px 13px; background:#191a1c; border-bottom:1px solid var(--line-d); }
#rp-mock .rp-winbar i{ width:10px; height:10px; border-radius:50%; background:#3a3b3e; flex:none; }
#rp-mock .rp-winbar .rp-url{ margin-left:9px; font-size:11px; color:var(--on-dark-muted); background:rgba(255,255,255,.06); border:1px solid var(--line-d); border-radius:100px; padding:3px 13px; letter-spacing:.02em; }
#rp-mock .rp-app{ display:grid; grid-template-columns:196px 1fr; grid-template-rows:52px 1fr; grid-template-areas:"brand header" "rail main"; height:496px; background:var(--ivory); }

#rp-mock .rp-brand{ grid-area:brand; background:var(--ink); display:flex; align-items:center; gap:9px; padding:0 15px; border-bottom:1px solid var(--line-d); border-right:1px solid var(--gold-line); }
#rp-mock .rp-brand .rp-dot{ width:22px; height:22px; border-radius:6px; background:linear-gradient(140deg,var(--gold-hi),var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); flex:none; }
#rp-mock .rp-brand b{ font-family:var(--disp); font-weight:600; font-size:0.72rem; letter-spacing:1.5px; color:var(--gold-hi); text-transform:uppercase; white-space:nowrap; }
#rp-mock .rp-header{ grid-area:header; background:var(--ink); display:flex; align-items:center; justify-content:flex-end; gap:7px; padding:0 16px; border-bottom:1px solid var(--line-d); }
#rp-mock .rp-chip{ font-size:0.74rem; font-weight:500; color:var(--on-dark); background:rgba(255,255,255,.05); border:1px solid var(--line-d); border-radius:8px; padding:6px 11px; }
#rp-mock .rp-chip.gold{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--on-accent); border:0; font-weight:700; }
#rp-mock .rp-rail{ grid-area:rail; background:var(--ink); padding:14px 10px; display:flex; flex-direction:column; gap:3px; border-right:1px solid var(--gold-line); }
#rp-mock .rp-nav{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px; color:var(--on-dark-muted); font-size:0.86rem; font-weight:500; border-left:2px solid transparent; }
#rp-mock .rp-nav svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; flex:none; }
#rp-mock .rp-nav.on{ background:var(--gold-soft); color:var(--gold-hi); border-left:2px solid var(--gold); font-weight:600; }
#rp-mock .rp-main{ grid-area:main; background:var(--ivory); overflow:hidden; display:flex; flex-direction:column; min-width:0; }

#rp-mock .rp-subbar{ display:flex; gap:3px; padding:12px 17px 0; flex:none; flex-wrap:wrap; }
#rp-mock .rp-subtab{ font-size:0.8rem; font-weight:600; color:var(--muted); border-radius:999px; padding:7px 13px; }
#rp-mock .rp-subtab.on{ background:var(--ink); color:var(--gold-hi); }
#rp-mock .rp-lenshead{ padding:13px 19px 6px; flex:none; }
#rp-mock .rp-lenshead h3{ margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--text); }
#rp-mock .rp-lenshead p{ margin:3px 0 0; font-size:0.76rem; color:var(--muted); line-height:1.4; }
#rp-mock .rp-lensbody{ flex:1; overflow:hidden; padding:6px 18px 16px; }

/* org chart */
#rp-mock .rp-tools{ display:flex; align-items:center; gap:7px; padding:0 2px 11px; }
#rp-mock .rp-tbtn{ font-size:0.74rem; font-weight:700; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 10px; color:var(--text); display:inline-flex; align-items:center; gap:5px; }
#rp-mock .rp-tbtn svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
#rp-mock .rp-tools .rp-sp{ flex:1; }
#rp-mock .rp-zoom{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
#rp-mock .rp-zoom span{ padding:6px 10px; font-size:0.74rem; font-weight:800; color:var(--text); border-right:1px solid var(--line); }
#rp-mock .rp-zoom span:last-child{ border-right:0; }
#rp-mock .rp-chart{ background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:26px 10px 20px; overflow:hidden; }
#rp-mock .rp-tree{ display:flex; flex-direction:column; align-items:center; min-width:max-content; margin:0 auto; }
#rp-mock .rp-node{ width:146px; border-radius:11px; padding:10px 11px; background:#fff; border:1px solid var(--line); box-shadow:0 3px 10px rgba(14,15,16,.08); text-align:center; position:relative; }
#rp-mock .rp-node.root{ background:linear-gradient(160deg,#26272a,var(--ink)); border-color:var(--ink); color:#fff; box-shadow:0 9px 24px rgba(14,15,16,.3); }
#rp-mock .rp-node.d1{ background:var(--gold-soft); border-color:var(--gold-line); }
#rp-mock .rp-node .rp-nbadge{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); min-width:22px; height:22px; border-radius:999px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border:1.5px solid #fff; color:var(--on-accent); font-size:0.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
#rp-mock .rp-node .rp-nname{ font-weight:700; font-size:0.82rem; }
#rp-mock .rp-node .rp-ncode{ font-size:0.64rem; color:var(--muted); margin-top:1px; }
#rp-mock .rp-node.root .rp-ncode{ color:var(--on-dark-muted); }
#rp-mock .rp-node .rp-nmeta{ font-size:0.62rem; color:var(--faint); margin-top:3px; }
#rp-mock .rp-node.root .rp-nmeta{ color:var(--on-dark-muted); }
#rp-mock .rp-vconn{ width:2px; height:20px; background:var(--gold-line); }
#rp-mock .rp-childrow{ display:flex; gap:14px; align-items:flex-start; position:relative; padding-top:20px; }
#rp-mock .rp-childrow::before{ content:""; position:absolute; top:0; left:12%; right:12%; height:2px; background:var(--gold-line); }
#rp-mock .rp-childcol{ display:flex; flex-direction:column; align-items:center; position:relative; }
#rp-mock .rp-childcol::before{ content:""; position:absolute; top:-20px; width:2px; height:20px; background:var(--gold-line); }
#rp-mock .rp-morechip{ font-size:0.68rem; font-weight:700; color:var(--gold-deep); background:var(--gold-soft); border:1px dashed var(--gold-line); border-radius:9px; padding:8px 11px; margin-top:14px; }

/* phone */
#rp-mock .rp-pframe{ width:min(300px,100%); margin:0 auto; background:#000; border-radius:40px; padding:10px; box-shadow:0 26px 60px -14px rgba(14,15,16,.5),0 0 0 1px rgba(255,255,255,.06); }
#rp-mock .rp-pscreen{ position:relative; height:598px; background:var(--ivory); border-radius:31px; overflow:hidden; display:flex; flex-direction:column; }
#rp-mock .rp-pnotch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:104px; height:24px; background:#000; border-radius:0 0 14px 14px; z-index:6; }
#rp-mock .rp-mtop{ background:var(--ink); color:var(--on-dark); display:flex; align-items:center; gap:8px; padding:32px 14px 10px; flex:none; }
#rp-mock .rp-mtop .rp-dot{ width:19px; height:19px; border-radius:5px; background:linear-gradient(140deg,var(--gold-hi),var(--gold-deep)); flex:none; }
#rp-mock .rp-mtop b{ font-family:var(--disp); font-size:0.68rem; letter-spacing:1.5px; color:var(--gold-hi); text-transform:uppercase; flex:1; white-space:nowrap; }
#rp-mock .rp-mtop .rp-mh{ width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--line-d); }
#rp-mock .rp-msub{ display:flex; gap:4px; padding:9px 11px; background:var(--ink); overflow:hidden; flex:none; }
#rp-mock .rp-msub span{ flex:none; font-size:0.72rem; font-weight:700; color:var(--on-dark-muted); background:rgba(255,255,255,.05); border-radius:999px; padding:6px 12px; }
#rp-mock .rp-msub span.on{ background:var(--gold-soft); color:var(--gold-hi); }
#rp-mock .rp-mmain{ flex:1; overflow:hidden; background:var(--ivory); padding:12px; }
#rp-mock .rp-day{ font-size:0.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:800; margin:2px 2px 8px; }
#rp-mock .rp-acard{ display:flex; gap:11px; background:#fff; border:1px solid var(--line); border-left-width:3px; border-radius:11px; padding:11px 12px; margin-bottom:9px; }
#rp-mock .rp-aicon{ width:31px; height:31px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
#rp-mock .rp-aicon svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; }
#rp-mock .rp-amain{ flex:1; min-width:0; }
#rp-mock .rp-aline1{ display:flex; align-items:baseline; gap:8px; }
#rp-mock .rp-aname{ font-size:0.84rem; font-weight:700; color:var(--text); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rp-mock .rp-atime{ margin-left:auto; font-size:0.68rem; color:var(--faint); flex:none; font-variant-numeric:tabular-nums; }
#rp-mock .rp-asum{ font-size:0.76rem; color:var(--muted); margin-top:3px; line-height:1.4; }
#rp-mock .rp-atags{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
#rp-mock .rp-atag{ font-size:0.62rem; font-weight:800; border-radius:6px; padding:2px 8px; display:inline-flex; align-items:center; gap:4px; }
#rp-mock .rp-atag.trigger{ background:var(--gold-soft); color:var(--gold-deep); }
#rp-mock .rp-atag.trigger svg{ width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2.2; }
#rp-mock .rp-atag.ok{ background:color-mix(in srgb,var(--green),#fff 86%); color:var(--green); }
#rp-mock .rp-atag.no{ background:color-mix(in srgb,var(--red),#fff 88%); color:var(--red); }
#rp-mock .rp-atag.auto{ background:var(--card-3); color:var(--faint); }
#rp-mock .rp-mnav{ flex:none; background:var(--ink); border-top:1px solid var(--gold-line); display:flex; justify-content:space-around; padding:8px 0 18px; }
#rp-mock .rp-mnav div{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--on-dark-muted); font-size:0.58rem; font-weight:600; }
#rp-mock .rp-mnav div svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; }
#rp-mock .rp-mnav div.on{ color:var(--gold-hi); }

#rp-mock .rp-note{ margin:22px auto 0; max-width:760px; text-align:center; font-size:0.8rem; color:var(--slate,#586b62); line-height:1.6; }

/* narrow screens: render the desktop app at true proportions and scale it
   down as a crisp thumbnail so the full org chart stays intact (no clipping,
   no page overflow). The phone frame below is the real mobile experience. */
@media (max-width:600px){
  /* render the full desktop app (816px) and scale it to a thumbnail that
     fits the column without clipping. dframe height = winbar(38) + 496*0.39 */
  #rp-mock .rp-dframe{ height:232px; }
  #rp-mock .rp-app{ width:816px; transform:scale(0.39); transform-origin:top left; }
}