/* Evidence viewer — an appendix of the write-up, in its type: serif for reading, sans for labels and small text,
   mono for captured text; hairline rules, list typography. */

.viewer { max-width: 46rem; margin: 0 auto; padding: 3.5rem var(--gutter) 5rem; }

/* intro */
.v-intro { margin-bottom: 1.8rem; }
.v-intro h1 { font-size: 2rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; margin: 0 0 0.7rem; }
.v-sub { color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin: 0; max-width: var(--measure); }

/* search: a plain bordered box, controls on a line below */
#search-form { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 0; margin-bottom: 1.4rem; }
.search-row { display: flex; gap: 0.5rem; }
#q { flex: 1; font-family: var(--serif); font-size: 1rem; padding: 0.5rem 0.7rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 3px; }
#q:focus { outline: none; border-color: var(--ink); }
.search-row .btn, .more {
  font-family: var(--serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.5rem 1.1rem;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 3px; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-row .btn:hover, .more:hover { background: var(--link); border-color: var(--link); }
.more { background: var(--paper); color: var(--ink); font-weight: 400; }
.more:hover { background: var(--ink); color: var(--paper); }
.controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; margin: 0.8rem 0 0; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }
.controls .ctl { display: inline-flex; gap: 0.35rem; align-items: center; }
.controls select, .controls input[type=text] { font: inherit; padding: 0.2rem 0.35rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink); }
.tagbox { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.tagchips { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.tagchip { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.tagchip::before { content: "["; color: var(--faint); }
.tagchip::after { content: "]"; color: var(--faint); }
.tagchip .x { color: var(--miss); margin-left: 0.2rem; }
.hint { font-family: var(--sans); font-size: 0.76rem; color: var(--faint); margin: 0.7rem 0 0; min-height: 1.1em; }
.hint.err { color: var(--miss); }

/* results: a plain list separated by hairlines */
.results { display: flex; flex-direction: column; }
.hit { border-bottom: 1px solid var(--rule); padding: 0.85rem 0; cursor: pointer; }
.hit:first-child { border-top: 1px solid var(--rule); }
.hit .hit-head { display: flex; flex-wrap: wrap; gap: 0.25rem 0.7rem; align-items: baseline; font-family: var(--sans); font-size: 0.76rem; color: var(--muted); }
.hit .rid { font-family: var(--mono); color: var(--ink); font-size: 0.82rem; }
.hit .rid a { color: var(--ink); text-decoration: none; }
.hit:hover .rid a { text-decoration: underline; }
.hit .kind { font-style: italic; }
.hit .when { font-variant-numeric: tabular-nums; }
.hit .snippet { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; margin-top: 0.4rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); max-height: 7rem; overflow: hidden; }
.hit .snippet .m { color: var(--faint); }
.hit .snippet mark, .hit .snippet .hitpart { background: var(--tint); color: var(--ink); }
.more-wrap { text-align: center; margin-top: 1.3rem; }

/* row page — reads like an appendix entry */
.row-pane { }
.crumbs { font-family: var(--sans); font-size: 0.78rem; margin-bottom: 1.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.crumbs a { color: var(--link); }

.rowhead .eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; }
.rowhead h1 { font-family: var(--mono); font-size: 1.4rem; font-weight: 600; margin: 0 0 0.7rem; }
.rowhead .meta { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.55rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.3rem; }
.rowhead .meta b { color: var(--faint); font-weight: 400; }
.rowhead .meta .kind { font-style: italic; }
.tagline { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; font-family: var(--mono); font-size: 0.78rem; }
.tagline .t { color: var(--muted); cursor: pointer; }
.tagline .t::before { content: "["; color: var(--faint); }
.tagline .t::after { content: "]"; color: var(--faint); }
.tagline .t:hover { text-decoration: underline; }

.section-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 2rem 0 0.6rem; }

.fulltext-wrap { }
.fulltext { margin: 0; padding: 0.85rem 0.95rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); background: var(--rule-2); border: 1px solid var(--rule); border-radius: 2px; }
.textbar { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: baseline; padding: 0.5rem 0 0; font-family: var(--sans); font-size: 0.74rem; color: var(--muted); }
.textbar a { color: var(--link); }
.legend { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; margin-left: auto; color: var(--faint); }

.rel { display: flex; flex-direction: column; }
.rel .relrow { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--rule); background: none; color: inherit; padding: 0.5rem 0; cursor: pointer; font: inherit; }
.rel .relrow:first-child { border-top: 1px solid var(--rule); }
.rel .relrow:hover .rid { text-decoration: underline; }
.rel .relrow .rid { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); }
.rel .relrow .kind { font-family: var(--sans); font-style: normal; color: var(--muted); font-size: 0.74rem; margin-left: 0.6rem; }
.rel .relrow .prev { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--faint); margin-top: 0.25rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 3rem; overflow: hidden; }
.rel .ancestor .rid::before { content: "↑ "; color: var(--faint); }

@media (max-width: 1099px) { .viewer { padding-top: 1.6rem; } }   /* under the sticky bar, the same start as the write-up */
@media (max-width: 640px) { .v-intro h1 { font-size: 1.6rem; } .rowhead h1 { font-size: 1.2rem; } }