/* ===========================================================================
   search.css  -  the results page

   The first edition's Search.aspx style block, centralized. Its own header
   said this was the plan: "They live here rather than in site.css only because
   site.css was owned by another change while this one was being made; they are
   already scoped under .searchpage, so moving them is a straight cut and
   paste." This is that move.

   Every value is the first edition value.

   The page SHELL is not here and must not be. The identity header (.dvrail),
   the .sec cards, the .lede and the .countline all come from the shared
   .dvpage system in site.css, which is what stops this page and the category
   page drifting apart. What is here is the result list ported from the retired
   Explorer SPA, under the same class names, plus the search box.

   ONE DELIBERATE DIFFERENCE FROM THE SPA'S OWN VALUES, carried over with the
   rules: there a row sat on var(--panel) against the page ground. Here the
   rows sit INSIDE a .sec card, which is itself var(--panel), so a row painted
   the same colour would vanish into it. Rows take var(--panel2) instead, the
   same one-step lift measured from the surface they actually sit on.

   WHAT IS NOT PORTED, and it is a data gap rather than a design one:
     .standing-mark   the listing provenance pill. There is no
                      dbo.EntityStanding equivalent in this edition, so there
                      is nothing to draw and the rule would style nothing.
   It is reported rather than left as a dead rule nobody can test.

   .rowglyph WAS on that list and its entry EXPIRED, which cost every search
   result a hundred pixel drawing. The note said this edition had no glyph
   store; wD-listrender gave it one on 2026-08-01 and Search.aspx.vb has
   emitted a span.rowglyph on every row that resolves a primary image ever
   since. The stored art carries its own width and height attributes of 100,
   so with no rule to override them each row grew a 100px square. A deferral
   note goes stale silently: nothing rechecks the blocker, and the next reader
   is simply told again that the omission was on purpose. The rules are ported
   below, at the first edition's values. If you find another entry on this
   list, verify the blocker before believing it.
   =========================================================================== */

/* ---- the search box -------------------------------------------------------
   A flex row, at the first edition's own values: an input and a button, and
   nothing between them. The 20ch type select this edition used to draw here
   was removed 2026-08-01 (parity audit defect 13: the first edition has no
   type filter, and the select also narrowed the input), and its rules and the
   flex-wrap that made room for it went with it.
   --------------------------------------------------------------------------- */
.searchpage .srchbox{display:flex;gap:9px;margin:0 0 18px}
.searchpage .srchbox input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--edge2);
  color:var(--ink);border-radius:11px;padding:11px 14px;font:inherit;font-size:.95rem;outline:none}
.searchpage .srchbox input:focus{border-color:var(--gold)}
.searchpage .srchbox button{background:var(--panel);border:1px solid var(--edge2);color:var(--ink);
  border-radius:11px;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:.14s}
.searchpage .srchbox button:hover{border-color:var(--gold);color:var(--gold)}
.searchpage .srchbox button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* A category's group of hits. The heading is a link to that category and
   carries the size of the group as a quiet counter, which is what the first
   edition's h2 + span.gc does. Ported verbatim from its Search.aspx style
   block; site.css styles .gc only inside .grouphd and .cmpcols, so the
   searchgroup heading needs its own copy of the pill. */
.searchpage .searchgroup>h2 a{color:inherit;text-decoration:none}
.searchpage .searchgroup>h2 a:hover{text-decoration:underline}
.searchpage .searchgroup>h2 .gc{color:var(--faint);font-size:.72rem;font-family:var(--sans);
  font-weight:400;margin-left:9px;font-variant-numeric:tabular-nums;
  border:1px solid var(--edge);border-radius:99px;padding:1px 8px}

/* ---- the result list ------------------------------------------------------ */
.searchpage .rowlist{display:flex;flex-direction:column;gap:6px}
.searchpage .rowitem{display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--panel2);border:1px solid var(--edge);border-radius:9px;padding:9px 12px;
  text-decoration:none;color:var(--ink);transition:.12s}
.searchpage .rowitem:hover{border-color:var(--gold);background:var(--panel)}
.searchpage .rowitem:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.searchpage .rowitem .rmain{min-width:0}
/* The entity's glyph, hard right on the row (owner, 2026-07-28). flex:0 0 auto
   so it never shrinks: the row is space-between and the snippet beside it is
   the flexible member. Sized in em so it tracks the A-/A+ control and OS text
   scaling rather than staying a fixed pip while the text around it grows. The
   stored art carries width and height attributes of 100, which the svg rule
   below has to override, and it strokes with currentColor so it takes the
   theme without a second declaration.

   INK, NOT GOLD (owner, 2026-07-30: "glyphs are displaying gold instead of
   white"). Gold is this site's accent, it marks what is interactive or what is
   being emphasised, and a mark on every row is neither: a column of gold read
   as a column of links. --ink is the body text colour, so the drawing sits at
   the same weight as the name beside it and stays right in both themes
   (near-white on dark, near-black on light) without a second declaration. */
.searchpage .rowitem .rowglyph{flex:0 0 auto;width:2em;height:2em;color:var(--ink);opacity:.9}
.searchpage .rowitem .rowglyph svg{width:100%;height:100%;display:block}
.searchpage .rowitem:hover .rowglyph{opacity:1}
.searchpage .rowitem .rn{display:block;font-weight:600;font-size:.92rem}
/* The sub-label is the entity's category ("Roman Deities" under "Mars"). It
   used to be a bare block directly beneath the name with no leading at all, so
   the two lines touched: readable at 100% on a desktop, and a single run-on
   smear on a phone or at 150% text, which is where it was reported. Leading in
   em so it grows with the reader's text size instead of staying a fixed
   hairline. */
.searchpage .rowitem .rs{display:block;color:var(--faint);font-size:.75rem;margin-top:.25em}
/* margin-left:auto pushes the snippet to the right edge, which is what makes
   the row read as two columns. */
.searchpage .rowitem .rd{color:var(--muted);font-size:.8rem;max-width:52ch;margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
/* .rwhy (the slug-match reason line) was removed 2026-08-01 with the page's
   regrouping: the procedure now snippets every row that has a description, so
   a slug match carries its description like any other row, and the first
   edition has no such line. .rmore stays: the first edition uses it for its
   per-group overflow link, and this page's truncation notice may adopt it. */
.searchpage .rmore{margin:11px 0 0;font-size:.84rem}
.searchpage .rmore a{color:var(--gold);text-decoration:none}
.searchpage .rmore a:hover{text-decoration:underline}

/* Narrow: the snippet stops being a right-hand column and becomes a second
   line under the name, because 52ch of ellipsised text in a 320px row is
   unreadable. */
@media(max-width:640px){
  .searchpage .rowitem{flex-direction:column;align-items:stretch;gap:4px}
  .searchpage .rowitem .rd{max-width:none;white-space:normal;text-align:left;margin-left:0}
  /* The name wraps to two or three lines down here, so the gap that separates
     it from its category has to be bigger than the gap between its own wrapped
     lines or the block reads as one paragraph. */
  .searchpage .rowitem .rs{margin-top:.4em}
  /* On a phone the row already wraps its snippet; keep the mark from taking a
     line of its own by letting the text column keep priority. */
  .searchpage .rowitem .rowglyph{width:1.6em;height:1.6em}
}

/* ---- sibling atlas results, ruling 641 / request 1093 --------------------- */
/* A SIBLING SECTION reuses .searchgroup / .rowlist / .rowitem exactly, so it
   looks like every other category group on this page; the ONE difference is
   that a sibling row is not itself the click target (it carries the standard
   cross-atlas peek host attributes instead, the same shape Entity.aspx's
   "Also In" panel already uses), so its whole-row padding moves onto the
   inner .rlink anchor, which is what a reader and a screen reader actually
   activate. Padding zeroed on the host and restored on .rlink keeps the row's
   total size identical to an ordinary local .rowitem. */
.searchpage .rowitem.siblingrow{padding:0}
.searchpage .rowitem.siblingrow .rlink{display:flex;justify-content:space-between;
  align-items:center;gap:12px;width:100%;padding:9px 12px;text-decoration:none;
  color:inherit;border-radius:inherit}
.searchpage .rowitem.siblingrow .rlink:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.searchpage .siblingsec{margin-top:14px}