/* QUICK SEARCH (round 6 B25). Same shape as alerts.css: a full-screen sheet on the
   phone, a centered box from 768px up. Every tap target at least 40px tall. */

.qsbtn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 6px; padding: 0; border: 1px solid var(--line2);
  border-radius: var(--r-pill, 999px); background: none; color: var(--text); cursor: pointer; }
.qsbtn:hover { border-color: var(--cyan); }
.qsicon { display: block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }

.qspanel[hidden] { display: none; }
.qspanel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: 600; }
.qsscrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .6); }
.qssheet { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column;
  background: var(--panel); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); overflow: hidden; }
@media (min-width: 640px) {
  .qssheet { left: 50%; right: auto; top: 72px; bottom: auto; transform: translateX(-50%);
    width: 560px; max-width: calc(100vw - 32px); max-height: 70vh; border-radius: var(--r-card, 10px);
    border: 1px solid var(--line); box-shadow: var(--shadow); }
}
.qsbox { display: flex; align-items: center; gap: 8px; padding: 6px 8px; flex: 0 0 auto;
  border: 1px solid var(--line2); border-radius: var(--r-ctl, 8px); color: var(--muted); }
.qsbox svg { flex: 0 0 auto; }
#qsinput { flex: 1 1 auto; border: none; background: none; color: var(--text); font-size: 16px;
  min-height: 44px; padding: 0; }
#qsinput:focus { outline: none; }
.qsclose { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; background: none; border: none;
  color: var(--muted); font-size: 15px; cursor: pointer; }

.qsresults { list-style: none; margin: 8px 0 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.qsempty { color: var(--muted); padding: 12px 4px; font-size: 13px; }
.qshint { flex: 0 0 auto; margin: 6px 2px 0; font-size: 11px; color: var(--muted); }
.qsrow { display: block; text-decoration: none; color: inherit; padding: 10px 8px; min-height: 44px;
  border-radius: var(--r-ctl, 8px); cursor: pointer; }
.qsrow:hover, .qsrow.qson { background: var(--panel2); }
.qskind { display: inline-block; min-width: 78px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.qskind.qsk-position { color: var(--green); }
.qskind.qsk-watchlist { color: var(--gold); }
.qskind.qsk-symbol { color: var(--cyan); }
.qskind.qsk-options { color: var(--accent-ink); }
.qslabel { font-weight: 700; }
.qssub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; margin-left: 78px; }

/* ROUND 6 B32: the phone. The full-screen sheet starts below the notch (its box sat at 20px
   under a 47px status bar), the field is 16px so iOS does not zoom the page when it takes
   the focus, and the keyboard hint line (arrows, Enter, Esc) is not drawn on a touch screen. */
@media (max-width: 639.98px) {
  .qssheet { padding-top: calc(10px + env(safe-area-inset-top)); }
}
@media (pointer: coarse) {
  .qshint { display: none; }
}