/* Live search suggestions (js/typeahead.js, SearchSuggest.ashx).

   ONE COMPONENT, THREE HOSTS: the header form, the mobile menu's form and the
   home page hero box. It has its own sheet rather than living in chrome.css
   because the hero is not chrome, and rather than living in home.css because
   the header is not the home page.

   IT IS REGISTERED IN Site.master.vb (EmitStylesheetLinks), riding with
   site.css and dvpeek.css. Dropping a .css into this theme folder does NOT
   link it: the theme's links are curated in that method, in cascade order, and
   an unregistered sheet is simply never fetched. This file was written and
   served to nobody for exactly that reason before the line was added.

   Ported from the first edition 2026-08-02, where these rules were inlined in
   a <style> block in Site.master. Both hard-won comments below came with it.
*/
.tah-form{position:relative}
/* text-align:left is NOT inherited-by-default tidiness, it is a third host fix.
   The home hero sits in a centred column, so the panel inherited text-align:center
   and every suggestion rendered with its name and sub-label centred and the glyph
   stranded at the far edge, while the identical panel in the header was correct.
   Same shape of bug as the burger-menu one below: the component is fine and the
   host is speaking over it. Stated here once, so all three hosts read the same. */
.tah-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:var(--panel);
  border:1px solid var(--edge2);border-radius:10px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  overflow:hidden;max-height:min(70vh,460px);overflow-y:auto;text-align:left}

/* A suggestion is a ROW: the text column on the left, the entity's glyph on the
   right when it has one. The text keeps its own column so the name still sits
   above the sub-label.

   EVERY ANCHOR RULE HERE IS SCOPED `.tah-panel a.tah-...` AND THAT IS LOAD-BEARING,
   not tidiness. Found on the first edition, on a phone: a
   suggestion in the BURGER menu drew its glyph at roughly the full width of the
   screen, while the identical panel on the header search was correct.

   The panel is appended to whichever box it enhances, and one of those lives
   inside `.xmobile`, which styles its own links with
   `.xmobile a{display:block;padding:12px 20px;border-top:...}`. That selector is
   (0,2,0); a bare `.tah-item` is (0,1,0), so inside the menu the menu won and the
   row lost `display:flex`. A span in a block container is INLINE, an inline
   element ignores width and height, so `.tah-glyph`'s 1.75em box evaporated and
   the `svg{width:100%}` under it resolved against the full line instead. The
   glyph was not oversized by a size rule; it was oversized by not having a box.

   So each anchor rule qualifies with the element as well as the panel, (0,2,1),
   which beats `.xmobile a` outright rather than tying with it and depending on
   which stylesheet the browser happened to read last. The menu's border-top and
   padding are unset explicitly for the same reason: an inherited 12px 20px on a
   suggestion row is the menu's shape, not the panel's. */
.tah-panel a.tah-item{display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:8px 12px;text-decoration:none;color:var(--ink);
  border-top:0;border-bottom:1px solid var(--edge)}

/* min-width:0 is load-bearing: without it the text column refuses to shrink below
   its content and a long name pushes the glyph out of the panel instead of
   ellipsising. */
.tah-panel .tah-txt{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.tah-panel .tah-name{font-weight:600;font-size:.9rem}
.tah-panel .tah-sub{color:var(--faint);font-size:.72rem}

/* Sized in em, not px, so the mark grows with the A-/A+ control and with OS text
   scaling like the name beside it. currentColor is what the stored SVG strokes
   with, so the glyph picks up the gold and both themes for free.
   display:block rather than the span default, so the box survives even if some
   future container turns the row back into a block: that is the exact failure the
   comment above is about, and one declaration makes it unrepeatable. */
.tah-panel .tah-glyph{display:block;flex:0 0 auto;width:1.75em;height:1.75em;
  color:var(--gold);opacity:.9}

/* THE HERO RESET, AND IT IS THE SECOND HOST'S VERSION OF THE BURGER-MENU BUG.
   home.css carries `.homepage .searchbig svg{position:absolute;left:16px;top:50%;
   transform:translateY(-50%);pointer-events:none}` to place the magnifier inside
   the field. The panel lives INSIDE .searchbig, so without this every suggestion
   glyph would be yanked out of its row and stacked on top of the magnifier, and
   pointer-events:none would make the rows' art untappable.

   `.tah-panel a.tah-item .tah-glyph svg` is (0,4,1) and beats that (0,2,1)
   outright, so this does not depend on the theme's alphabetical link order the
   way a bare `.searchbig .tah-panel svg` tie would. Written as a full reset of
   all four declarations rather than `position:static` alone, because inheriting
   half of a positioning rule is how the first edition's glyph got a box but no
   place to put it.

   The stored art also carries width="100" height="100"; override both or every
   suggestion is a 100px tall row. max-* as well as width/height, so a percentage
   can never resolve against something wider than the box above. */
.tah-panel a.tah-item .tah-glyph svg{position:static;left:auto;top:auto;transform:none;
  pointer-events:auto;width:100%;height:100%;max-width:100%;max-height:100%;display:block}

.tah-panel a.tah-item:last-of-type{border-bottom:0}
.tah-panel a.tah-item.on,.tah-panel a.tah-item:hover{background:var(--panel2)}

/* The keyboard-highlighted row and the hovered row look the same on purpose, but
   a highlight also has to survive Windows High Contrast, where background-color
   is discarded. The outline is drawn inside the row so it cannot be clipped by
   the panel's overflow:hidden. */
.tah-panel a.tah-item.on{outline:2px solid transparent;outline-offset:-2px}
@media (forced-colors: active){
  .tah-panel a.tah-item.on{outline-color:Highlight}
}

.tah-panel a.tah-all{display:block;padding:9px 12px;text-align:center;text-decoration:none;
  color:var(--gold);font-size:.82rem;font-weight:600;border-top:0;
  background:color-mix(in srgb,var(--gold) 8%,transparent)}
.tah-panel a.tah-all:hover{background:color-mix(in srgb,var(--gold) 15%,transparent)}
.tah-panel .tah-none{padding:10px 12px;color:var(--faint);font-size:.85rem}

/* RULING 641, owner request 1093: cross-atlas global search in the
   type-ahead. THE DIVIDER is a plain heading-weight line, not a link and not
   role="option" (typeahead.js gives it role="presentation" and it is never
   one of the .tah-item elements setActive walks), so arrow-key navigation
   skips straight over it exactly the way it already skips the "See all N
   results" link at the bottom. A sibling ITEM reuses .tah-item's whole row
   shape (the base rule higher in this file) with no separate class needed
   for layout; the .tah-sibling class carries only the one visual
   distinction a reader benefits from before clicking, that this row leaves
   the atlas. */
.tah-panel .tah-divider{padding:8px 12px 4px;color:var(--faint);font-size:.7rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  border-top:1px solid var(--edge2)}
.tah-panel a.tah-item.tah-sibling{background:color-mix(in srgb,var(--gold) 4%,transparent)}