/* ============================================================
   Universal search: the magnifying glass in the top bar.

   The layout decision, written down rather than left to be
   inferred (see `cricket-desktop`):

     Sentences or a picture?  Sentences. The box and the panel
       take the measure, and the sheet that holds them spans, so
       no rule stops halfway across the page.
     A designed set or a list?  A list. It flows, and a ragged
       last row is fine.
     390 / 768 / 1440?  One arrangement, deliberately: a sheet
       under the bar with the box at the left of the content
       column. On a phone the measure is wider than the screen
       so the box is simply full width, which is the same rule
       arriving at a different answer rather than a second
       design.
     Rungs?  --s2 and --s3 only. A sheet is furniture, not a
       major block of the page.
   ============================================================ */

/* The button lives inside the subject strip, which is the one piece of the bar
   that stays stuck to the top of a phone, and it takes that strip's own rules
   from styles.css rather than restating them: on a phone it is a cell like the
   seven beside it, on a desktop it is an item in the same flex row.

   It says the word Search. A wordless circle at the end of seven labelled
   neighbours does not read as a control, which is exactly what happened: the
   owner looked at the front door and could not find it. What stops it reading
   as an eighth subject is the tint below, not the absence of a name.

   The tint is the site's crimson mixed into the paper, which is the same way
   the finder's tab circles are built, so it is the site's own accent rather
   than a new colour. Defined here once as a var() onto --crimson, which the
   site flips in all three theme blocks, so the substitution lands on the right
   value in each. */
.topsearch__btn {
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--crimson) 34%, var(--paper));
  background: color-mix(in srgb, var(--crimson) 9%, var(--paper));
  color: var(--ink);
}
.topsearch__btn:hover {
  border-color: var(--crimson);
  background: color-mix(in srgb, var(--crimson) 16%, var(--paper));
}
.topsearch__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Desktop: a pill in a row of words, so the label and the mark sit side by
   side and the mark comes down to something that belongs beside 1.15rem type.
   The strip's own rules stack them on a phone. */
.topbar .nav--subjects .topsearch__btn {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 20px; padding: 3px 13px 3px 9px;
}
.topbar .nav--subjects .topsearch__btn .nav__icon { display: block; }
/* The plain magnifier, not a cricket mark, so it is sized against the type it
   sits beside rather than against the icon system's 40px floor. That floor
   exists because a fine cricket detail greys out below it, and this drawing
   has no fine detail: one circle, one handle, one stroke. */
.topbar .nav--subjects .topsearch__btn .topsearch__glass {
  width: 19px; height: 19px; display: block;
}
.topbar .nav--subjects .topsearch__btn .nav__short { display: none; }

@media (max-width: 640px) {
  /* On a phone it is a cell of the strip like its neighbours: mark over label,
     40px because that is where the fine detail stops greying out. */
  .topbar .nav--subjects .topsearch__btn {
    border-radius: 10px; padding: 2px 2px 3px; gap: 0;
    /* A grid track of 1fr is minmax(auto, 1fr), so a cell whose content is
       wider than its share takes the extra from its neighbours. The word
       Search plus its padding was 46 where the other seven were 44, which
       squeezed "My son" against it. Nought lets it be an equal eighth. */
    min-width: 0;
  }
  /* On a phone it sits over its label like the seven marks beside it, so it
     takes their box. It is a lighter drawing than they are, so it is drawn a
     little smaller inside that box rather than filling it. */
  .topbar .nav--subjects .topsearch__btn .topsearch__glass { width: 27px; height: 27px; }
  .topbar .nav--subjects .topsearch__btn .nav__icon {
    height: 40px; display: flex; align-items: center; justify-content: center;
  }
  .topbar .nav--subjects .topsearch__btn .nav__full { display: none; }
  .topbar .nav--subjects .topsearch__btn .nav__short { display: block; }
}

/* Fixed, and over the bar rather than under it.

   Two things made every other position wrong, and both were measured rather
   than reasoned about. In the flow inside the header it became a flex item of
   the desktop bar and sat wedged between the title and the navigation at
   319px wide. Fixed but still inside the header it would have positioned
   itself against the header instead of the viewport, because `backdrop-filter`
   on an ancestor makes that ancestor the containing block for anything fixed
   inside it, and the bar has one.

   So it is a sibling of the header, and it covers the bar while it is open.
   That is what a search sheet does on a phone, and the sheet carries its own
   Close, so nothing is stranded behind it. */
.topsearch {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding: var(--s3) 0 var(--s2);
  box-shadow: 0 10px 30px var(--shadow);
}
.topsearch[hidden] { display: none; }
.topsearch__inner {
  max-width: var(--canvas);
  margin: 0 auto;
  padding: 0 22px;
}
.topsearch__lab {
  display: block;
  font-family: var(--font-hand); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink-faint); margin-bottom: 8px;
}
/* The row is what the dropdown measures itself against, which is why it is
   positioned. The component's own stylesheet says so and deliberately does not
   set it, because it cannot know the markup. */
.topsearch__row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  max-width: var(--measure);
}
.topsearch__input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; background: var(--paper-card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 1rem;
}
.topsearch__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.topsearch__input::placeholder { color: var(--ink-faint); }
.topsearch__close {
  border: none; background: none; color: var(--ink); cursor: pointer;
  font-family: var(--font-ui); font-size: 0.95rem; text-decoration: underline;
  padding: 11px 2px; min-height: 44px;
}
.topsearch__note {
  margin: var(--s2) 0 0; max-width: var(--measure);
  font-size: 0.85rem; line-height: 1.5; color: var(--ink-faint);
}

/* ---------- the dropdown, in the site's colours ----------
   predictivesearch.css is the owner's and is kept as supplied, so every colour
   it uses is a --ps-* property with a neutral fallback. finder.css answers
   them for the finder's own box and the answers are the same here, so they are
   not written a second time. What is here is only what this box does
   differently: a mark on every row, because a row can be an idea, a section, a
   complaint, a situation or a result, and which one it is should read before
   the words do. */
.topsearch__row .ps-suggestions {
  right: auto; width: 100%; max-width: var(--measure);
  font-size: var(--ps-font-size);
}
.topsearch__row .ps-suggestion {
  max-width: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 7px 10px; line-height: 1.3;
}
.topsearch__row .ps-suggestion .i4,
.topsearch__row .ps-suggestion .i5 { flex: 0 0 40px; width: 40px; height: 40px; }
.topsearch__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topsearch__row .ps-suggestion b { font-weight: 600; }
/* A quotation's opening words, in sentence case. The uppercase eyebrow below
   is right for a category and wrong for a sentence somebody said. One line,
   clipped, because the point of it is only to tell two rows apart: Rahul
   Dravid is quoted twice from the same email. */
.topsearch__said {
  font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topsearch__row .ps-suggestion.active .topsearch__said,
.topsearch__row .ps-suggestion:hover .topsearch__said { color: var(--ink); }

.topsearch__where {
  font-family: var(--font-hand); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.topsearch__row .ps-suggestion.active .topsearch__where,
.topsearch__row .ps-suggestion:hover .topsearch__where { color: var(--ink-soft); }
.topsearch__row .ps-suggestion mark { font-weight: 700; }

@media (max-width: 640px) {
  .topsearch__inner { padding: 0 14px; }
  .topsearch { padding: var(--s2) 0; }
  /* Eight equal cells, stated in styles.css beside the strip itself. The
     marks come down from 44 to 40, which is the icon system's floor exactly
     and not below it. Measured at 390: 44px cells. */
  .topbar .nav__icon, .topbar .nav__icon svg { width: 40px; height: 40px; }
}

@media print { .topsearch, .topsearch__btn { display: none !important; } }