/* Staff Portal super search (SiteMaster top bar, #sxSearch) - Darren 2026-10-31, companies + favourites 2026-11-06. Colours come from the portal's own
   tokens (--sx-* in SiteMaster, which follow Css/themes.css and the operator's theme), with the Enigma values as
   fallbacks. Behaviour: js/super-search.js. */
.ss [hidden] { display: none !important; }
.ss { position: relative; flex: 0 1 600px; min-width: 0; margin-left: 4px; }
.ss-box { display: flex; align-items: center; height: 38px; border: 1px solid var(--sx-border, #e5e7eb); border-radius: 10px;
          background: var(--sx-bg-soft, #f4f5f1); transition: border-color .12s, box-shadow .12s, background .12s; }
.ss.ss-open .ss-box, .ss-box:focus-within { background: var(--sx-bg, #fff); border-color: var(--sx-olive, #4B6F0A);
          box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-olive, #4B6F0A) 16%, transparent); }
.ss-scope { position: relative; height: 100%; display: flex; align-items: center; flex: none; }
.ss-scope-btn { height: 28px; margin-left: 5px; border: 0; border-radius: 7px; cursor: pointer; white-space: nowrap;
          background: var(--sx-olive-tint2, rgba(75,111,10,.12)); color: var(--sx-olive, #4B6F0A); font-family: inherit;
          font-weight: 600; font-size: 12px; line-height: 1; padding: 0 7px 0 9px; display: flex; align-items: center; gap: 4px; }
.ss-scope-btn .bi { font-size: 10px; }
.ss-ico { color: var(--sx-text-hint, #94a3b8); margin: 0 4px 0 9px; font-size: 14px; flex: none; }
.ss-in { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 13.5px;
         padding: 0 6px; color: var(--sx-text, #0f172a); font-family: inherit; }
.ss-in::placeholder { color: var(--sx-text-hint, #94a3b8); }
.ss-clear { display: none; border: 0; background: none; color: var(--sx-text-hint, #94a3b8); cursor: pointer; padding: 4px 6px; font-size: 12px; }
.ss.ss-typed .ss-clear { display: block; }
.ss-spin { width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; flex: none;
           border: 2px solid var(--sx-border, #e5e7eb); border-top-color: var(--sx-olive, #4B6F0A); animation: ss-spin .7s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-help { flex: none; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; border: 1px solid var(--sx-border, #e5e7eb);
           background: var(--sx-bg, #fff); color: var(--sx-text-hint, #64748b); display: grid; place-items: center; cursor: help; padding: 0; font-size: 14px; }
.ss-help:hover, .ss-help[aria-expanded="true"] { color: var(--sx-olive, #4B6F0A); border-color: var(--sx-olive, #4B6F0A); background: var(--sx-olive-tint2, rgba(75,111,10,.12)); }
.ss-kbd, .ss-foot kbd { font: 600 10.5px/1 ui-monospace, Consolas, monospace; color: var(--sx-text-hint, #64748b); border: 1px solid var(--sx-border, #e5e7eb);
           border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: var(--sx-bg, #fff); white-space: nowrap; }
.ss-box > .ss-kbd { margin-right: 8px; flex: none; }
.ss.ss-typed .ss-box > .ss-kbd { display: none; }

.ss-scope-menu, .ss-tips, .ss-panel { background: var(--sx-bg, #fff); border: 1px solid var(--sx-border, #e5e7eb);
           box-shadow: 0 16px 44px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06); }
.ss-scope-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 248px; border-radius: 12px; padding: 5px; z-index: 1102; }
.ss-scope-menu button { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 7px 9px; border-radius: 8px;
           cursor: pointer; text-align: left; color: var(--sx-text-soft, #334155); font-size: 12.5px; font-family: inherit; }
.ss-scope-menu button:hover, .ss-scope-menu button.sel { background: var(--sx-olive-tint2, rgba(75,111,10,.12)); color: var(--sx-olive, #4B6F0A); }
.ss-scope-menu small { margin-left: auto; color: var(--sx-text-hint, #94a3b8); font-size: 11px; }
.ss-tips { position: absolute; top: calc(100% + 8px); right: 0; width: min(400px, calc(100vw - 24px)); border-radius: 12px; padding: 13px 14px 11px; z-index: 1103; }
.ss-tips h4 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--sx-text, #0f172a); }
.ss-tips p { margin: 0 0 9px; font-size: 11.5px; color: var(--sx-text-hint, #64748b); }
.ss-tips-keys { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--sx-border-soft, #eef0ea);
           font-size: 11px; color: var(--sx-text-hint, #64748b); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip { border: 1px solid var(--sx-border, #e5e7eb); background: var(--sx-bg, #fff); color: var(--sx-text-soft, #334155); border-radius: 20px;
           padding: 3px 10px; font-size: 12px; cursor: pointer; text-decoration: none !important; font-family: inherit; }
.ss-chip:hover { border-color: var(--sx-olive, #4B6F0A); color: var(--sx-olive, #4B6F0A); }
.ss-chip code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: inherit; background: none; padding: 0; }

.ss-panel { position: absolute; top: calc(100% + 7px); left: 0; right: 0; min-width: min(620px, calc(100vw - 24px)); border-radius: 13px; z-index: 1101; overflow: hidden; }
.ss-body { max-height: min(66vh, 560px); overflow-y: auto; padding: 5px 5px 7px; }
.ss-sec { font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--sx-text-hint, #64748b); padding: 11px 10px 4px; display: flex; justify-content: space-between; }
.ss-sec span { font-weight: 500; letter-spacing: 0; color: var(--sx-text-hint, #94a3b8); }
.ss-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: inherit; text-decoration: none !important; }
.ss-row.ss-act { background: var(--sx-olive-tint2, rgba(75,111,10,.12)); }
.ss-tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 15px; }
.ss-t-fn { background: var(--sx-olive-tint2, rgba(75,111,10,.12)); color: var(--sx-olive, #4B6F0A); }
.ss-t-bk { background: #eff6ff; color: #1d4ed8; }
.ss-t-gu { background: #fffbeb; color: #b45309; }
.ss-t-un { background: #ecfdf5; color: #047857; }
.ss-t-iv { background: var(--sx-bg-soft, #f1f5f9); color: var(--sx-text-soft, #334155); }
.ss-t-hp { background: #fef2f2; color: #b91c1c; }
.ss-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ss-ttl { font-weight: 600; font-size: 13px; color: var(--sx-text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-ttl mark, .ss-meta mark { background: none; color: var(--sx-olive, #4B6F0A); font-weight: 700; padding: 0;
           text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.ss-meta { font-size: 11.5px; color: var(--sx-text-hint, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-path { color: var(--sx-text-soft, #334155); }
.ss-num { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.ss-pill { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex: none; }
.ss-p-up { background: #eff6ff; color: #1d4ed8; } .ss-p-in { background: #ecfdf5; color: #047857; }
.ss-p-out { background: var(--sx-bg-soft, #f1f5f9); color: var(--sx-text-hint, #64748b); } .ss-p-x { background: #fef2f2; color: #b91c1c; }
.ss-p-co { background: #fffbeb; color: #b45309; }
.ss-go { color: var(--sx-text-hint, #94a3b8); font: 600 10.5px ui-monospace, Consolas, monospace; flex: none; visibility: hidden; }
.ss-row.ss-act .ss-go { visibility: visible; color: var(--sx-olive, #4B6F0A); }
.ss-wait, .ss-note { display: flex; align-items: center; gap: 9px; margin: 6px 10px 4px; font-size: 12px; color: var(--sx-text-hint, #64748b); }
.ss-note { background: #fffbeb; color: #92400e; padding: 8px 11px; border-radius: 9px; }
.ss-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-olive, #4B6F0A); animation: ss-pulse 1s ease-in-out infinite; }
@keyframes ss-pulse { 50% { opacity: .25; } }
.ss-empty { padding: 22px 16px 10px; text-align: center; color: var(--sx-text-hint, #64748b); font-size: 12.5px; }
.ss-empty b { color: var(--sx-text, #0f172a); }
.ss-empty > b:first-child { display: block; font-size: 13.5px; margin-bottom: 3px; }
.ss-body > .ss-chips { justify-content: center; padding: 4px 10px 12px; }
.ss-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 13px; border-top: 1px solid var(--sx-border, #e5e7eb); padding: 8px 13px;
           font-size: 11px; color: var(--sx-text-hint, #64748b); background: var(--sx-bg-soft, #f8fafc); }
.ss-foot kbd { margin-right: 3px; }
/* 2026-11-06 - which companies (a login with more than one): on top of the results, all companies by default. */
.ss-cos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 7px; border-bottom: 1px solid var(--sx-border-soft, #eef0ea);
           background: var(--sx-bg-soft, #f8fafc); }
.ss-cos-l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sx-text-hint, #64748b); margin-right: 2px; }
.ss-cos button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px; border-radius: 20px; cursor: pointer;
           border: 1px solid var(--sx-border, #e5e7eb); background: var(--sx-bg, #fff); color: var(--sx-text-soft, #334155);
           font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; }
.ss-cos button:hover { border-color: var(--sx-olive, #4B6F0A); color: var(--sx-olive, #4B6F0A); }
.ss-cos button.on { background: var(--sx-olive, #4B6F0A); border-color: var(--sx-olive, #4B6F0A); color: #fff; }
.ss-cos button:focus-visible { outline: 2px solid var(--sx-olive, #4B6F0A); outline-offset: 2px; }
.ss-cos-n { border-radius: 10px; padding: 0 6px; font-size: 10.5px; background: var(--sx-bg-soft, #f1f5f9); color: var(--sx-text-soft, #334155); }
.ss-cos button.on .ss-cos-n { background: rgba(255,255,255,.24); color: #fff; }
/* A result in ANOTHER company - gold, like the Switch button, because opening it switches company. */
.ss-co { display: inline-block; vertical-align: 1px; margin-right: 6px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 700;
           background: color-mix(in srgb, var(--sx-gold, #E5A100) 15%, transparent); color: var(--sx-gold-dark, #8a6200);
           border: 1px solid color-mix(in srgb, var(--sx-gold, #E5A100) 35%, transparent); }
.ss-t-fav { background: color-mix(in srgb, var(--sx-gold, #E5A100) 15%, transparent); color: var(--sx-gold-dark, #8a6200); }
.ss-favmark { color: var(--sx-gold, #E5A100); font-size: 11px; margin-left: 3px; vertical-align: 1px; }

@media (max-width: 900px) {
  .ss { flex: 1 1 auto; }
  .ss-box > .ss-kbd { display: none; }
  .ss-panel { position: fixed; top: calc(var(--sx-header-h, 56px) + 4px); left: 8px; right: 8px; min-width: 0; }
  .ss-tips { position: fixed; top: calc(var(--sx-header-h, 56px) + 4px); left: 8px; right: 8px; width: auto; }
  .ss-foot { display: none; }   /* only keyboard hints are left in it, and phones have no keyboard */
}
@media (max-width: 560px) {
  .ss-scope-btn .ss-lbl { display: none; }
  .ss-pill { display: none; }
  .ss-in { font-size: 16px; }   /* stops iOS zooming into the box */
}
/* 2026-11-06 phones: the header has no room for a box (it was squeezed to ~30 px), so the search is a magnifier button
   until tapped - the invisible input covers the button, so the tap itself focuses it (keyboard opens at once on iOS) -
   and then lies across the top of the screen. Tapping outside or Esc closes it (js/super-search.js close()). */
@media (max-width: 700px) {
  .ss { flex: 0 0 36px; margin-left: 0; }
  .ss-box { position: relative; height: 34px; }
  .ss:not(.ss-open) .ss-scope, .ss:not(.ss-open) .ss-help, .ss:not(.ss-open) .ss-clear, .ss:not(.ss-open) .ss-spin { display: none !important; }
  .ss:not(.ss-open) .ss-ico { margin: 0 auto; font-size: 15px; color: var(--sx-olive, #4B6F0A); }
  .ss:not(.ss-open) .ss-in { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
  .ss.ss-open { position: fixed; top: 9px; left: 8px; right: 8px; z-index: 1104; }
  .ss.ss-open .ss-box { height: 40px; box-shadow: 0 6px 24px rgba(15,23,42,.18); }
}
@media (prefers-reduced-motion: reduce) { .ss-spin, .ss-dot { animation: none; } }