/* ─────────────────────────────────────────────────────────────────────────
   HEARTH — the search page's own furniture. Loaded after cc.css and
   cc-lists.css.

   Almost all of it is shared: the topline, the filter box, the segmented
   facet, the table kit and the peek card. What is left is the query form in
   the topline and the five column widths, ported from
   docs/mockups/release-refresh/src/p-a.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Top padding only. `.srch` sits on the same element as `.shell`, and a
   padding shorthand here has equal specificity and loads second, so it would
   wipe `.shell`'s `padding:0 var(--pad)` and run the page wider than the
   masthead above it. */
.srch{padding-top:16px}

/* ── the query box ──────────────────────────────────────────────────────
   The masthead has a search field too, and this one is not a duplicate of it:
   the masthead's is the way in from any page, this one is the query you are
   already looking at, editable in place with the result count beside it. It
   is a real GET form, so a reader without scripts still searches. */
.qbox{display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap}
.qbox input{
  flex:1 1 420px; max-width:520px; height:34px; padding:0 12px;
  background:var(--raise); border:1px solid var(--rule-2); border-radius:var(--radius);
  font-family:var(--ui); font-size:14px; color:var(--ink);
}
.qbox input:focus{outline:0; border-color:var(--sig)}
.qbox button{
  height:34px; padding:0 14px; background:none; cursor:pointer;
  border:1px solid var(--sig-dim); border-radius:var(--radius);
  font-family:var(--mono); font-weight:500; font-size:10.5px; line-height:1;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sig);
}
.qbox button:hover{background:var(--sig-ghost)}
.qbox .qn{font-family:var(--mono); font-size:11.5px; color:var(--ink-4); white-space:nowrap}

/* ── the results ────────────────────────────────────────────────────────
   Tier swatch, kind, entry, glance, area. The first column is 9px because it
   is a colour and nothing else: a tier reads at a glance down the left edge
   and costs no width to do it. */
.tbl.res .th, .tbl.res .tr{grid-template-columns:9px 78px minmax(0,1.15fr) minmax(0,1fr) 132px}
.tbl.res .grp a{color:var(--ink); letter-spacing:.14em}
.tbl.res .grp a:hover{color:var(--sig)}

.srch-empty{
  margin:26px 0 0; font-family:var(--prose); font-size:15px; line-height:1.6; color:var(--ink-3);
}

@media(max-width:900px){
  .fbox{flex:1 1 100%; max-width:none}
  .fbox input{font-size:16px} /* under 16px iOS zooms the whole page on focus */
  .fbox .kbd{display:none}    /* a phone has no slash key to advertise */

  /* The glance is the cell that survives losing width worst, and the area is
     the one a reader can do without: it repeats the entry's own words often
     enough. Hidden by position so a row and its header drop the same cell. */
  .tbl.res .th, .tbl.res .tr{grid-template-columns:9px 70px minmax(0,1.1fr) minmax(0,1fr)}
  .tbl.res .th > :nth-child(5), .tbl.res .tr > :nth-child(5){display:none}
}