/*
 * Findability — vault search results and the frist calendar feed card.
 *
 * Kept out of notarium.css for the same reason chat.css is: these are one
 * workstream's surfaces, and Propshaft's `stylesheet_link_tag :app` picks up
 * every file under app/assets/stylesheets anyway. Only --nt-* tokens are used,
 * so both themes come for free.
 */

/* ── The search field ──────────────────────────────────────────────── */

/* Wide, quiet, and the first thing on the page. A vault's search box is not a
   filter control tucked into a toolbar — it is the primary way in. */
.nt-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 22rem;
  min-width: 0;
}

.nt-search-icon {
  position: absolute;
  left: 0.85rem;
  display: grid;
  place-items: center;
  color: var(--nt-text-tertiary);
  pointer-events: none;
}

.nt-search input {
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* The clear affordance only exists when there is something to clear, so it is
   rendered conditionally rather than hidden. */
.nt-search-clear {
  position: absolute;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--nt-radius-full);
  color: var(--nt-text-tertiary);
  line-height: 1;
}

.nt-search-clear:hover {
  background: var(--nt-neutral-soft);
  color: var(--nt-text);
}

/* ── Results ───────────────────────────────────────────────────────── */

.nt-result {
  display: block;
  padding: var(--nt-space-4) var(--nt-space-5);
  border-bottom: 1px solid var(--nt-border-subtle);
  transition: background var(--nt-duration-fast) var(--nt-ease);
}

.nt-result:last-child { border-bottom: 0; }
.nt-result:hover { background: var(--nt-bg-accent); }

.nt-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-3);
  flex-wrap: wrap;
}

.nt-result-title {
  font-weight: 600;
  color: var(--nt-text);
  text-underline-offset: 2px;
}

.nt-result-title:hover { text-decoration: underline; }

.nt-result-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}

/* The snippet is the point of a search result: it is what tells you this is
   the referat you meant before you open it. Set in the document serif, because
   it IS document text — a quotation from the vault, not UI chrome. */
.nt-result-snippet {
  margin-top: 0.5rem;
  font-family: var(--nt-font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nt-text-secondary);
}

/* Highlight. Underline as well as colour, so the match is visible when the
   page is printed, seen in greyscale, or read by someone who cannot separate
   the tint from the paper. */
.nt-result mark,
.nt-result-title mark {
  /* color-mix against the semantic token rather than a fixed tint, so the
     highlight keeps the same weight on paper and on night. */
  background: color-mix(in srgb, var(--nt-warn) 26%, transparent);
  color: var(--nt-text);
  border-radius: var(--nt-radius-xs);
  padding: 0.05em 0.2em;
  text-decoration: underline;
  text-decoration-color: var(--nt-warn);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.nt-result-score {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  opacity: 0.7;
}

/* ── Search summary line ───────────────────────────────────────────── */

.nt-search-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--nt-space-3);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-secondary);
}

.nt-search-timing {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}

/* ── Facet groups ──────────────────────────────────────────────────── */

.nt-facets {
  display: grid;
  gap: var(--nt-space-3);
}

.nt-facet-group {
  display: flex;
  align-items: baseline;
  gap: var(--nt-space-3);
  flex-wrap: wrap;
}

.nt-facet-legend {
  flex: 0 0 6.5rem;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nt-text-tertiary);
}

/* ── Calendar feed ─────────────────────────────────────────────────── */

/* The URL is a secret, so it is set in mono and allowed to wrap rather than
   being truncated: a half-shown credential is one somebody copies wrong. */
.nt-feed-url {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--nt-radius-sm);
  border: 1px solid var(--nt-border-subtle);
  background: var(--nt-bg-accent);
  font-family: var(--nt-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  word-break: break-all;
  color: var(--nt-text-secondary);
}

.nt-feed-url-masked {
  color: var(--nt-text-tertiary);
  letter-spacing: 0.08em;
}

.nt-feed-actions {
  display: flex;
  align-items: center;
  gap: var(--nt-space-2);
  flex-wrap: wrap;
  margin-top: var(--nt-space-3);
}

/* The "how do I add this" explainer. Three platforms, three short recipes —
   long enough to follow, short enough that nobody skips it. */
.nt-feed-howto {
  display: grid;
  gap: var(--nt-space-4);
  margin-top: var(--nt-space-4);
}

@media (min-width: 48rem) {
  .nt-feed-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nt-feed-howto h4 {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nt-text-tertiary);
  margin-bottom: 0.35rem;
}

.nt-feed-howto ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--nt-text-sm);
  line-height: 1.6;
  color: var(--nt-text-secondary);
  list-style: decimal;
}

.nt-feed-meta {
  display: flex;
  gap: var(--nt-space-4);
  flex-wrap: wrap;
  margin-top: var(--nt-space-3);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
}