/* ==========================================================================
   What one term found, register by register.

   Colours and sizes come from the design system's tokens, so both themes and the print palette follow
   with no second palette here; this file adds no token of its own.

   THE BOX ITSELF IS NOT HERE. `.search-box` is drawn in the sidebar as well as on this screen's siblings,
   and the sidebar is not a screen — so it is a design-system name. Several other names this screen draws
   are the design system's too — `.tally`, `.note`, the aside's three — and every one of them is borrowed
   rather than re-declared here: the line saying how many matched is the line a register draws over its own
   rows, and `StylesheetTests` is what keeps a borrowed name from quietly becoming a second declaration.
   ========================================================================== */

/* --- The line over the answer -------------------------------------------- */

/* A stamp after a sentence's (i) stands apart from it, so the (i) reads as the sentence's and not the stamp's. Here,
   because this screen's lede draws a toggletip before its stamp. `.published` is the design system's name: it is
   declared in the design system's copy, untouched by the patches DesignSystemCopyTests names, and app.css
   may not restate it (RegisterTallyTests). */
.lede > .tip + .published { margin-left: var(--space-12); }

/* --- One register's answer ----------------------------------------------- */

/* Separated by space rather than by a rule or a card. Every group is the same kind of thing and a reader
   scans down them looking for the one register they care about; boxing each would put a frame around
   every equal answer for the reader to read past. */
.result-group { margin: 0 0 24px; }

/* --- The hits inside it -------------------------------------------------- */

/* A list and not a table: a hit is a name, and the one other thing it may carry is a qualifier that only
   some registers publish — so a second column would be empty on most rows and headed with a word for
   something the reader can already see. */
.hits {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    max-width: 68ch;
}

.hits li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    /* A label is free text somebody typed, so it can be one unbroken run longer than the line. Set on the
       row because an unlinked hit is a bare text node with no element to carry it. */
    overflow-wrap: anywhere;
}

/* ...and a flex child will not shrink below its own content without this, so the qualifier beside a long
   label would be pushed off the row rather than wrapping with it. */
.hits li > * { min-width: 0; }

/* What PropMan sets beside a hit's label, where it sets something — a tenancy's tenants, a bill's invoice reference, a
   statement's landlord. Set back from the label, which is what opens the record. */
.hit-qualifier {
    color: var(--text-muted);
    font-size: var(--fs-secondary);
}