/* =============================================================================
   mh-onboard.css  -  First-Login "Complete Your Profile" ONBOARDING screen.
   Ported from the duo mock (profile-onboard/duo.css), scoped to .mh-onboard and
   wired to the app's ONE theme mechanism: DARK is the base (body.dark), LIGHT
   overrides under body:not(.dark). Self-contained palette (brand values) so the
   screen never depends on another sheet's token names. Also styles the shared
   MhSelect widget (.mhsel-*). Plain hyphens only.
   ============================================================================= */

/* ---- shared fonts ---- */
.mh-onboard{
  --ob-font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --ob-font-display:'Bricolage Grotesque', Georgia, serif;
  --ob-green:#5C8A6A;
  --ob-teal:#7D939B; --ob-teal-deep:#5E7A83; --ob-teal-700:#496670;
}

/* ---------- DARK tokens (base / default) ---------- */
.mh-onboard{
  --t-text:#fff;
  --t-body:#EAF1F3;
  --t-soft:rgba(186,205,211,.78);
  --t-faint:rgba(176,196,202,.62);
  --t-dim:rgba(176,196,202,.45);
  --t-req:#E6B780;
  --t-bg:radial-gradient(135% 115% at 50% -10%, #2E444B 0%, #21323A 44%, #16242A 78%, #111C21 100%);
  --t-glow1:radial-gradient(circle, rgba(125,147,155,.42), transparent 62%);
  --t-glow2:radial-gradient(circle, rgba(94,122,131,.32), transparent 64%);
  --t-grid:rgba(255,255,255,.045);
  --t-mark-shadow:drop-shadow(0 2px 8px rgba(0,0,0,.4));
  --t-wordmark:#fff;
  --t-hair:rgba(255,255,255,.18);
  --t-kick-bg:rgba(125,147,155,.16);
  --t-kick-border:rgba(125,147,155,.34);
  --t-kick-text:#B7CDD3;
  --t-h1-span:#9FB7BD;
  --t-card-bg:linear-gradient(180deg, rgba(28,42,48,.72), rgba(18,29,34,.82));
  --t-card-border:rgba(125,147,155,.24);
  --t-card-shadow:0 -8px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  --t-blur:blur(12px);
  --t-scroll:rgba(176,196,202,.26);
  --t-divider:rgba(255,255,255,.1);
  --t-av-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1.5px rgba(255,255,255,.14);
  --t-av-hover-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1.5px rgba(125,147,155,.6);
  --t-cam-grad:linear-gradient(180deg,#B3CBD2,#7D939B);
  --t-cam-border:#1a2a30;
  --t-cam-color:#0F1A1F;
  --t-label:rgba(214,227,231,.92);
  --t-sec:#8FA9B0;
  --t-si-bg:rgba(125,147,155,.18);
  --t-si-color:#A9C2C9;
  --t-input-bg:rgba(255,255,255,.045);
  --t-input-border:rgba(255,255,255,.12);
  --t-input-bg-focus:rgba(255,255,255,.075);
  --t-ring:rgba(125,147,155,.2);
  --t-locked-bg:rgba(255,255,255,.025);
  --t-locked-text:rgba(186,205,211,.7);
  --t-menu-bg:linear-gradient(180deg,#243740,#1A2A30);
  --t-menu-border:rgba(125,147,155,.32);
  --t-menu-shadow:0 20px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  --t-opt-text:rgba(214,227,231,.88);
  --t-opt-hover-bg:rgba(125,147,155,.18);
  --t-opt-hover-text:#fff;
  --t-opt-on-bg:rgba(125,147,155,.14);
  --t-opt-on-text:#fff;
  --t-footer-grad:linear-gradient(180deg, rgba(18,29,34,0), rgba(15,24,29,.96) 38%);
  --t-toast-bg:linear-gradient(180deg,#2E444B,#21323A);
  --t-toast-border:rgba(125,147,155,.4);
  --t-toast-shadow:0 18px 44px rgba(0,0,0,.5);
  --t-tg-bg:rgba(255,255,255,.07);
  --t-tg-knob:linear-gradient(180deg,#B3CBD2,#7D939B);
  --t-tg-icon:rgba(176,196,202,.7);
  --t-tg-icon-on:#fff;
  --t-bad:#E08A7A;
}

/* ---------- LIGHT tokens (override when body is not dark) ---------- */
body:not(.dark) .mh-onboard{
  --t-text:#2E2E2E;
  --t-body:#2E2E2E;
  --t-soft:#62625C;
  --t-faint:#8C8C84;
  --t-dim:#8C8C84;
  --t-req:#C6824F;
  --t-bg:radial-gradient(135% 115% at 50% -10%, #FFFFFF 0%, #F1F4F7 46%, #E8EBF0 80%, #DFE4EA 100%);
  --t-glow1:radial-gradient(circle, rgba(78,124,114,.08), transparent 62%);
  --t-glow2:radial-gradient(circle, rgba(125,147,155,.10), transparent 64%);
  --t-grid:rgba(33,50,58,.05);
  --t-mark-shadow:drop-shadow(0 2px 8px rgba(33,50,58,.16));
  --t-wordmark:#2E2E2E;
  --t-hair:#D9DFE7;
  --t-kick-bg:rgba(125,147,155,.12);
  --t-kick-border:rgba(125,147,155,.32);
  --t-kick-text:#496670;
  --t-h1-span:#496670;
  --t-card-bg:#FFFFFF;
  --t-card-border:#D9DFE7;
  --t-card-shadow:0 -8px 60px rgba(33,50,58,.10), 0 2px 6px rgba(33,50,58,.04), inset 0 1px 0 rgba(255,255,255,.6);
  --t-blur:none;
  --t-scroll:rgba(33,50,58,.16);
  --t-divider:#E7ECEA;
  --t-av-shadow:0 10px 24px rgba(73,102,112,.32), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1.5px rgba(255,255,255,.6);
  --t-av-hover-shadow:0 10px 24px rgba(73,102,112,.32), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1.5px rgba(125,147,155,.7);
  --t-cam-grad:linear-gradient(180deg,#7D939B,#5E7A83);
  --t-cam-border:#fff;
  --t-cam-color:#fff;
  --t-label:#2E2E2E;
  --t-sec:#496670;
  --t-si-bg:rgba(125,147,155,.14);
  --t-si-color:#3C525B;
  --t-input-bg:#fff;
  --t-input-border:#D9DFE7;
  --t-input-bg-focus:#fff;
  --t-ring:rgba(125,147,155,.16);
  --t-locked-bg:#F1F4F7;
  --t-locked-text:#62625C;
  --t-menu-bg:#fff;
  --t-menu-border:#D9DFE7;
  --t-menu-shadow:0 20px 48px rgba(33,50,58,.18), 0 4px 12px rgba(33,50,58,.08);
  --t-opt-text:#62625C;
  --t-opt-hover-bg:#F1F4F7;
  --t-opt-hover-text:#2E2E2E;
  --t-opt-on-bg:rgba(125,147,155,.12);
  --t-opt-on-text:#2E2E2E;
  --t-footer-grad:linear-gradient(180deg, rgba(255,255,255,0), #FFFFFF 38%);
  --t-toast-bg:#fff;
  --t-toast-border:#D9DFE7;
  --t-toast-shadow:0 18px 44px rgba(33,50,58,.18);
  --t-tg-bg:#E7ECEA;
  --t-tg-knob:#ffffff;
  --t-tg-icon:#8C8C84;
  --t-tg-icon-on:#3C525B;
  --t-bad:#B65B43;
}

/* ---------- host: neutralize the app's sidebar grid on EmptyLayout ---------- */
.mh-onboard-host{display:block;min-height:calc(100 * var(--mh-vh));}

/* ---------- shell (fixed viewport height so the card body scrolls internally
   and the footer CTA stays pinned, matching the mock) ---------- */
.mh-onboard{position:relative;height:calc(100 * var(--mh-vh));display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--ob-font-ui);-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;
  color:var(--t-body);background:var(--t-bg);transition:background .35s ease,color .35s ease;}
.mh-onboard *{box-sizing:border-box;}
.mh-onboard h1{font-family:var(--ob-font-display);font-weight:700;margin:0;letter-spacing:-0.02em;line-height:1.05;}
.mh-onboard p{margin:0;}
.mh-onboard button{font-family:var(--ob-font-ui);cursor:pointer;border:none;}
.mh-onboard .ob-req{color:var(--t-req);font-weight:700;margin-left:2px;}
.mh-onboard svg{display:block;}

/* ambient glows + grid */
.mh-onboard .ob-glow{position:absolute;border-radius:50%;pointer-events:none;}
.mh-onboard .ob-g1{width:680px;height:680px;top:-300px;left:50%;transform:translateX(-50%);background:var(--t-glow1);filter:blur(26px);}
.mh-onboard .ob-g2{width:420px;height:420px;bottom:-200px;right:-120px;background:var(--t-glow2);filter:blur(32px);}
.mh-onboard .ob-grid{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:radial-gradient(var(--t-grid) 1px, transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);}

/* hero bar - named .ob-hero (NOT .ob-bar: that class is the Dashboard "You're on
   Track" 7px progress bar, and under our .mh-app wrap .mh-app .ob-bar{height:7px}
   would clamp this header and clip the mark/toggle). flex:0 0 auto so the fixed-
   height onboard column never compresses it - only .ob-stage absorbs slack. */
.mh-onboard .ob-hero{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:24px clamp(20px,5vw,52px) 0;max-width:760px;margin:0 auto;width:100%;}
.mh-onboard .ob-brand{display:flex;align-items:center;gap:14px;}
.mh-onboard .ob-mark{height:48px;width:48px;display:block;filter:var(--t-mark-shadow);object-fit:contain;}
.mh-onboard .ob-wordmark{font-family:var(--ob-font-ui);font-weight:800;font-size:18px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--t-wordmark);}

/* theme switch (wrapped so its hint bubble anchors directly under the toggle) */
.mh-onboard .ob-tgwrap{margin-left:auto;position:relative;display:inline-flex;}
.mh-onboard .ob-tg{display:inline-flex;align-items:center;gap:7px;height:38px;padding:4px;border-radius:30px;
  background:var(--t-kick-bg);border:1px solid var(--t-kick-border);transition:.25s;}
.mh-onboard .ob-tg button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:none;color:var(--t-tg-icon);transition:.2s;padding:0;}
.mh-onboard .ob-tg button svg{width:16px;height:16px;}
.mh-onboard .ob-tg button.on{background:var(--t-tg-knob);color:var(--t-tg-icon-on);box-shadow:0 2px 6px rgba(33,50,58,.16), 0 0 0 1px rgba(33,50,58,.05);}

/* lead (flex:0 0 auto - same reason as the bar: never compress the headline) */
.mh-onboard .ob-lead{position:relative;z-index:3;flex:0 0 auto;text-align:center;padding:26px 24px 18px;max-width:600px;margin:0 auto;width:100%;}
.mh-onboard .ob-kick{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:30px;
  background:var(--t-kick-bg);border:1px solid var(--t-kick-border);
  font-size:11.5px;font-weight:700;color:var(--t-kick-text);letter-spacing:.05em;}
.mh-onboard .ob-kick .ob-d{width:7px;height:7px;border-radius:50%;background:var(--ob-green);animation:obpulse 2.6s infinite;}
@keyframes obpulse{0%{box-shadow:0 0 0 0 rgba(92,138,106,.5)}70%{box-shadow:0 0 0 8px rgba(92,138,106,0)}100%{box-shadow:0 0 0 0 rgba(92,138,106,0)}}
.mh-onboard .ob-lead h1{font-size:clamp(28px,4.4vw,38px);color:var(--t-text);margin-top:18px;}
.mh-onboard .ob-lead h1 span{color:var(--t-h1-span);}
.mh-onboard .ob-sub{font-size:14.5px;color:var(--t-soft);margin-top:7px;line-height:1.6;max-width:48ch;margin-left:auto;margin-right:auto;}

/* card */
.mh-onboard .ob-stage{position:relative;z-index:3;flex:1;display:flex;justify-content:center;padding:14px clamp(14px,4vw,40px) 0;min-height:0;}
.mh-onboard .ob-card{width:100%;max-width:660px;display:flex;flex-direction:column;min-height:0;
  background:var(--t-card-bg);border:1px solid var(--t-card-border);border-bottom:none;border-radius:24px 24px 0 0;overflow:hidden;
  box-shadow:var(--t-card-shadow);-webkit-backdrop-filter:var(--t-blur);backdrop-filter:var(--t-blur);transition:background .35s ease,border-color .35s ease;}
.mh-onboard .ob-cbody{flex:1;min-height:0;overflow-y:auto;padding:28px clamp(22px,4vw,38px) 110px;
  scrollbar-width:thin;scrollbar-color:var(--t-scroll) transparent;}
.mh-onboard .ob-cbody::-webkit-scrollbar{width:8px;}
.mh-onboard .ob-cbody::-webkit-scrollbar-thumb{background:var(--t-scroll);border-radius:8px;}

/* identity row */
.mh-onboard .ob-idrow{display:flex;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--t-divider);margin-bottom:6px;}
.mh-onboard .ob-av{width:92px;height:92px;border-radius:50%;flex:0 0 auto;position:relative;padding:0;border:none;background:none;cursor:pointer;}
/* Default (no photo) = the CANONICAL photo-studio avatar: Matthew House pine
   gradient + a large white person glyph (matches the New Client Wizard .pv-avatar
   default). Hardcoded pine so it reads identically in light + dark. */
.mh-onboard .ob-av-img{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;color:#fff;transition:filter .15s,box-shadow .15s;
  background:linear-gradient(150deg,#4E7C72,#2E4A43);border:2px solid rgba(255,255,255,.18);box-shadow:var(--t-av-shadow);}
.mh-onboard .ob-av-img svg{width:50px;height:50px;color:#fff;opacity:.95;}
.mh-onboard .ob-av-img img{width:100%;height:100%;object-fit:cover;}
.mh-onboard .ob-av:hover .ob-av-img{filter:brightness(.85);box-shadow:var(--t-av-hover-shadow);}
/* CANONICAL camera badge - identical to Client Detail (.mh-btn) + My Profile (.pp-cam):
   clay circle + pine ring + white camera. --mh-clay / --mh-sidebar resolve from the
   .mh-app wrap, so it is exactly the same badge app-wide (same glyph already). */
.mh-onboard .ob-cam-badge{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--mh-clay);border:2.5px solid var(--mh-sidebar);color:#fff;transition:transform .15s,background .15s;box-shadow:0 4px 12px rgba(0,0,0,.25);}
.mh-onboard .ob-cam-badge svg{width:15px;height:15px;}
.mh-onboard .ob-av:hover .ob-cam-badge{transform:scale(1.08);background:#B5663F;}
.mh-onboard .ob-who .ob-nm{font-family:var(--ob-font-display);font-size:21px;font-weight:700;color:var(--t-text);}
.mh-onboard .ob-who .ob-rl{font-size:13.5px;color:var(--t-soft);margin-top:3px;}

/* sections */
.mh-onboard .ob-sec-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-sec);font-weight:800;
  margin:28px 0 16px;display:flex;align-items:center;gap:9px;}
.mh-onboard .ob-si{width:26px;height:26px;border-radius:8px;background:var(--t-si-bg);display:grid;place-items:center;flex:0 0 auto;}
.mh-onboard .ob-si svg{width:14px;height:14px;color:var(--t-si-color);}

.mh-onboard .ob-two{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;}
.mh-onboard .ob-f{display:flex;flex-direction:column;min-width:0;}
.mh-onboard .ob-f.ob-full{grid-column:1 / -1;}
.mh-onboard .ob-f label{font-size:12px;font-weight:700;color:var(--t-label);margin-bottom:8px;}

.mh-onboard .ob-inp{display:flex;align-items:center;gap:9px;height:48px;padding:0 14px;border-radius:12px;transition:.15s;
  background:var(--t-input-bg);border:1.5px solid var(--t-input-border);}
.mh-onboard .ob-inp svg{color:var(--t-faint);width:16px;height:16px;flex:0 0 auto;}
/* padding/radius set explicitly so the .mh-app control base never leaks in */
.mh-onboard .ob-inp input{border:none;outline:none;flex:1;font-size:14.5px;font-family:var(--ob-font-ui);color:var(--t-body);background:transparent;min-width:0;padding:0;border-radius:0;height:auto;box-shadow:none;}
.mh-onboard .ob-inp input:focus{background:transparent;box-shadow:none;}
.mh-onboard .ob-inp input::placeholder{color:var(--t-dim);}
.mh-onboard .ob-inp:focus-within{border-color:var(--ob-teal);background:var(--t-input-bg-focus);box-shadow:0 0 0 4px var(--t-ring);}
.mh-onboard .ob-inp.locked{background:var(--t-locked-bg);border-style:dashed;}
.mh-onboard .ob-inp.locked input{color:var(--t-locked-text);}
.mh-onboard .ob-inp.bad{border-color:var(--t-bad);box-shadow:0 0 0 4px rgba(182,91,67,.14);}
.mh-onboard .ob-hint{font-size:11.5px;color:var(--t-faint);margin-top:7px;display:flex;align-items:center;gap:6px;}
.mh-onboard .ob-hint svg{width:13px;height:13px;flex:0 0 auto;}
/* KICKOFF 18: locked Department with no admin-set value -> clear "contact admin"
   state (never a silently stuck gate). Reuses the existing danger token. */
.mh-onboard .ob-inp.locked.ob-locked-warn{border-color:var(--t-bad);}
.mh-onboard .ob-locked-warn svg{color:var(--t-bad);}
.mh-onboard .ob-hint.ob-hint-warn{color:var(--t-bad);font-weight:600;}
.mh-onboard .ob-hint.ob-hint-warn svg{color:var(--t-bad);}

.mh-onboard .ob-f textarea{width:100%;min-height:78px;resize:none;padding:13px 14px;border-radius:12px;
  background:var(--t-input-bg);border:1.5px solid var(--t-input-border);
  font-size:14.5px;font-family:var(--ob-font-ui);color:var(--t-body);line-height:1.55;outline:none;transition:.15s;}
.mh-onboard .ob-f textarea::placeholder{color:var(--t-dim);}
.mh-onboard .ob-f textarea:focus{border-color:var(--ob-teal);background:var(--t-input-bg-focus);box-shadow:0 0 0 4px var(--t-ring);}

/* footer - HIDDEN until the form is scrolled to the end, then it fades up into view
   (the .revealed class is added by the scroll-end watcher in onboard.js) */
.mh-onboard .ob-foot{position:absolute;left:50%;bottom:0;width:100%;max-width:660px;
  display:flex;align-items:center;gap:14px;padding:18px clamp(22px,4vw,38px) 22px;background:var(--t-footer-grad);
  opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none;transition:opacity .35s ease,transform .35s ease;}
.mh-onboard .ob-foot.revealed{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.mh-onboard .ob-foot-note{font-size:12.5px;color:var(--t-faint);display:flex;align-items:center;gap:7px;}
.mh-onboard .ob-foot-note svg{width:15px;height:15px;color:var(--ob-green);flex:0 0 auto;}
.mh-onboard .ob-cta{margin-left:auto;height:52px;padding:0 28px;border-radius:13px;font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,#7D939B 0%,#5E7A83 48%,#46636C 100%);display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 12px 28px rgba(73,102,112,.4), inset 0 1px 0 rgba(255,255,255,.22);transition:.15s;}
.mh-onboard .ob-cta svg{width:18px;height:18px;}
.mh-onboard .ob-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
.mh-onboard .ob-cta:disabled{opacity:.7;cursor:default;transform:none;filter:none;}

/* toast */
.mh-onboard .ob-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:60;
  display:flex;align-items:center;gap:11px;padding:14px 20px;border-radius:14px;opacity:0;pointer-events:none;transition:.3s;
  background:var(--t-toast-bg);border:1px solid var(--t-toast-border);box-shadow:var(--t-toast-shadow);color:var(--t-text);font-size:14px;font-weight:600;}
.mh-onboard .ob-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.mh-onboard .ob-tk{width:26px;height:26px;border-radius:50%;background:var(--ob-green);display:grid;place-items:center;color:#fff;flex:0 0 auto;}
.mh-onboard .ob-tk svg{width:15px;height:15px;}

/* one-time theme hint - SPOTLIGHT coach-mark.
   The scrim dims the whole screen (z-70); the REAL theme toggle is raised above it
   (z-72) so it stays live + bright, and a soft circular glow (::before) haloes it -
   anchored to the toggle itself, so it tracks the toggle exactly. */
.mh-onboard .ob-hint-scrim{position:fixed;inset:0;z-index:70;background:rgba(8,14,17,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
body:not(.dark) .mh-onboard .ob-hint-scrim{background:rgba(33,50,58,.34);}

/* raise the live toggle above the dim + the spotlight circle around it.
   The hero's own z-index:3 stacking context would trap the toggle BELOW the scrim
   (z-70), so during the hint we neutralize it (z-index:auto) - then the toggle's
   z-72 competes at root and sits above the scrim (clickable + bright), while the
   mark/wordmark (no z-index) stay in flow, below the scrim, dimmed. */
.mh-onboard.hint-on .ob-hero{z-index:auto;}
.mh-onboard.hint-on .ob-tg{position:relative;z-index:72;}
.mh-onboard.hint-on .ob-tg::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle, rgba(156,198,207,.30) 0%, rgba(156,198,207,.12) 46%, transparent 70%);
  box-shadow:0 0 0 1.5px rgba(156,198,207,.55), 0 0 34px 8px rgba(156,198,207,.42);
  animation:obspot 2.4s ease-in-out infinite;}
body:not(.dark) .mh-onboard.hint-on .ob-tg::before{
  background:radial-gradient(circle, rgba(94,122,131,.22) 0%, rgba(94,122,131,.10) 46%, transparent 70%);
  box-shadow:0 0 0 1.5px rgba(94,122,131,.5), 0 0 30px 6px rgba(94,122,131,.3);}
@keyframes obspot{0%,100%{box-shadow:0 0 0 1.5px rgba(156,198,207,.5), 0 0 26px 5px rgba(156,198,207,.32);}
  50%{box-shadow:0 0 0 1.5px rgba(156,198,207,.72), 0 0 40px 11px rgba(156,198,207,.5);}}

/* bubble anchored to the toggle wrap, centered directly BELOW the spotlight circle */
.mh-onboard .ob-hint-pop{position:absolute;z-index:73;top:calc(100% + 52px);left:50%;transform:translateX(-50%);width:280px;
  background:var(--t-menu-bg);border:1px solid var(--t-menu-border);border-radius:16px;padding:16px 16px 14px;box-shadow:var(--t-menu-shadow);}
.mh-onboard .ob-hint-arrow{position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;
  background:var(--t-menu-bg);border-left:1px solid var(--t-menu-border);border-top:1px solid var(--t-menu-border);}
.mh-onboard .ob-hint-pop p{font-size:13.5px;line-height:1.5;color:var(--t-body);margin-bottom:12px;}
.mh-onboard .ob-hint-ok{height:36px;padding:0 20px;border-radius:10px;font-weight:700;font-size:13.5px;color:#fff;
  background:linear-gradient(135deg,#7D939B,#5E7A83 60%,#46636C);box-shadow:0 6px 14px rgba(73,102,112,.32);}
.mh-onboard .ob-hint-ok:hover{filter:brightness(1.06);}

/* ============================================================
   Date fields - skin the SHARED MhDatePicker trigger (.dp-field) to match the
   onboard text inputs (.ob-inp) EXACTLY: h48, pad 0 14, radius 12, faint calendar
   icon left, NO chevron, same teal focus ring. The picker popover + behavior are
   untouched (one-source); only the closed trigger is re-skinned.
   ============================================================ */
.mh-onboard .ob-dp .dp-field{height:48px;padding:0 14px;border-radius:12px;gap:9px;
  background:var(--t-input-bg);border:1.5px solid var(--t-input-border);transition:.15s;}
.mh-onboard .ob-dp .dpf-ico{width:16px;height:16px;color:var(--t-faint);}
.mh-onboard .ob-dp .dpf-val{font-size:14.5px;font-weight:500;color:var(--t-body);}
.mh-onboard .ob-dp .dpf-val.empty{color:var(--t-dim);font-weight:500;}
.mh-onboard .ob-dp .dpf-chev{display:none;}
.mh-onboard .ob-dp .dp-field:hover{border-color:var(--ob-teal);}
.mh-onboard .ob-dp.open .dp-field{border-color:var(--ob-teal);background:var(--t-input-bg-focus);box-shadow:0 0 0 4px var(--t-ring);}

/* ============================================================
   MhSelect  -  shared on-brand dropdown (themed via the same tokens).
   ============================================================ */
.mh-onboard .mhsel{position:relative;}
.mhsel-backdrop{position:fixed;inset:0;z-index:29;}
.mh-onboard .mhsel-btn{width:100%;display:flex;align-items:center;gap:9px;height:48px;padding:0 14px;border-radius:12px;cursor:pointer;transition:.15s;
  background:var(--t-input-bg);border:1.5px solid var(--t-input-border);font-family:var(--ob-font-ui);}
.mh-onboard .mhsel-ic{display:inline-flex;color:var(--t-faint);}
.mh-onboard .mhsel-ic svg{width:16px;height:16px;}
.mh-onboard .mhsel-val{flex:1;text-align:left;font-size:14.5px;color:var(--t-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mh-onboard .mhsel-val.ph{color:var(--t-dim);}
.mh-onboard .mhsel-chev{margin-left:auto;color:var(--t-faint);transition:transform .2s cubic-bezier(.2,.7,.25,1);display:inline-flex;align-items:center;justify-content:center;}
.mh-onboard .mhsel-chev svg{width:14px;height:14px;display:block;}
.mh-onboard .mhsel.open .mhsel-btn{border-color:var(--ob-teal);background:var(--t-input-bg-focus);box-shadow:0 0 0 4px var(--t-ring);}
.mh-onboard .mhsel.open .mhsel-chev{transform:rotate(180deg);}
.mh-onboard .mhsel.bad .mhsel-btn{border-color:var(--t-bad);box-shadow:0 0 0 4px rgba(182,91,67,.14);}
.mh-onboard .mhsel-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;padding:6px;border-radius:14px;
  background:var(--t-menu-bg);border:1px solid var(--t-menu-border);box-shadow:var(--t-menu-shadow);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .16s,transform .16s;
  max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--t-scroll) transparent;}
.mh-onboard .mhsel.open .mhsel-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.mh-onboard .mhsel-menu::-webkit-scrollbar{width:7px;}
.mh-onboard .mhsel-menu::-webkit-scrollbar-thumb{background:var(--t-scroll);border-radius:8px;}
.mh-onboard .mhsel-opt{width:100%;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:9px;cursor:pointer;
  background:none;border:none;font-family:var(--ob-font-ui);font-size:14.5px;font-weight:500;color:var(--t-opt-text);transition:.12s;text-align:left;}
.mh-onboard .mhsel-opt span:first-child{flex:1;}
.mh-onboard .mhsel-tick{color:var(--t-si-color);display:inline-flex;}
.mh-onboard .mhsel-tick svg{width:16px;height:16px;}
.mh-onboard .mhsel-opt:hover{background:var(--t-opt-hover-bg);color:var(--t-opt-hover-text);}
.mh-onboard .mhsel-opt.on{background:var(--t-opt-on-bg);color:var(--t-opt-on-text);font-weight:700;}
/* POST-TRAINING PHASE 1: type-to-filter box inside the searchable MhSelect (time zone picker). */
.mh-onboard .mhsel-search{width:100%;height:38px;margin-bottom:6px;padding:0 12px;border-radius:9px;
  background:var(--t-opt-hover-bg);border:1px solid var(--t-menu-border);
  font-family:var(--ob-font-ui);font-size:14px;color:var(--t-opt-text);outline:none;}
.mh-onboard .mhsel-search::placeholder{color:var(--t-opt-text);opacity:.55;}

@media (max-width:560px){
  .mh-onboard .ob-two{grid-template-columns:1fr;}
  .mh-onboard .ob-lead{padding-top:22px;}
}