/* ============================================================================
   PRIVATE MENTORSHIP — pm-modals.css
   Styles for the three orbital modals in js/pm-modals.js. Created 2026-08-17.

   Lifted verbatim from js/sidebar.css lines 2893-3711 as it stood at 3711
   lines: the client reschedule orbital, the staff family-actions orbital and
   the Refer a Friend orbital, plus the .pm-act-* action forms, the upcoming
   cards and the keyframes they share (pmOrbCenterPulse, pmRowShimmer,
   pmRowSweep, pmRefer*).

   Three .pm-sb-flyout__tile-chev rules that sat inside that range were LEFT
   BEHIND on purpose — they style the rail's flyout tiles, not the modals.

   ⚠️ These rules still ALSO live in js/sidebar.css until commit D removes them
   there. That overlap is a migration step with a named end, not a permanent
   duplicate: the two files carry identical text, so a page loading both gets
   the same result. See CLEANUP-PLAN-2026-08-17.md, "RAIL COLLAPSE — STEP 2".

   Load alongside js/pm-modals.js on any page whose rail can open a modal.
   ========================================================================= */

.pm-orb-overlay{
  position:fixed;inset:0;z-index:99999;
  background:radial-gradient(circle at center,
    rgba(15,23,42,0.55) 0%,
    rgba(15,23,42,0.78) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  opacity:0;transition:opacity .25s ease;
  cursor:pointer;
}
.pm-orb-overlay.is-open{opacity:1;}

.pm-orb-stage{
  position:absolute;width:0;height:0;
  pointer-events:none;
  left:50%;top:50%;
}
.pm-orb-ring{
  position:absolute;left:50%;top:50%;
  width:320px;height:320px;border-radius:50%;
  border:1px dashed rgba(147,197,253,0.30);
  box-shadow:inset 0 0 80px rgba(59,130,246,0.06);
  transform:translate(-50%,-50%) scale(.35);
  opacity:0;
  transition:opacity .35s ease, transform .55s cubic-bezier(.22,1.4,.36,1);
}
.pm-orb-stage.is-open .pm-orb-ring{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
.pm-orb-ring--outer{
  width:420px;height:420px;
  border-color:rgba(147,197,253,0.16);
  transition-duration:.7s;
}
.pm-orb-center{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);
  width:108px;height:108px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,
    #BFDBFE 0%, #60A5FA 38%, #2563EB 72%, #1E3A8A 100%);
  box-shadow:
    0 0 0 8px rgba(59,130,246,0.18),
    0 0 50px rgba(59,130,246,0.55),
    0 0 100px rgba(99,102,241,0.30),
    inset 0 4px 14px rgba(255,255,255,0.30);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;padding:10px 12px;
  pointer-events:auto;cursor:default;
  transition:transform .45s cubic-bezier(.22,1.4,.36,1);
  z-index:2;
}
.pm-orb-stage.is-open .pm-orb-center{
  transform:translate(-50%,-50%) scale(1);
  animation:pmOrbCenterPulse 3.2s ease-in-out infinite .6s;
}
@keyframes pmOrbCenterPulse{
  0%,100%{box-shadow:0 0 0 8px rgba(59,130,246,0.18),0 0 50px rgba(59,130,246,0.55),0 0 100px rgba(99,102,241,0.30),inset 0 4px 14px rgba(255,255,255,0.30);}
  50%{box-shadow:0 0 0 14px rgba(59,130,246,0.10),0 0 80px rgba(59,130,246,0.80),0 0 140px rgba(99,102,241,0.45),inset 0 4px 14px rgba(255,255,255,0.30);}
}
.pm-orb-center__kicker{
  font:700 9px/1.1 "Inter",sans-serif;letter-spacing:.18em;
  text-transform:uppercase;opacity:.80;margin-bottom:5px;
}
.pm-orb-center__name{
  font:700 13px/1.15 "Archivo","Inter",sans-serif;
  letter-spacing:-.012em;
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
  max-width:92px;
}
.pm-orb-node{
  position:absolute;left:50%;top:50%;
  width:60px;height:60px;border-radius:50%;
  background:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:inherit;
  box-shadow:
    0 0 0 2px var(--node-glow, rgba(59,130,246,0.30)),
    0 8px 22px -4px rgba(15,23,42,0.45),
    0 0 32px var(--node-glow, rgba(59,130,246,0.22));
  pointer-events:auto;opacity:0;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,1.4,.36,1),
             opacity .35s ease,
             box-shadow .2s ease,
             background .2s ease;
  z-index:3;
}
.pm-orb-node svg{
  width:26px;height:26px;color:var(--node-color, #3B82F6);
  transition:color .18s ease, transform .2s ease;
}
.pm-orb-stage.is-open .pm-orb-node{
  opacity:1;
  transform:translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)) scale(1);
  transition-delay:var(--stagger, 0ms);
}
.pm-orb-node:hover,.pm-orb-node:focus-visible{
  background:var(--node-color, #3B82F6);outline:none;
  transform:translate(-50%,-50%) translate(var(--tx,0px),var(--ty,0px)) scale(1.14);
  box-shadow:
    0 0 0 4px var(--node-glow, rgba(59,130,246,0.50)),
    0 14px 32px -4px rgba(15,23,42,0.55),
    0 0 60px var(--node-glow, rgba(59,130,246,0.65));
}
.pm-orb-node:hover svg,
.pm-orb-node:focus-visible svg{color:#fff;transform:scale(1.05);}

.pm-orb-node__label{
  position:absolute;left:50%;top:calc(100% + 10px);
  transform:translateX(-50%);
  font:600 11.5px/1.2 "Inter",sans-serif;color:#fff;
  white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,0.65);
  letter-spacing:-.004em;pointer-events:none;
  opacity:0;transition:opacity .25s ease, font-weight .2s;
}
.pm-orb-stage.is-open .pm-orb-node__label{
  opacity:.86;
  transition-delay:calc(var(--stagger, 0ms) + 160ms);
}
.pm-orb-node:hover .pm-orb-node__label,
.pm-orb-node:focus-visible .pm-orb-node__label{
  opacity:1;font-weight:700;
}
.pm-orb-hint{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:100003;               /* bottom-centre, clear of the card + the
                                   raised top ("Copy code") node that used to
                                   cover it at the top */
  font:500 11px/1.2 "Inter",sans-serif;color:rgba(255,255,255,0.62);
  letter-spacing:.10em;text-transform:uppercase;
  pointer-events:none;
  display:inline-flex;align-items:center;gap:14px;
}
.pm-orb-hint kbd{
  font:600 10px/1 "Inter",sans-serif;color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  padding:3px 6px;border-radius:5px;letter-spacing:0;
}
.pm-orb-stage.is-closing .pm-orb-node{
  opacity:0;transform:translate(-50%,-50%) scale(0);transition-delay:0ms;
}
.pm-orb-stage.is-closing .pm-orb-center{
  transform:translate(-50%,-50%) scale(0);animation:none;
}
.pm-orb-stage.is-closing .pm-orb-ring{
  opacity:0;transform:translate(-50%,-50%) scale(.35);
}
@media (prefers-reduced-motion: reduce){
  .pm-orb-overlay,.pm-orb-stage,.pm-orb-stage *{
    transition-duration:.001s !important;animation:none !important;
  }
}
@media (max-width:600px){
  .pm-orb-node{width:54px;height:54px;}
  .pm-orb-node svg{width:22px;height:22px;}
}

/* NX22.3 — Upcoming sessions card REDESIGN.
   Outer backdrop stays dark (matches orbital depth), but the card is
   light/cream with sophisticated shimmer touches. Owner: 'sparkly,
   sophisticated — not all white, but lighter than dark mode.' */
.pm-orb-upcoming{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(15,23,42,0.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.pm-orb-upcoming.is-open{opacity:1;pointer-events:auto;}
.pm-orb-upcoming__card{
  position:relative;isolation:isolate;
  width:100%;max-width:560px;
  background:transparent;color:#0F172A;
  border-radius:20px;padding:26px 28px 20px;
  transform:translateY(8px) scale(.98);transition:transform .25s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 28px 80px -16px rgba(15,23,42,0.55);
}
/* Subtle conic-gradient ring border — same shimmer language as the
   Log session button + active year pill. Two layers: ring on ::before,
   light fill on ::after. */
.pm-orb-upcoming__card::before{
  content:'';position:absolute;inset:-1.5px;z-index:-2;border-radius:inherit;
  background:conic-gradient(from 220deg,
    #3B82F6 0%, #93C5FD 18%, #FFFFFF 32%,
    #BFDBFE 48%, #60A5FA 62%, #FFFFFF 76%,
    #DBEAFE 88%, #3B82F6 100%);
  opacity:.85;
}
.pm-orb-upcoming__card::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(380px 180px at 18% 0%, rgba(99,102,241,0.10), transparent 70%),
    linear-gradient(180deg, #FAFBFF 0%, #FFFFFF 60%);
}
.pm-orb-upcoming.is-open .pm-orb-upcoming__card{transform:translateY(0) scale(1);}
.pm-orb-upcoming__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.pm-orb-upcoming__back{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12.5px Inter,sans-serif;color:#1D4ED8;letter-spacing:-.003em;
  background:#fff;border:1px solid rgba(37,99,235,0.30);
  border-radius:9px;padding:8px 13px;cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.pm-orb-upcoming__back:hover{background:#EFF6FF;border-color:#2563EB;color:#1E40AF;}
.pm-orb-upcoming__title{
  font-family:"Archivo","Inter",sans-serif;font-size:20px;font-weight:800;
  color:#0F172A;letter-spacing:-.022em;margin:0;
}
.pm-orb-upcoming__sub{
  font:500 12.5px Inter,sans-serif;color:#64748B;margin:0 0 14px;letter-spacing:-.003em;
}
.pm-orb-upcoming__list{
  display:flex;flex-direction:column;gap:14px;
  max-height:60vh;overflow-y:auto;padding:4px 6px 4px 2px;
  scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent;
}
.pm-orb-upcoming__list::-webkit-scrollbar{width:6px;}
.pm-orb-upcoming__list::-webkit-scrollbar-thumb{background:#E2E8F0;border-radius:3px;}
.pm-orb-upcoming__row{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:16px;
  padding:18px 18px;border-radius:14px;
  background:#fff;
  border:1px solid rgba(99,102,241,0.22);
  min-height:96px;       /* breathing room — date pill is 78px tall + paddings */
  transition:border-color .18s ease, box-shadow .22s ease, transform .14s ease;
  width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer;
}
/* Slow shimmering gradient that flows across each row — the "energy"
   the owner asked for. Lives below the row content so it never blocks
   clicks. Animation runs continuously while the modal is open. */
.pm-orb-upcoming__row::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    linear-gradient(110deg,
      rgba(59,130,246,0.04) 0%,
      rgba(99,102,241,0.06) 30%,
      rgba(167,139,250,0.07) 55%,
      rgba(99,102,241,0.06) 75%,
      rgba(59,130,246,0.04) 100%);
  background-size:220% 100%;
  animation:pmRowShimmer 7s ease-in-out infinite;
  pointer-events:none;
}
/* Bright sweep that runs left → right on hover, like light passing
   over the card. */
.pm-orb-upcoming__row::after{
  content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;z-index:-1;
  background:linear-gradient(105deg,
    transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform:skewX(-18deg);
  opacity:0;transition:opacity .22s ease;pointer-events:none;
}
.pm-orb-upcoming__row:hover{
  border-color:rgba(59,130,246,0.48);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 10px 28px -8px rgba(59,130,246,0.32),
    0 0 0 4px rgba(59,130,246,0.06);
  transform:translateY(-2px);
}
.pm-orb-upcoming__row:hover::after{
  opacity:1;animation:pmRowSweep .9s ease forwards;
}
@keyframes pmRowShimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes pmRowSweep{
  0%{left:-40%;}
  100%{left:140%;}
}

/* Tiny twinkling sparkle in each row's top-right corner. */
.pm-orb-upcoming__sparkle{
  position:absolute;top:8px;right:10px;width:11px;height:11px;color:#60A5FA;
  pointer-events:none;
  animation:ljCtaSparkleTwinkle 2.6s ease-in-out infinite;
}
.pm-orb-upcoming__sparkle svg{width:100%;height:100%;}

/* Calendar tear-sheet style date pill — big day number, small month
   above, time below. The old layout squeezed 'TUE, JUN 2' onto a tiny
   pill which broke awkwardly. */
.pm-orb-upcoming__date{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;width:84px;min-height:78px;padding:8px 6px 9px;
  background:linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%);
  border:1px solid rgba(37,99,235,0.22);
  border-radius:12px;color:#1E3A8A;
  box-shadow:0 1px 2px rgba(15,23,42,0.04), inset 0 -1px 0 rgba(37,99,235,0.06);
}
/* Faint conic-shimmer ring on the date pill */
.pm-orb-upcoming__date::before{
  content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from 220deg,
    rgba(59,130,246,0.40) 0%, rgba(147,197,253,0.30) 25%,
    rgba(255,255,255,0.60) 50%, rgba(147,197,253,0.30) 75%, rgba(59,130,246,0.40) 100%);
  opacity:.45;
}
/* NX23.1 — big text is now the WEEKDAY abbreviation (TUE / WED / THU).
   Clients think in weekdays, not calendar dates. Three-letter labels
   need a slightly smaller size than the old 1-2 digit day-of-month. */
.pm-orb-upcoming__date-day{
  font-family:"Archivo","Inter",sans-serif;font-size:22px;font-weight:800;
  color:#0F172A;letter-spacing:-.020em;line-height:1;margin:0;
  white-space:nowrap;text-transform:uppercase;
}
/* NX23.1 — time on ONE LINE (AM/PM next to the digits, never wrapped). */
.pm-orb-upcoming__date-time{
  font:700 11px Inter,sans-serif;color:#1D4ED8;margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  padding:2px 7px;background:rgba(37,99,235,0.10);border-radius:5px;
  white-space:nowrap;
}
.pm-orb-upcoming__body{flex:1;min-width:0;}
.pm-orb-upcoming__title-row{font:700 14.5px Inter,sans-serif;color:#0F172A;margin:0;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pm-orb-upcoming__meta{font:500 12.5px Inter,sans-serif;color:#64748B;margin:3px 0 0;letter-spacing:-.003em;}
.pm-orb-upcoming__loading,.pm-orb-upcoming__empty{
  padding:36px 14px;text-align:center;color:#64748B;font-size:13.5px;
}
.pm-orb-upcoming__empty-title{font:700 14.5px Inter,sans-serif;color:#0F172A;margin:0 0 4px;letter-spacing:-.005em;}
.pm-orb-upcoming__empty-sub{font-size:12.5px;color:#94A3B8;margin:0;line-height:1.5;}
.pm-orb-upcoming__spinner{
  width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:6px;
  border:2px solid #E2E8F0;border-top-color:#2563EB;border-radius:50%;
  animation:pm-sb-flyout-spin .7s linear infinite;
}
.pm-orb-upcoming__foot{
  margin-top:16px;font:500 11px/1.2 Inter,sans-serif;color:#94A3B8;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
}
.pm-orb-upcoming__foot kbd{
  font:600 10px/1 Inter,sans-serif;color:#475569;
  background:#F1F5F9;border:1px solid #E2E8F0;
  padding:3px 6px;border-radius:5px;letter-spacing:0;
}

/* NX22.3 — Inline action form (Reschedule / Cancel / Add session) */
.pm-act-form{display:flex;flex-direction:column;gap:12px;}
.pm-act-label{
  display:flex;flex-direction:column;gap:6px;
  font:700 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#475569;
}
.pm-act-input{
  font:500 14px Inter,sans-serif;color:#0F172A;
  background:#fff;border:1px solid #E2E8F0;border-radius:9px;
  padding:10px 12px;outline:none;letter-spacing:-.003em;
  transition:border-color .12s ease, box-shadow .12s ease;
  font-family:inherit;
}
.pm-act-input:focus{border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.pm-act-input--ta{min-height:64px;resize:vertical;font-weight:400;}
.pm-act-pickedrow{
  display:flex;align-items:center;gap:14px;
  padding:11px 13px;border-radius:11px;
  background:linear-gradient(180deg, rgba(99,102,241,0.07) 0%, rgba(255,255,255,1) 70%);
  border:1px solid rgba(99,102,241,0.22);
}
.pm-act-pickedrow__date{margin:0;}
.pm-act-submit{
  position:relative;isolation:isolate;
  font:700 14px/1 Inter,sans-serif;letter-spacing:-.005em;
  color:#1E3A8A;background:transparent;border:none;border-radius:9999px;
  padding:12px 22px 12px 18px;
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;align-self:flex-start;
  box-shadow:0 1px 2px rgba(15,23,42,0.04),0 6px 18px -6px rgba(59,130,246,0.30);
  transition:transform .18s ease, box-shadow .22s ease, color .15s ease;
}
.pm-act-submit::before{
  content:'';position:absolute;inset:-1.5px;z-index:-2;border-radius:inherit;
  background:conic-gradient(from 220deg,
    #3B82F6 0%, #93C5FD 18%, #FFFFFF 32%,
    #BFDBFE 48%, #60A5FA 62%, #FFFFFF 76%,
    #DBEAFE 88%, #3B82F6 100%);
}
.pm-act-submit::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(239,246,255,0.94) 100%);
}
.pm-act-submit:hover{
  transform:translateY(-1px) scale(1.02);color:#1E40AF;
  box-shadow:0 2px 4px rgba(15,23,42,0.05),0 16px 32px -10px rgba(59,130,246,0.55),0 0 0 4px rgba(59,130,246,0.10);
}
.pm-act-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.pm-act-submit__sparkle{
  width:14px;height:14px;color:#3B82F6;display:inline-flex;align-items:center;justify-content:center;
  animation:ljCtaSparkleTwinkle 2.4s ease-in-out infinite;
}
.pm-act-submit__sparkle svg{width:100%;height:100%;}
.pm-act-submit--danger{color:#991B1B;box-shadow:0 1px 2px rgba(15,23,42,0.04),0 6px 18px -6px rgba(220,38,38,0.30);}
.pm-act-submit--danger::before{
  background:conic-gradient(from 220deg,
    #F87171 0%, #FCA5A5 18%, #FFFFFF 32%,
    #FECACA 48%, #EF4444 62%, #FFFFFF 76%,
    #FEE2E2 88%, #F87171 100%);
}
.pm-act-submit--danger::after{background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(254,242,242,0.94) 100%);}
.pm-act-submit--danger .pm-act-submit__sparkle{color:#EF4444;}
.pm-act-submit--danger:hover{color:#7F1D1D;box-shadow:0 2px 4px rgba(15,23,42,0.05),0 16px 32px -10px rgba(220,38,38,0.55),0 0 0 4px rgba(220,38,38,0.10);}
.pm-act-status{margin:0;font:500 13px Inter,sans-serif;color:#64748B;letter-spacing:-.003em;}
.pm-act-status[data-kind="ok"]{color:#047857;font-weight:700;}
.pm-act-status[data-kind="error"]{color:#B91C1C;font-weight:700;}

/* NX23 — Explanatory note above staff-action submit buttons (Mark complete,
   From bank, No-show). Keeps the confirmation context visible inside the
   form without needing a separate confirm dialog. */
.pm-act-note{
  margin:0;
  font:500 13px Inter,sans-serif;
  color:#475569;
  letter-spacing:-.003em;
  line-height:1.55;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:10px;
  padding:11px 13px;
}
.pm-act-note strong{color:#0F172A;font-weight:700;}

/* Picker row inside action modal — variation of upcoming row, clickable */
.pm-act-pick{cursor:pointer;background:transparent;font-family:inherit;text-align:left;}

/* ════════════════════════════════════════════════════════════════════
   NX28OO — Reschedule orbital + modal: cursor wall + opaque backdrop.
   ────────────────────────────────────────────────────────────────────
   Owner reported TWO related glitches on the orbital and reschedule
   modal screens:

     1. macOS cursor flickering rapidly between black and white as he
        moved across the overlay. Cause: the cursor on macOS auto-
        inverts (black on light bg, white on dark bg). The earlier
        backdrop was only 55% opacity dark, so underlying dashboard
        cards (white portfolio widgets, the Activity Map iframe at the
        bottom of the page) bled through as light patches inside the
        overlay. As the cursor crossed those light/dark boundaries it
        kept flipping color, looking like a flicker bug. Owner verbatim:
        'i see the cursor switching ebtween white and black cursor …
        behind this screen the cursor is picking up options. can you
        put a clear wall behind it so it stops doing that?'

     2. 'gigantic big white box that keeps doing that' — same root
        cause. The Activity Map iframe at the bottom of the dashboard
        has a light cream background. Through a 0.55-opacity backdrop
        it reads as a wide white horizontal band visible below the
        modal card. Increasing backdrop opacity to ~0.88 makes it
        recede to a uniform dark wash — the cinematic feel survives,
        but no more white band.

   Fix is purely cosmetic CSS — no JS, no DOM changes, just a higher
   opacity backstop + cursor consistency on the overlay surfaces.

     • Backdrop opacity bumped 0.55 → ~0.88. Some hint of the
       background still bleeds through the radial gradient at the
       extreme outside, but the inner zone is solidly dark.
     • cursor:default forced on the WHOLE overlay (was cursor:pointer
       on .pm-orb-overlay + cursor:default on the center orb, which
       created a pointer↔default flip at the center boundary even
       without the macOS color inversion). Only the actual clickable
       children (nodes, picker rows, back button, submit button) keep
       cursor:pointer; inputs/textareas stay cursor:text.
     • Owner asked for this to apply 'also for when each of the
       options are clicked' — i.e. the .pm-orb-upcoming reschedule
       modal that opens when a node is clicked. Both selector blocks
       below cover it.

   Local-only edit per owner's standing 'don't deploy' instruction.
   Bumps sidebar.css cache to v=20260601r in client-dashboard.html.
   ════════════════════════════════════════════════════════════════════ */
.pm-orb-overlay{
  /* NX28OO — denser backdrop so dashboard cards behind don't show as
     light patches. This is the only piece we keep from the cursor-
     flicker experiments — it's a legitimate visual improvement
     regardless of cursor behavior. */
  background:radial-gradient(circle at center,
    rgba(15,23,42,0.82) 0%,
    rgba(15,23,42,0.92) 100%) !important;
}
.pm-orb-upcoming{
  background:rgba(15,23,42,0.88) !important;
}
/* NX28QQ / NX28RR reverted per Caleb 2026-06-02: the cursor:url
   data-URI custom cursor AND the body.pm-custom-cursor JS-rendered
   cursor are both gone. We're back to the macOS system cursor in
   every overlay. The flicker turned out to be likely a per-user
   macOS / Chrome setting on Caleb's machine (his girlfriend on the
   identical laptop + Chrome sees no flicker), so it's not a code
   bug to chase. Backdrop opacity (NX28OO) and body scroll lock
   (NX28PP in sidebar.js) stay. */

/* Show a chevron on family tiles too so users see "there's more behind" */

/* Dark theme — secondary panel */
html[data-dash-theme="dark"] .pm-sb-flyout__head--sec{background:transparent;}
html[data-dash-theme="dark"] .pm-sb-flyout__head-avatar{
  background:#1f2937;border-color:rgba(59,130,246,0.32);color:#93c5fd;
}
html[data-dash-theme="dark"] .pm-sb-flyout__head-name{color:#f1f5f9;}
html[data-dash-theme="dark"] .pm-sb-flyout__opt{color:#cbd5e1;}
html[data-dash-theme="dark"] .pm-sb-flyout__opt:hover{
  background:linear-gradient(180deg, rgba(59,130,246,0.10) 0%, rgba(22,23,28,1) 100%);
  border-color:rgba(59,130,246,0.30);color:#93c5fd;
}
html[data-dash-theme="dark"] .pm-sb-flyout__opt-icon{color:#64748b;}

/* ═══════════════════════════════════════════════════════════════════════
   NX24 — Refer-a-friend orbital. Premium gift-card center with confetti,
   gift-box illustration, eyebrow + title + 20% offer, referral code
   chip with inline copy. Three orbital nodes around it (Copy / Share /
   Contact owner). Share opens a sub-card with social targets.
   ═══════════════════════════════════════════════════════════════════════ */
.pm-refer-overlay{
  /* Wider lighting on the center so the card pops. */
  background:radial-gradient(circle at center,
    rgba(15,23,42,0.50) 0%,
    rgba(15,23,42,0.80) 100%);
}
/* NX24.1 — Redesign for proper hierarchy + breathing room.
   Wider card (440px), generous padding (36/32/30), 4 clear zones:
   confetti decoration → hero (gift) → headline (eyebrow+title+desc)
   → offer chip → code section. Each zone has its own gap so nothing
   feels crammed. */
.pm-refer-card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.92);
  width:min(440px, calc(100vw - 64px));
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border:1px solid rgba(99,102,241,0.18);
  border-radius:26px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 32px 80px -22px rgba(67, 56, 202, 0.50),
    0 0 0 1px rgba(255,255,255,0.55) inset;
  padding:32px 32px 28px;
  text-align:center;
  pointer-events:auto;
  overflow:hidden;
  opacity:0;
  display:flex;flex-direction:column;gap:0;
  transition:opacity .35s ease, transform .55s cubic-bezier(.22,1.4,.36,1);
}
.pm-orb-stage.is-open .pm-refer-card{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Soft conic-gradient ring around the card edge. */
.pm-refer-card::before{
  content:'';position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from 220deg,
    rgba(99,102,241,0.55) 0%, rgba(167,139,250,0.30) 25%,
    rgba(252,211,77,0.45) 50%, rgba(167,139,250,0.30) 75%, rgba(99,102,241,0.55) 100%);
  opacity:.55;
  filter:blur(0.2px);
}

/* Confetti dots float in the hero zone only — pinned to the top so
   they don't drift over the title. */
.pm-refer-card__confetti{
  position:absolute;inset:0 0 auto 0;height:160px;pointer-events:none;
  overflow:hidden;z-index:1;
}
.pm-refer-card__dot{
  position:absolute;width:8px;height:8px;border-radius:2px;
  opacity:.78;
  animation:pmReferFloat 6s ease-in-out infinite;
}
.pm-refer-card__dot--1{top:22px;left:14%;background:#6366F1;transform:rotate(15deg);}
.pm-refer-card__dot--2{top:44px;left:84%;background:#F59E0B;transform:rotate(-20deg);animation-delay:.6s;}
.pm-refer-card__dot--3{top:72px;left:6%;background:#EC4899;transform:rotate(40deg);animation-delay:1.1s;}
.pm-refer-card__dot--4{top:90px;left:92%;background:#10B981;transform:rotate(-10deg);animation-delay:.3s;}
.pm-refer-card__dot--5{top:18px;left:54%;background:#FCD34D;border-radius:50%;width:6px;height:6px;animation-delay:1.4s;}
.pm-refer-card__dot--6{top:114px;left:30%;background:#8B5CF6;border-radius:50%;width:5px;height:5px;animation-delay:.9s;}
@keyframes pmReferFloat{
  0%,100% { transform: translateY(0); opacity:.78; }
  50%     { transform: translateY(-6px); opacity:.50; }
}

/* ── Zone 1: hero (gift box) ───────────────────────────────────── */
.pm-refer-card__hero{
  position:relative;z-index:2;
  margin:0 auto 4px;
  display:flex;align-items:center;justify-content:center;
  height:130px;
}
.pm-refer-card__gift{
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 12px 22px rgba(67,56,202,0.32));
  animation:pmReferGiftBob 4.2s ease-in-out infinite;
}
@keyframes pmReferGiftBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

/* ── Zone 2: headline (eyebrow + title + desc) ─────────────────── */
.pm-refer-card__headline{
  position:relative;z-index:2;
  margin:0 0 22px;
  padding:0 4px;
}
.pm-refer-card__eyebrow{
  margin:0 0 10px;
  font:800 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#6366F1;
  background:linear-gradient(90deg, #6366F1 0%, #EC4899 55%, #F59E0B 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pm-refer-card__title{
  margin:0 0 12px;
  font:800 24px Inter,sans-serif;letter-spacing:-.022em;color:#0F172A;
  line-height:1.18;
}
.pm-refer-card__title br{ /* keep the forced line-break decorative on narrow widths only */ }
.pm-refer-card__desc{
  margin:0 auto;max-width:340px;
  font:500 13.5px Inter,sans-serif;color:#64748B;
  letter-spacing:-.003em;line-height:1.6;
}

/* ── Zone 3: 20% offer callout chip ──────────────────────────────
   NX24.3 — vertical stack: badge centered ABOVE the explainer text
   (was horizontal, which crushed the text into a narrow column next
   to the badge). Badge bumped to a bigger pill so it reads as the
   hero of this zone; text centered, capped to ~280px so it never
   wraps to more than 2 short lines. */
.pm-refer-card__offer{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:0 0 22px;padding:14px 16px;
  background:linear-gradient(95deg, rgba(99,102,241,0.10) 0%, rgba(236,72,153,0.08) 70%, rgba(245,158,11,0.10) 100%);
  border:1px solid rgba(99,102,241,0.22);
  border-radius:14px;
  text-align:center;
}
.pm-refer-card__offer-badge{
  font:800 13.5px Inter,sans-serif;letter-spacing:.06em;color:#fff;
  background:linear-gradient(135deg, #4338CA 0%, #6366F1 100%);
  padding:6px 14px;border-radius:999px;
  box-shadow:0 6px 14px -3px rgba(67,56,202,0.50);
}
.pm-refer-card__offer-text{
  font:600 12.5px Inter,sans-serif;color:#334155;letter-spacing:-.003em;
  line-height:1.45;max-width:280px;
}

/* ── Zone 4: referral code + inline copy ───────────────────────── */
.pm-refer-card__codewrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
}
.pm-refer-card__codelabel{
  font:700 10.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#94A3B8;
  text-align:left;padding-left:2px;
}
.pm-refer-card__codebar{
  display:flex;align-items:center;gap:10px;
  background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;
  padding:10px 10px 10px 14px;
}
.pm-refer-card__code{
  flex:1;text-align:center;
  font:800 15.5px "JetBrains Mono","Menlo","Consolas",monospace;
  color:#0F172A;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-refer-card__copy{
  display:inline-flex;align-items:center;gap:6px;
  font:700 12.5px Inter,sans-serif;color:#fff;letter-spacing:-.005em;
  padding:8px 14px;border-radius:9px;border:none;cursor:pointer;
  background:linear-gradient(180deg, #6366F1 0%, #4338CA 100%);
  box-shadow:0 1px 2px rgba(15,23,42,0.05), 0 6px 14px -4px rgba(99,102,241,0.45);
  transition:transform .12s ease, box-shadow .14s ease;
}
.pm-refer-card__copy:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,23,42,0.06), 0 10px 22px -4px rgba(99,102,241,0.55);
}
.pm-refer-card__copy svg{width:14px;height:14px;}

/* NX24.2 — explicit close button for the referral orbital. Background
   clicks on the overlay no longer dismiss the orbital — owner spec:
   "shouldn't end the refer" when clicking out of copy or share. */
.pm-refer-close{
  position:absolute;top:20px;right:20px;z-index:10;
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(15,23,42,0.55);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 18px -6px rgba(15,23,42,0.45);
  transition:background .14s ease, transform .12s ease;
}
.pm-refer-close:hover{
  background:rgba(15,23,42,0.85);transform:scale(1.06);
}
.pm-refer-close svg{display:block;}

/* Toast: appears when the user copies. */
.pm-refer-toast{
  position:absolute;left:50%;bottom:60px;transform:translate(-50%, 16px);
  background:rgba(15,23,42,0.92);color:#fff;
  font:700 12.5px Inter,sans-serif;letter-spacing:-.005em;
  padding:9px 14px;border-radius:999px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 12px 28px -6px rgba(15,23,42,0.45);
  z-index:5;
}
.pm-refer-toast.is-on{ opacity:1; transform:translate(-50%, 0); }

/* Share sub-card — overlays the orbital, light card with social-target
   buttons in a grid. Higher z so it floats above the orbital. */
.pm-refer-share{
  position:fixed;inset:0;z-index:100001;
  background:radial-gradient(circle at center,
    rgba(15,23,42,0.45) 0%,
    rgba(15,23,42,0.70) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease;
  padding:20px;
}
.pm-refer-share.is-open{ opacity:1; }
.pm-refer-share__card{
  width:min(440px, 100%);
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border:1px solid rgba(99,102,241,0.18);
  border-radius:18px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 24px 60px -16px rgba(67,56,202,0.42);
  padding:18px 18px 14px;
  transform:scale(.96);opacity:0;
  transition:transform .25s cubic-bezier(.22,1.4,.36,1), opacity .25s ease;
}
.pm-refer-share.is-open .pm-refer-share__card{ transform:scale(1); opacity:1; }
.pm-refer-share__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-bottom:14px;
}
.pm-refer-share__title{
  margin:0;font:800 16px Inter,sans-serif;color:#0F172A;letter-spacing:-.01em;
}
.pm-refer-share__sub{
  margin:2px 0 0;font:500 12.5px Inter,sans-serif;color:#64748B;letter-spacing:-.003em;
}
.pm-refer-share__back{
  display:inline-flex;align-items:center;gap:5px;
  font:700 11.5px Inter,sans-serif;color:#475569;letter-spacing:-.005em;
  background:#fff;border:1px solid #E2E8F0;border-radius:8px;
  padding:6px 9px;cursor:pointer;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.pm-refer-share__back:hover{ background:#F8FAFC; color:#0F172A; border-color:#CBD5E1; }
.pm-refer-share__grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:10px;
}
@media (max-width: 460px){
  .pm-refer-share__grid{ grid-template-columns:repeat(3, 1fr); }
}
.pm-refer-share__btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;
  padding:14px 8px 10px;
  font:700 11.5px Inter,sans-serif;color:#0F172A;letter-spacing:-.003em;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.pm-refer-share__btn:hover{
  transform:translateY(-2px);
  border-color:var(--btn-color, #6366F1);
  background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow:0 8px 18px -6px rgba(15,23,42,0.18), 0 0 0 1px var(--btn-color, #6366F1);
}
.pm-refer-share__btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--btn-color, #6366F1);color:#fff;
  box-shadow:0 6px 14px -4px color-mix(in srgb, var(--btn-color, #6366F1) 55%, transparent);
}
.pm-refer-share__btn-icon svg{ width:18px; height:18px; }
.pm-refer-share__btn-label{ display:block; }
.pm-refer-share__foot{
  margin:14px 0 0;text-align:center;font:500 11px Inter,sans-serif;color:#94A3B8;letter-spacing:-.003em;
}
.pm-refer-share__foot kbd{
  background:#F1F5F9;border:1px solid #E2E8F0;border-radius:4px;padding:1px 5px;
  font:700 10.5px Inter,sans-serif;color:#0F172A;
}

/* ── Refer orbital: mobile action bar (2026-07-02) ─────────────────────
   On <600px screens the three orbit nodes overlapped the 440px card and
   clipped off-screen. Hide the orbit there and surface the same actions
   inline under the code bar. Desktop keeps the signature orbital look. */
.pm-refer-mobilebar{display:none;gap:8px;margin-top:14px;}
.pm-refer-mobilebar__btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 10px;border-radius:12px;
  border:1px solid #E2E8F0;background:#F8FAFC;color:#0F172A;
  font:700 12.5px Inter,sans-serif;cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.pm-refer-mobilebar__btn:hover{background:#EEF2FF;border-color:#C7D2FE;}
.pm-refer-mobilebar__btn svg{width:15px;height:15px;flex-shrink:0;}
@media (max-width:600px){
  .pm-refer-overlay .pm-orb-node,
  .pm-refer-overlay .pm-orb-ring,
  .pm-refer-overlay .pm-orb-ring--outer,
  .pm-refer-overlay .pm-orb-hint{display:none !important;}
  .pm-refer-mobilebar{display:flex;}
}