/* Help mode skeleton (XA-4e9b6a2bc5). Tokens come from theme-beta.css with literal fallbacks. */
/* XA-93196e248f: room the floating Help button needs; the staff footer and the realtor page bottom both clear it by this much. Defined here once; both layouts load this file. */
:root{--bb-help-clear:84px}
#bb-help-bar{position:fixed;top:0;left:0;right:0;z-index:10050;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 12px;background:var(--r-ink,#0B1330);color:#fff;font-size:14px;font-family:inherit}
#bb-help-bar .bb-help-bar-text{flex:1 1 auto}
#bb-help-bar button{min-height:36px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font-weight:600;font-size:14px;
  background:var(--r-accent,#E9B11C);color:var(--r-ink,#0B1330)}
body.bb-help-on [data-help]{outline:2px dashed var(--r-accent,#E9B11C);outline-offset:2px;cursor:help}
body.bb-help-on [data-help].bb-help-selected{outline:2px solid var(--r-accent,#E9B11C);box-shadow:0 0 0 5px var(--r-accent-soft,#FDF3CF)}
#bb-help-explain{position:fixed;z-index:10060;background:#fff;color:var(--r-fg-2,#3E4664);font-family:inherit}
#bb-help-explain .bb-help-title{font-size:17px;font-weight:600;color:var(--r-ink,#0B1330);margin:0 0 6px}
#bb-help-explain .bb-help-text{font-size:15px;line-height:1.45;margin:0;color:var(--r-fg-2,#3E4664)}
#bb-help-explain .bb-help-grab{display:none}
#bb-help-explain.bb-help-sheet{left:0;right:0;bottom:0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(11,19,48,.25)}
#bb-help-explain.bb-help-sheet .bb-help-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--r-border,#E5E7EE);margin:0 auto 12px}
#bb-help-explain.bb-help-sheet .bb-help-gotit{display:block;width:100%;min-height:44px;margin-top:14px;border:0;border-radius:10px;
  background:var(--r-ink,#0B1330);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
#bb-help-explain.bb-help-bubble{width:280px;padding:14px 16px;border:1px solid var(--r-border,#E5E7EE);border-radius:12px;
  box-shadow:0 10px 30px rgba(11,19,48,.18)}
#bb-help-explain.bb-help-bubble .bb-help-gotit{margin-top:10px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--r-blue,#1E6FEA);font-size:14px;font-weight:600}
#bb-help-explain.bb-help-bubble::before{content:"";position:absolute;top:-7px;left:var(--bb-help-arrow,24px);width:12px;height:12px;
  background:#fff;border-left:1px solid var(--r-border,#E5E7EE);border-top:1px solid var(--r-border,#E5E7EE);transform:rotate(45deg)}
#bb-help-explain.bb-help-bubble.bb-help-above::before{top:auto;bottom:-7px;transform:rotate(225deg)}

.bb-help-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.bb-help-video iframe,.bb-help-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.bb-help-video-inline{margin-top:12px}
.bb-help-watch{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:0 14px;min-height:36px;border:1px solid var(--r-accent,#E9B11C);
  border-radius:999px;background:var(--r-accent-soft,#FDF3CF);color:var(--r-ink,#0B1330);font-size:14px;font-weight:600;cursor:pointer}
#bb-help-explain.bb-help-sheet .bb-help-watch{display:flex;width:100%;justify-content:center;min-height:44px}
#bb-help-vo{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:16px}
.bb-help-vo-back{position:absolute;inset:0;background:rgba(11,19,48,.72)}
.bb-help-vo-card{position:relative;width:min(900px,100%);padding-top:44px}
.bb-help-vo-x{position:absolute;top:0;right:0;width:40px;height:40px;border:0;border-radius:999px;background:var(--r-accent,#E9B11C);
  color:var(--r-ink,#0B1330);font-size:24px;line-height:1;cursor:pointer}

/* XA-2da0045817: at phone width the floating help trigger (staff ? and realtor Help pill) hides while a field has focus, so it never
   sits over the input being typed in or under the keyboard; it returns on blur. :has() where supported, and a body class set by
   help-mode.js (focusin/focusout) as the fallback. Separate rules on purpose: one unsupported :has() would drop a whole list. */
@media (max-width:600px){
body:has(input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=range],[type=file],[type=color],[type=image]):focus,select:focus,textarea:focus) #bb-help-widget{display:none!important}
body:has(input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=range],[type=file],[type=color],[type=image]):focus,select:focus,textarea:focus) #bb-help-launch{display:none!important}
body.bb-help-typing #bb-help-widget{display:none!important}
body.bb-help-typing #bb-help-launch{display:none!important}
}