/* Find as you type in the app bar, the /search page, and the alert count + sound bell (12 Oct, items 82 and 59). */

/* ---- app-bar type-ahead ------------------------------------------------------------------------ */
.qf { position: relative; display: flex; flex: 1 1 260px; max-width: 520px; min-width: 0; }
.appbar .qf .appbar-search { flex: 1 1 auto; max-width: none; width: 100%; }
.qf-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max(100%, 460px); max-width: calc(100vw - 32px); max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); }
.qf-pop[hidden] { display: none; }
.qf-group + .qf-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.qf-head { padding: 6px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.qf-opt { display: grid; gap: 1px; align-content: center; min-height: 46px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.qf-opt:hover { background: var(--surface-3); }
.qf-opt.on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.qf-label { font-weight: 600; font-size: 14.5px; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.qf-group[aria-label="Notes"] .qf-label { font-weight: 500; }
.qf-sub, .qf-match { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf-match { color: var(--text-2); }
.qf-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.qf-all .qf-label { color: var(--gold-2); }
.qf-none { display: grid; gap: 2px; padding: 12px 10px 8px; color: var(--text-2); }
.qf-none span { font-size: 12.5px; color: var(--text-3); }
.qf-pop mark, .sr mark { color: inherit; font-weight: inherit; background: color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 3px; padding: 0 1px; }
body.face .qf-pop { background: #0b1224; border-color: var(--edge, var(--line-strong)); }

/* ---- the /search page ---------------------------------------------------------------------- */
.sr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sr-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font-size: 14px; }
.sr-jump a:hover, .sr-jump a:focus-visible { border-color: var(--gold); color: var(--gold-2); text-decoration: none; }
.sr-group { scroll-margin-top: 76px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-item { display: grid; gap: 2px; width: 100%; min-height: 54px; padding: 10px 14px; text-align: left; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.sr-item:hover, .sr-item:focus-visible { border-color: var(--gold-line); background: var(--gold-soft); }
.sr-item .qf-label { font-size: 15.5px; -webkit-line-clamp: 3; }
.sr-item .qf-sub, .sr-item .qf-match { font-size: 13.5px; white-space: normal; }
body.face .sr-item { background: rgba(18, 18, 18, .7); }

/* ---- Close Room count + alert sound -------------------------------------------------------------- */
.appbar-alerts { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 4px 5px; border-radius: 999px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.appbar-alerts b { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.appbar-alerts:hover { border-color: var(--danger); text-decoration: none; }
.appbar-alerts[hidden] { display: none; }
.appbar .bell-btn { min-width: 44px; padding-inline: 10px; font-size: 19px; line-height: 1; }
.appbar .bell-btn:not(.on) { filter: grayscale(1); opacity: .7; }
.appbar .bell-btn:hover, .appbar .bell-btn:focus-visible { filter: none; opacity: 1; }

@media (max-width: 900px) {
  /* The list drops full width under the app bar (the bar is sticky, so it anchors the list), big rows. */
  .qf { position: static; flex-basis: 120px; }
  /* While typing, the box takes the whole bar; the buttons come back when it lets go. */
  .appbar:has(.qf input:focus) > :not(.qf) { display: none; }
  .qf-pop { top: 100%; left: 0; right: 0; width: auto; max-width: none; max-height: calc(100dvh - 150px); padding: 6px 8px 10px; border-radius: 0 0 var(--radius) var(--radius); border-left: 0; border-right: 0; }
  .qf-opt { min-height: 58px; padding: 10px 12px; }
  .qf-label { font-size: 16px; }
  .qf-sub, .qf-match { font-size: 13.5px; white-space: normal; }
  .qf-head { font-size: 12px; padding-top: 8px; }
  .appbar-alerts { padding: 4px; gap: 0; }
  .appbar-alerts span { display: none; }
  .appbar .bell-btn { min-width: 42px; padding-inline: 8px; }
}