/* seamlock-search.css - search help "?" button, "How to search" window, and the
   [seamlock_search] box. Self-contained (own colors) so it works in a theme
   header as well as inside the plugin's .sl-app pages. Loaded on every page. */
.sl-help-btn,.sl-help-dialog,.sl-searchbox{
  --slh-text:#111318; --slh-muted:#5a6372; --slh-border:#d8dde5; --slh-panel:#ffffff; --slh-panel2:#f3f5f8;
  --slh-link:#0a66c2; --slh-accent:#c07a00;
}

/* "?" button */
.sl-help-btn{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 auto;
  width:18px;height:18px;min-width:0;min-height:0;margin:0 0 0 6px;padding:0 !important;
  border:1px solid var(--slh-border);border-radius:50% !important;background:var(--slh-panel2) !important;color:var(--slh-muted) !important;
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;vertical-align:middle}
.sl-help-btn:hover,.sl-help-btn:focus-visible{color:var(--slh-link) !important;border-color:var(--slh-link);outline:none}

/* Window */
.sl-help-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;margin:auto;
  border:1px solid var(--slh-border);border-radius:12px;background:var(--slh-panel);color:var(--slh-text);
  box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:auto;text-align:left;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.sl-help-dialog::backdrop{background:rgba(17,19,24,.45)}
.sl-help-dialog:not([open]){display:none}
.sl-help-dialog .sl-help-inner{padding:18px 22px 16px}
.sl-help-dialog .sl-help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.sl-help-dialog h2{margin:0;padding:0;font-size:18px;line-height:1.3;font-weight:700;color:var(--slh-text);text-transform:none;letter-spacing:normal}
.sl-help-dialog h3{margin:16px 0 4px;padding:0;font-size:14px;line-height:1.4;font-weight:700;color:var(--slh-text);text-transform:none;letter-spacing:normal}
.sl-help-dialog p{margin:4px 0;padding:0;font-size:14px;color:var(--slh-text)}
.sl-help-dialog button{font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;min-width:0;width:auto}
.sl-help-dialog .sl-help-x{border:none;background:transparent;font-size:24px;line-height:1;color:var(--slh-muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.sl-help-dialog .sl-help-x:hover{background:var(--slh-panel2);color:var(--slh-text)}
.sl-help-dialog .sl-help-try{display:inline-block;margin:2px 2px 2px 0;padding:2px 8px;border:1px solid var(--slh-border);border-radius:6px;
  background:var(--slh-panel2);color:var(--slh-link);font:12px/1.6 Menlo,Consolas,monospace;cursor:pointer}
.sl-help-dialog .sl-help-try:hover{border-color:var(--slh-link)}
.sl-help-dialog .sl-help-table{width:100%;border:none;border-collapse:collapse;margin:8px 0}
.sl-help-dialog .sl-help-table th{width:48px;text-align:left;vertical-align:top;padding:6px 8px 6px 0;font-size:13px;font-weight:700;border:none}
.sl-help-dialog .sl-help-table td{padding:6px 0;border:none;border-top:1px solid var(--slh-border);vertical-align:top}
.sl-help-dialog .sl-help-table tr:first-child td{border-top:none}
/* Beat the striped-table rules of .sl-app pages and themes. */
.sl-app .sl-help-dialog .sl-help-table tbody tr:nth-child(n) td,.sl-app .sl-help-dialog .sl-help-table tbody tr:nth-child(n) th,
.sl-help-dialog .sl-help-table tbody tr:nth-child(n) td,.sl-help-dialog .sl-help-table tbody tr:nth-child(n) th,
.sl-help-dialog .sl-help-table tbody tr:hover td{background:transparent !important;color:var(--slh-text)}
.sl-help-dialog .sl-help-small{font-size:12px;color:var(--slh-muted);margin-top:2px}
.sl-help-dialog .sl-help-foot{display:flex;justify-content:flex-end;margin-top:14px}
.sl-help-dialog .sl-help-close{padding:6px 14px;border:1px solid var(--slh-border);border-radius:8px;background:var(--slh-panel2);color:var(--slh-text);font-size:14px;cursor:pointer}
.sl-help-dialog .sl-help-close:hover{border-color:#8e98a8;background:#eef1f5}

/* [seamlock_search] box */
.sl-searchbox{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;max-width:100%;margin:0;
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--slh-text)}
.sl-searchbox .sl-sb-label{display:inline-flex;align-items:center;white-space:nowrap;font-weight:600;font-size:13px;margin:0;color:inherit}
.sl-searchbox .sl-sb-input{flex:1 1 auto;min-width:0;width:100%;height:36px;margin:0;padding:6px 10px;box-sizing:border-box;
  border:1px solid var(--slh-border);border-radius:8px;background:#fff;color:var(--slh-text);font:inherit;font-size:14px;box-shadow:none}
.sl-searchbox .sl-sb-input:focus{outline:none;border-color:var(--slh-link);box-shadow:0 0 0 2px rgba(10,102,194,.15)}
.sl-searchbox .sl-sb-go{flex:0 0 auto;height:36px;margin:0;padding:0 14px;box-sizing:border-box;border:1px solid var(--slh-accent);border-radius:8px;
  background:var(--slh-accent);color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
  text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;width:auto}
.sl-searchbox .sl-sb-go:hover{filter:brightness(1.05)}
.sl-searchbox .sl-help-btn{margin:0 2px 0 0}
.sl-searchbox .sl-sb-label + .sl-help-btn{margin-left:-2px}
.sl-searchbox.sl-sb-compact .sl-sb-input,.sl-searchbox.sl-sb-compact .sl-sb-go{height:32px;font-size:13px}
.sl-sb-notice{padding:8px 12px;border:1px dashed #b71c1c;border-radius:6px;color:#b71c1c;font-size:13px;background:#fff}
