/* ============================================================================
   PANOPTICON — VITALS page rules. Loaded after ../css/dashboard.css, whose
   stamps row, brand block and reply cards this page reuses as they are.
   ========================================================================== */

/* ---- the two fields ---- */
.vit-find { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 22px 0 18px; }
.vit-field { position: relative; min-width: 0; }
.vit-field .pn-label { display: block; color: var(--fg-3); margin: 0 0 8px; }
.vit-field .pn-label span { color: var(--fg-3); opacity: .7; }
.vit-search input:disabled { cursor: not-allowed; }
.vit-search:has(input:disabled) { border-color: var(--rule); background: none; }
.vit-search:has(input:focus-visible) { box-shadow: var(--shadow-hard-accent); }
.vit-clear { background: none; border: none; padding: 0 2px; cursor: pointer; color: var(--fg-3);
  font-family: var(--font-mono); font-size: 13px; line-height: 1; }
.vit-clear:hover { color: var(--brand); }

/* ---- suggestions ---- */
.vit-options { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin: -1px 0 0;
  padding: 0; list-style: none; max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--bg-raised); border: var(--bw) solid var(--fg); border-top-color: var(--rule);
  font-family: var(--font-mono); font-size: 13px; }
.vit-options li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 8px 14px; cursor: pointer; border-top: 1px solid var(--rule); }
.vit-options li:first-child { border-top: none; }
.vit-options li.is-active { background: var(--brand); color: var(--bg); }
.vit-options li.is-active small, .vit-options li.is-active .cb-aside { color: var(--bg); opacity: .8; }
.vit-options .cb-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vit-options .cb-main b { font-weight: 700; overflow-wrap: anywhere; }
.vit-options small { color: var(--fg-3); font-size: 11px; letter-spacing: .04em; }
.vit-options .cb-aside { flex: none; color: var(--fg-3); font-size: 11px; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; }
.vit-options .cb-empty { cursor: default; color: var(--fg-3); }

/* ---- the latest reply, in MONITOR's brand block ---- */
.vit-latest h1 { opacity: 1; cursor: default; }
.vit-latest h2 a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere; }

/* ---- the grid and its pager ---- */
.dash-replies-grid.is-loading { opacity: .45; transition: opacity var(--dur-2) var(--ease); }
.vit-pager { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.vit-page { background: none; border: 1px solid transparent; color: var(--fg-2); cursor: pointer;
  font: inherit; padding: 3px 7px; }
.vit-page:hover:not(:disabled) { border-color: var(--fg-3); color: var(--fg); }
.vit-page:disabled { cursor: default; opacity: .4; }
.vit-page.is-current { opacity: 1; color: var(--brand); border-color: var(--brand); }
.vit-page--step { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.vit-gap { color: var(--fg-3); padding: 0 2px; }
.vit-pager-foot { display: flex; justify-content: flex-end; margin-top: 18px; }

.vit-empty { border-bottom: none; }

@media (max-width: 768px) {
  .vit-find { grid-template-columns: 1fr; }
  .vit-latest { min-height: 0; }   /* MONITOR's is sized for its timeline */
  .vit-pager-foot { justify-content: flex-start; }
}