/* Guided help: spotlight tour + per-section "?" markers. Dependency-free;
   spotlight uses the box-shadow cutout trick. Palette from base_styles. */
.help-marker { width:16px; height:16px; min-width:16px; flex:0 0 auto; padding:0; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--dim); font:600 10px/1 "JetBrains Mono", monospace; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:none; letter-spacing:0; text-transform:none; }
.help-marker:hover { border-color:var(--red); color:var(--red); transform:none; box-shadow:none; filter:none; }
#portalHelpButton { color:#c9c2bd; }
/* Non-blocking: the dark scrim comes from the ring's box-shadow, so the
   spotlighted control (and any overlay it opens) stays interactive. */
#help-dim { position:fixed; inset:0; z-index:59; display:none; pointer-events:none; }
#help-ring { position:absolute; z-index:60; border:2px solid var(--red); border-radius:var(--radius); box-shadow:0 0 0 100vmax rgba(14,11,12,.55), 0 0 0 4px rgba(207,21,66,.18); pointer-events:none; display:none; transition:top .18s ease, left .18s ease, width .18s ease, height .18s ease; }
#help-callout { position:absolute; z-index:61; width:300px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px 12px; box-shadow:0 10px 40px rgba(14,11,12,.25); display:none; }
#help-callout .step-num { font-family:"JetBrains Mono", monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
#help-callout h3 { margin:6px 0 6px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
#help-callout p { margin:0; font-size:13px; line-height:1.55; color:var(--body); }
#help-callout .help-callout-hint { margin:10px 0 0; font-size:11.5px; line-height:1.45; color:var(--amber); }
#help-callout button.nav[disabled] { opacity:.45; cursor:not-allowed; }
#help-callout .help-callout-row { display:flex; align-items:center; margin-top:14px; gap:8px; }
#help-callout .skip { margin-right:auto; background:none; border:none; color:var(--dim); font:inherit; font-size:11px; text-decoration:underline; cursor:pointer; padding:0; box-shadow:none; letter-spacing:0; text-transform:none; }
#help-callout button.nav { border:1px solid var(--line-strong); background:var(--surface); color:var(--body); border-radius:var(--radius-sm); padding:6px 12px; font:inherit; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; cursor:pointer; box-shadow:none; transition:background 100ms ease; }
#help-callout button.nav:not([disabled]):hover { background:var(--surface-2); }
#help-callout button.nav.primary { background:var(--red); border-color:var(--red); color:#fff; }
#help-callout button.nav.primary:not([disabled]):hover { background:var(--red-dark); }
.help-marker-pop { position:absolute; z-index:61; width:260px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:0 10px 40px rgba(14,11,12,.25); font-size:13px; line-height:1.55; color:var(--body); }
.help-marker-pop h3 { margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink); }
/* Step 0 intro: centered welcome card over a full backdrop (no anchor). */
#help-backdrop { position:fixed; inset:0; z-index:58; background:rgba(14,11,12,.55); display:none; }
#help-intro { position:fixed; inset:0; z-index:61; display:none; align-items:center; justify-content:center; padding:24px; }
#help-intro .help-intro-card { width:560px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 40px rgba(14,11,12,.25); padding:26px 28px 22px; }
#help-intro .help-intro-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono", monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
#help-intro .help-intro-eyebrow .mark { width:8px; height:8px; background:var(--red); }
#help-intro h2 { margin:12px 0 8px; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
#help-intro .help-intro-lead { margin:0; font-size:13px; line-height:1.55; color:var(--body); }
#help-intro .help-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; margin:22px 0 8px; }
#help-intro .help-flow-step { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); padding:14px 12px; text-align:center; transition:border-color .15s ease; }
#help-intro .help-flow-step:hover { border-color:var(--red); }
#help-intro .help-flow-step .badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:var(--red); color:#fff; font:600 11px/1 "JetBrains Mono", monospace; }
#help-intro .help-flow-step h4 { margin:9px 0 5px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
#help-intro .help-flow-step p { margin:0; font-size:11.5px; line-height:1.45; color:var(--dim); }
#help-intro .help-flow-arrow { display:flex; align-items:center; justify-content:center; padding:0 8px; color:var(--line-strong); font-family:"JetBrains Mono", monospace; font-size:18px; }
#help-intro .help-intro-progress { margin-top:14px; font-family:"JetBrains Mono", monospace; font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--dim); }
#help-intro .help-intro-row { display:flex; align-items:center; margin-top:18px; gap:10px; }
#help-intro .help-intro-row .skip { margin-right:auto; background:none; border:none; color:var(--dim); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; padding:0; box-shadow:none; letter-spacing:0; text-transform:none; }
#help-intro .help-intro-row .nav { border:1px solid var(--red); background:var(--red); color:#fff; border-radius:var(--radius-sm); padding:9px 18px; font:inherit; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; cursor:pointer; box-shadow:none; transition:background 100ms ease; }
#help-intro .help-intro-row .nav:hover { background:var(--red-dark); }