/* SpineLegal in-product help panel. All selectors are prefixed .sl-help* to avoid colliding
   with the host application's styles. Include once, e.g. in index.html / _Host.cshtml:
   <link rel="stylesheet" href="_content/SpineLegal.Help/help-panel.css" />
   (path assumes this ships as an RCL; adjust if you drop the files in-project.) */

.sl-help, .sl-help * { box-sizing: border-box; }

.sl-help {
  --sl-ink:#0a0e14; --sl-ink2:#151b24; --sl-blue-deep:#0858a8; --sl-blue:#1470c0; --sl-blue-br:#2888d8;
  --sl-sky:#dbeaf7; --sl-mist:#eef4fb; --sl-paper:#f6f9fc; --sl-line:rgba(10,14,20,0.10); --sl-line2:rgba(10,14,20,0.18);
  --sl-txt:#1c2430; --sl-txt2:#586274; --sl-txt3:#9aa4b4; --sl-green:#1a7f4b; --sl-green-soft:#e4f3ec;
  --sl-amber:#c47f1a; --sl-amber-soft:#fdf4e3; --sl-fin:linear-gradient(120deg,#0858a8,#2888d8);
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:94vw; background:#fff;
  box-shadow:-14px 0 44px rgba(10,14,20,0.18); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; z-index:1200;
  font-family:'Inter',system-ui,sans-serif; color:var(--sl-txt); -webkit-font-smoothing:antialiased;
}
.sl-help.open { transform:translateX(0); }

.sl-help-dim { position:fixed; inset:0; background:rgba(10,14,20,0.28); opacity:0; pointer-events:none; transition:.25s; z-index:1190; }
.sl-help-dim.on { opacity:1; pointer-events:auto; }

.sl-help-head { padding:15px 18px; border-bottom:0.5px solid var(--sl-line); display:flex; align-items:center; gap:11px; }
.sl-help-di { width:32px; height:32px; border-radius:9px; background:var(--sl-fin); display:flex; align-items:center; justify-content:center; }
.sl-help-di i { font-size:18px; color:#fff; }
.sl-help-head h2 { font-size:14px; margin:0; }
.sl-help-head p { font-size:10.5px; color:var(--sl-txt2); margin:1px 0 0; }
.sl-help-x { margin-left:auto; width:30px; height:30px; border-radius:8px; border:0.5px solid var(--sl-line); background:#fff; color:var(--sl-txt3); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sl-help-x i { font-size:17px; }

.sl-help-ctx { margin:12px 16px 0; background:var(--sl-paper); border:0.5px solid var(--sl-line); border-radius:9px; padding:9px 12px; font-size:11px; color:var(--sl-txt2); display:flex; align-items:center; gap:8px; }
.sl-help-ctx i { font-size:14px; color:var(--sl-blue); } .sl-help-ctx b { color:var(--sl-ink); }

.sl-help-body { flex:1; overflow-y:auto; padding:14px 16px; }

.sl-help-ask { border:0.5px solid var(--sl-line2); border-radius:12px; padding:4px 4px 4px 14px; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sl-help-ask:focus-within { border-color:var(--sl-blue); box-shadow:0 0 0 3px rgba(20,112,192,0.1); }
.sl-help-ask i.q { font-size:17px; color:var(--sl-blue); }
.sl-help-ask input { flex:1; border:none; outline:none; font-size:13px; font-family:inherit; padding:9px 0; background:transparent; color:var(--sl-txt); }
.sl-help-ask button { width:34px; height:34px; border-radius:9px; border:none; background:var(--sl-ink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sl-help-ask button i { font-size:16px; }
.sl-help-askhint { font-size:10.5px; color:var(--sl-txt3); margin:0 0 8px 4px; }

.sl-help-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:var(--sl-txt3); margin:16px 4px 9px; }

.sl-help-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--sl-blue); background:var(--sl-mist); border:0.5px solid rgba(20,112,192,0.2); border-radius:20px; padding:6px 12px; margin:0 6px 6px 0; cursor:pointer; }
.sl-help-chip:hover { background:var(--sl-sky); } .sl-help-chip i { font-size:13px; }

.sl-help-search { position:relative; margin-bottom:10px; }
.sl-help-search i { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--sl-txt3); }
.sl-help-search input { width:100%; height:36px; border:0.5px solid var(--sl-line2); border-radius:9px; padding:0 12px 0 34px; font-size:12.5px; font-family:inherit; background:#fff; }
.sl-help-search input:focus { outline:none; border-color:var(--sl-blue); box-shadow:0 0 0 3px rgba(20,112,192,0.1); }

.sl-help-jrow { display:flex; align-items:center; gap:12px; padding:12px; border:0.5px solid var(--sl-line); border-radius:11px; margin-bottom:8px; cursor:pointer; transition:.12s; }
.sl-help-jrow:hover { border-color:var(--sl-blue-br); box-shadow:0 2px 10px rgba(20,112,192,0.07); }
.sl-help-jrow.slim { padding:10px 12px; }
.sl-help-jrow .ji { width:34px; height:34px; border-radius:9px; background:var(--sl-paper); border:0.5px solid var(--sl-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sl-help-jrow .ji i { font-size:17px; color:var(--sl-blue); }
.sl-help-jrow .jt { flex:1; min-width:0; }
.sl-help-jrow .jn { font-size:12.5px; font-weight:600; }
.sl-help-jrow .jd { font-size:10.5px; color:var(--sl-txt3); margin-top:1px; }
.sl-help-jrow .jc { color:var(--sl-txt3); font-size:16px; }

.sl-help-back { font-size:15.5px; font-weight:600; color:var(--sl-blue); cursor:pointer; display:flex; align-items:center; gap:5px; margin-bottom:14px; }
.sl-help-back:hover { color:var(--sl-blue-deep); }

.sl-help-ansq { display:flex; justify-content:flex-end; margin-bottom:14px; }
.sl-help-ansq .bub { background:var(--sl-ink); color:#fff; border-radius:13px 13px 3px 13px; padding:9px 13px; font-size:12.5px; max-width:80%; }
.sl-help-ansa { display:flex; gap:9px; margin-bottom:12px; }
.sl-help-ansa .av { width:26px; height:26px; border-radius:8px; background:var(--sl-fin); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sl-help-ansa .av i { font-size:15px; color:#fff; }
.sl-help-ansa .bub { background:var(--sl-paper); border:0.5px solid var(--sl-line); border-radius:13px 13px 13px 3px; padding:12px 14px; font-size:12.5px; line-height:1.6; }
.sl-help-ansa .muted { color:var(--sl-txt3); }

.sl-help-cite { margin-top:11px; padding-top:10px; border-top:0.5px solid var(--sl-line); font-size:10.5px; color:var(--sl-txt2); }
.sl-help-cite .src { display:inline-flex; align-items:center; gap:5px; color:var(--sl-blue); background:#fff; border:0.5px solid rgba(20,112,192,0.3); border-radius:6px; padding:3px 8px; margin:5px 5px 0 0; cursor:pointer; }
.sl-help-cite .src i { font-size:12px; }

.sl-help-verify { margin-top:10px; background:var(--sl-amber-soft); border-radius:8px; padding:8px 11px; font-size:10.5px; color:#7a5210; display:flex; gap:7px; line-height:1.5; }
.sl-help-verify i { font-size:13px; flex-shrink:0; margin-top:1px; }

.sl-help-art h1 { font-size:16px; margin:0 0 4px; }
.sl-help-art .sum { font-size:11.5px; color:var(--sl-txt2); margin-bottom:14px; line-height:1.5; }
.sl-help-art h3 { font-size:12px; font-weight:700; color:var(--sl-blue-deep); margin:16px 0 7px; text-transform:uppercase; letter-spacing:0.4px; }
.sl-help-art ol, .sl-help-art ul { padding-left:18px; margin:0 0 10px; }
.sl-help-art li { font-size:12px; line-height:1.6; margin-bottom:8px; }
.sl-help-art li b, .sl-help-art p b { color:var(--sl-ink); }
.sl-help-art p { font-size:12px; line-height:1.6; margin:0 0 10px; }

.sl-help-callout { border-left:3px solid var(--sl-amber); background:var(--sl-amber-soft); border-radius:0 8px 8px 0; padding:9px 12px; font-size:11px; color:#7a5210; margin:10px 0; line-height:1.5; }
.sl-help-callout.tip { border-color:var(--sl-green); background:var(--sl-green-soft); color:#155e38; }
.sl-help-callout.ai { border-color:var(--sl-blue); background:var(--sl-mist); color:var(--sl-blue-deep); }

.sl-help-shot { background:var(--sl-paper); border:1px dashed var(--sl-line2); border-radius:9px; padding:16px; text-align:center; font-size:10.5px; color:var(--sl-txt3); margin:10px 0; }
.sl-help-shot i { font-size:20px; display:block; margin-bottom:5px; color:var(--sl-line2); }

.sl-help-foot { padding:11px 16px; border-top:0.5px solid var(--sl-line); display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--sl-txt3); }
.sl-help-foot i { font-size:14px; }

/* Optional reusable Help button you can drop on any screen's toolbar. */
.sl-help-trigger { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#1470c0; background:#eef4fb; border:0.5px solid rgba(20,112,192,0.25); border-radius:9px; padding:8px 13px; cursor:pointer; font-weight:600; font-family:'Inter',system-ui,sans-serif; }
.sl-help-trigger i { font-size:16px; }