/* ts-evidence.css — the audit-record panel on security.html.
 *
 * Replaces four commodity stat boxes (SHA-256 / Default-Deny / AES-256 /
 * TLS 1.3) that Codex called "table stakes ... checklist marketing when given
 * huge visual priority". A security reviewer cannot verify a badge. They can
 * read a record.
 *
 * Self-contained: security.html does not load sovereignty-base.css, and that
 * sheet is SHARED with cichocki.com. Palette per the threadsync registry —
 * emerald #10B981, violet banned.
 */

.ts-ev {
  --tse-emerald: #10b981;
  --tse-line: rgba(148, 163, 184, 0.16);
  --tse-ink: #e6edf6;
  --tse-dim: #93a3b8;
  --tse-key: #7dd3fc;
  --tse-str: #a5f3d0;
  --tse-num: #fbbf24;
  --tse-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
              "Liberation Mono", "Courier New", monospace;
  margin: 2.5rem 0 0;
  text-align: left;
}

/* The hero centres its paragraphs with `margin: 0 auto` and a max-width.
   Both selectors below are two-class deep so they outrank that rule — without
   this the eyebrow and lede float to the middle while the panel stays
   full-width, and the block reads as broken. */
.ts-ev .ts-ev__eyebrow {
  font-family: var(--tse-mono);
  font-size: .688rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tse-emerald);
  max-width: none;
  margin: 0 0 .6rem;
}

.ts-ev .ts-ev__lede {
  color: var(--tse-dim);
  font-size: .938rem;
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 auto 1.5rem 0;
}

.ts-ev__panel {
  border: 1px solid var(--tse-line);
  border-radius: 6px;
  background: rgba(8, 11, 17, 0.72);
  overflow: hidden;
}

.ts-ev__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--tse-line);
  background: rgba(148, 163, 184, 0.05);
  font-family: var(--tse-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tse-dim);
}

.ts-ev__tag {
  color: var(--tse-emerald);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: .18rem .45rem;
  white-space: nowrap;
}

/* The record. Scrolls inside its own box so the page never scrolls sideways. */
.ts-ev__code {
  margin: 0;
  padding: 1.1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--tse-mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--tse-ink);
  tab-size: 2;
}

.ts-ev__code .k { color: var(--tse-key); }
.ts-ev__code .s { color: var(--tse-str); }
.ts-ev__code .n { color: var(--tse-num); }
.ts-ev__code .c { color: #64748b; font-style: italic; }

/* What a reviewer should actually look for — turns the artefact into a claim. */
.ts-ev__notes {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.75rem;
}

.ts-ev__notes li {
  border-top: 1px solid var(--tse-line);
  padding-top: .75rem;
  color: var(--tse-dim);
  font-size: .875rem;
  line-height: 1.55;
}

.ts-ev__notes strong {
  display: block;
  color: var(--tse-ink);
  font-size: .813rem;
  font-weight: 600;
  margin-bottom: .2rem;
}

@media (max-width: 640px) {
  .ts-ev__code { font-size: .72rem; }
}