/* Search results page: hero, entity header, per type sections, and the
   filters panel's extra controls (date range, media type, result type).
   Every color, radius and spacing token here is one app.css already
   defines on :root, so this file never introduces a second palette
   (CLAUDE.md, Consistency). Card shapes and grids reuse the site's
   existing .feed/.feed-grid/.vid-grid/.row.card/.vid/.mk-list/.card/.cards
   patterns (CLAUDE.md, News cards keep the approved shape); this file
   only adds what those do not already cover, and never re-implements
   them.

   Standard width, owner correction 26 September 2026: "The entire page
   is also now too wide with content." This page used to widen its own
   ancestor .wrap to 1600px; that override is gone, so the search page
   (empty or with results) sits in the exact same main.wrap the topic
   pages use, app.css's own max-width, never a second width for one
   page. */

/* ---- search hero: centered, one giant input (owner correction,
   26 Sep 2026: "The hero of search should take a different form with the
   content centered and a giant search bar that also runs centered").
   Reuses the site's existing .thero shell (canvas, veil, background,
   the mandated header-to-eyebrow and hero-bottom padding); only the
   inner layout is recentered here, under the .thero-search modifier the
   search page alone carries. */
.thero-search .thero-top { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.thero-search .thero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: none; }
.thero-search .thero-copy .k { margin: 0 auto; }
.thero-search h1 { justify-content: center; text-align: center; }
.thero-search .desc { margin-left: auto; margin-right: auto; text-align: center; }
.thero-search .thero-acts { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 32px; gap: 0; }

.srch-hero-form { width: 100%; display: flex; justify-content: center; }
.srch-hero-box { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 860px; min-width: 0; height: 64px; padding: 0 8px 0 26px; border: 1px solid var(--hero-line); border-radius: 999px; background: rgba(255,255,255,.07); }
.srch-hero-box:focus-within { outline: 3px solid rgba(255,255,255,.35); outline-offset: 2px; }
.srch-hero-box svg { flex: none; color: var(--hero-fg2); }
.srch-hero-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--hero-fg); font: 500 18px/1.3 var(--body); outline: none; height: 100%; }
.srch-hero-box input::placeholder { color: var(--hero-fg2); }
.srch-hero-submit { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: #0d1321; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.srch-hero-submit:hover { background: #f1f1f1; }
.srch-adv-link { margin-top: 16px; border: 0; background: transparent; color: var(--hero-fg2); font: 600 13.5px/1.2 var(--body); text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.srch-adv-link:hover { color: var(--hero-fg); }
@media (max-width: 640px) {
  .srch-hero-box { max-width: 100%; height: 58px; padding: 0 6px 0 18px; }
  .srch-hero-box input { font-size: 16px; }
  .srch-hero-submit { width: 42px; height: 42px; }
}

/* ---- entity header: a plain block, no surrounding card (owner
   correction, 26 Sep 2026: cards on cards). Portrait, name, counts,
   first/last seen, link and coverage chart, full width, above the
   filters row so the rail below starts level with the first results
   section rather than under this block. */
.ent-card { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: start; }
.ent-media { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tan-200); color: var(--fg-2); }
.ent-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-media.logo { border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); }
.ent-media.logo img { object-fit: contain; padding: 10px; }
.ent-body { min-width: 0; }
.ent-kind { font: 700 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.ent-name { font-size: 26px; margin-top: var(--eyebrow-gap); }
.ent-name a { color: inherit; }
.ent-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.ent-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ent-stats span { display: block; font-size: 11.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.ent-seen { margin-top: 8px; font-size: 12.5px; color: var(--fg-2); }
.ent-acts { margin-top: 12px; }
.ent-chart-wrap { grid-column: 1 / -1; margin-top: 4px; }
.ent-chart-wrap .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 6px; }
@media (max-width: 560px) { .ent-card { grid-template-columns: 56px 1fr; } .ent-media { width: 56px; height: 56px; } .ent-name { font-size: 20px; } }

/* An empty status line ("Searching.") takes no grid row at all, so it
   never opens a stray gap in .stack's own gap when there is nothing to
   say (CLAUDE.md, Explaining: nothing that pushes content down for
   nothing). */
#search-population:empty { display: none; }

/* ---- filters + results row: the rail's own top and the results
   column's top are the same grid row, because the population line and
   the entity header (above, full width) are outside this row entirely.
   .fsearch/.facets/.facet* box model is app.css's own (out of scope
   here; another agent owns app.css). */
.fsearch-main { min-width: 0; }

/* ---- result sections: plain page sections, no border, no background
   panel (owner correction, 26 Sep 2026). A heading with a count, then
   the grid, nothing wrapping either. */
.srch-sec + .srch-sec { margin-top: var(--space-5); }
.srch-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.srch-sec-head h2 { font-size: 22px; margin: 0; }
.srch-sec-head .num { font-variant-numeric: tabular-nums; color: var(--fg-3); font-weight: 600; margin-left: 6px; }

/* Cards: the exact wire/news card renderer and grid the home and topic
   pages use (window.MONITOR_CARDS.wireRow into .feed.feed-grid), so the
   two-up horizontal split card and its narrow-screen behavior come from
   the one shared stylesheet, never a second copy here. site/assets/
   search.js gives every non-video, non-market section this same
   .feed.feed-grid wrapper; videos get .vid-grid (site's own video grid);
   markets get .mk-list (site's own market row). */
.srch-item { min-width: 0; }
.srch-item .row.card, .srch-item .vid { height: 100%; }

/* Simple text rows (stories, quotes, records, podcasts, drift): the same
   .row.card shape the wire uses, with a mark instead of a publisher
   picture, so a reader never learns a second card shape for a lane that
   has no image of its own (CLAUDE.md, News cards keep the approved
   shape covers the article lane; these are the same frame, not a new
   one). */
.srch-item .row.card .row-media.mark { min-height: 0; align-self: stretch; }
.srch-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tan-200); color: var(--fg-2); }
.srch-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-credit { margin-top: 10px; }

/* ---- filters: date range, media type, result type ---- */
.facet-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.facet-dates label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-3); flex: 1 1 100px; min-width: 100px; }
.facet-dates input[type="date"] { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg); padding: 7px 8px; font: 500 13px/1.3 var(--body); }
.facet-check-list { display: flex; flex-direction: column; gap: var(--space-1); }

/* Rail spacing, owner correction 26 September 2026: "The faceted options
   are too close together." app.css owns .facet/.facets/.facet-opt's box
   model (another agent's file, out of scope here), so the fix is an
   override on the exact same selectors, loaded after app.css on every
   page that carries this stylesheet, never a change to that file. Two
   distances get the site's own spacing tokens: between one fieldset
   (a facet group: date range, media type, result type, or a server
   facet) and the next, and between one option row and the next inside a
   group. Hit area: a row is at least 36px on a pointer-fine desktop and
   at least 44px, the standard minimum touch target, from 999px down,
   where app.css's own rule already drops to a single column. */
.facet { margin-top: var(--space-3); padding-top: var(--space-2); }
.facet:first-of-type { margin-top: var(--space-2); }
.facet-opt { min-height: 36px; padding: 6px 5px; }
.facet-opt + .facet-opt { margin-top: var(--space-1); }
@media (max-width: 999px) {
  .facet-opt { min-height: 44px; }
}

/* ---- the one tile shape shared by the empty page's starting points
   (below) and the People & Organizations section (search.js): the
   site's own .card, used as a link, never a second card style and
   never a card nested inside this one (CLAUDE.md, News cards keep the
   approved shape + owner correction, cards on cards). .cards is
   app.css's existing auto-fit grid; a CSS grid's default
   align-items:stretch is what keeps every tile in a row the height of
   the tallest one, so CLAUDE.md's Layout 3 ("cards side by side span
   vertically... applied at the container") needs no per-card rule. */
.srch-tile-grid { margin-top: 16px; }
.srch-tile { display: flex; align-items: center; gap: 12px; min-height: 56px; text-decoration: none; color: inherit; }
.srch-tile:hover { border-color: var(--fg-3); text-decoration: none; color: inherit; }
.srch-tile-media { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tan-200); color: var(--fg-2); }
.srch-tile-media.sq { border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); }
.srch-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.srch-tile-media.sq img { object-fit: contain; padding: 6px; }
.srch-tile-body { min-width: 0; flex: 1 1 auto; }
.srch-tile-t { display: block; font: 600 13.5px/1.3 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-tile-k { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .04em; }
.srch-tile-n { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg-2); font-size: 13px; }

/* ---- the empty page's starting state (owner correction 26 September
   2026: "Consider design and layout and consequences of a blank
   page"). One short heading and the tile grid above, no explanatory
   paragraph (CLAUDE.md, Explaining, locked); the note shown only if the
   cheap state fetch itself fails uses the site's own .muted.small, the
   same one-sentence status text every other fetch failure on this page
   already uses. */
#search-start .srch-sec-head { margin-bottom: 0; }

/* ---- People & Organizations (search.js's new section, item 6): the
   same tile and the same grid, placed ahead of Articles. The population
   sentence under the heading is the site's own .muted.small, never a
   second small-text style. */
#search-people .srch-sec-head { margin-bottom: 4px; }
#search-people p.muted.small { margin: 0 0 16px; }

/* ---- empty state ---- */
#search-empty .row-acts { margin-top: 10px; }

/* Search shares the full content width so its cards match every other page.
   Optional facets expand above results instead of reducing their grid width. */
html body .fsearch { grid-template-columns: minmax(0, 1fr); }
.fsearch > .facets-d { min-width: 0; }
.fsearch .facets-sum { cursor: pointer; min-height: 44px; }
.fsearch .facets-sum::after { display: block; }
.fsearch .facets-d[open] .facets-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; padding-bottom: 16px; }
.fsearch .facet { margin-top: 0; }
html body .thero-search .desc { width: 100%; max-width: none; }