/* ============================================================
   STARESBACK.GG — trust.css (about.html + legal.html)
   Prefix: .tr- only. Leans hard on styles.css — .sec/.sec-head/
   .sec-num/.sec-title/.status/.dot/.dossier-grid/.d-card stay
   stock. This file only adds what the trust pages need.
   ============================================================ */

/* ---- layout shell (mirrors .arc-main / .acc-main) ---- */
.tr-main { padding-top: calc(var(--hud-h) + 30px); min-height: 100vh; position: relative; z-index: 1; }
.tr-head { padding: clamp(28px, 5vh, 60px) clamp(20px, 5vw, 64px) 8px; max-width: 1180px; margin: 0 auto; }
.tr-eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--amber); margin-bottom: 14px; }
.tr-title {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(2rem, 6vw, 4.4rem); text-transform: uppercase; line-height: 1.02;
  margin-bottom: 16px;
}
.tr-title em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--acid); }
.tr-sub { color: var(--ink-dim); font-size: 15px; max-width: 720px; line-height: 1.65; }
.tr-sub b { color: var(--ink); }
.tr-stamp { margin-top: 14px; font-size: 10px; letter-spacing: .18em; color: var(--ink-mute); }
.tr-stamp b { color: var(--acid); font-weight: 500; }

/* these pages have no page engine to run the scroll-reveal, so —
   like admin.css — the global .sec/.foot fade-in must never hide
   the legal text from anyone (humans, crawlers, lawyers) */
.tr-show { opacity: 1 !important; transform: none !important; }

/* anchored jumps must clear the fixed HUD */
.tr-jump { scroll-margin-top: calc(var(--hud-h) + 24px); }

/* ---- anchored section nav (legal) ---- */
.tr-anchors {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 20px clamp(20px, 5vw, 64px) 0;
  max-width: 1180px; margin: 0 auto;
}
.tr-anchors a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--ink-dim); background: var(--panel);
  border: 1px solid var(--line-hi); padding: 8px 14px;
  transition: color .2s, border-color .2s, background .2s;
}
.tr-anchors a:hover { color: var(--acid); border-color: var(--acid-dim); background: var(--acid-soft); }
.tr-anchors a b { color: var(--acid); font-weight: 600; margin-right: 6px; }

/* ---- prose ---- */
.tr-prose { max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.tr-prose p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.7; }
.tr-prose b, .tr-prose strong { color: var(--ink); font-weight: 600; }
.tr-prose em { color: var(--mag); font-style: normal; }
.tr-prose a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.tr-prose a:hover { color: #D2FF6B; }
.tr-prose .mono { font-size: 13px; }

/* small mono sub-headings inside a section */
.tr-h {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em;
  color: var(--ink-mute); text-transform: uppercase;
  margin-top: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* ---- lists ---- */
.tr-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tr-list li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--ink-dim); font-size: 14px; line-height: 1.65;
}
.tr-list li::before { content: '▸'; color: var(--acid); flex-shrink: 0; font-family: var(--f-mono); }
.tr-list li b { color: var(--ink); font-weight: 600; }
.tr-list li a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.tr-list li a:hover { color: #D2FF6B; }

/* ---- callout (kin of .dossier-note) ---- */
.tr-callout {
  max-width: 780px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.9;
  color: var(--acid); border: 1px dashed rgba(184, 255, 47, .4);
  background: var(--acid-soft); padding: 14px 17px;
}
.tr-callout b { color: var(--ink); }
.tr-callout--amber { color: var(--amber); border-color: rgba(255, 185, 56, .4); background: var(--amber-soft); }

/* ---- source cards (about) ---- */
.tr-srcgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); max-width: 980px; }
.tr-src {
  display: block;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); padding: 18px;
  transition: border-color .25s, transform .25s;
}
.tr-src:hover { border-color: var(--acid-dim); transform: translateY(-3px); }
.tr-src-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; color: var(--ink-mute); margin-bottom: 10px; text-transform: uppercase; }
.tr-src-name { font-family: var(--f-disp); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.tr-src-role { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin-bottom: 12px; }
.tr-src-link { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.tr-src:hover .tr-src-link { color: #D2FF6B; }

/* ---- network table (legal · privacy) ---- */
.tr-net { width: 100%; max-width: 880px; border: 1px solid var(--line); border-collapse: collapse; background: var(--panel); }
.tr-net th {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; font-weight: 500;
  color: var(--ink-mute); text-align: left; text-transform: uppercase;
  background: var(--panel-2); padding: 11px 14px; border-bottom: 1px solid var(--line-hi);
}
.tr-net td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tr-net tr:last-child td { border-bottom: 0; }
.tr-net .tr-net-host {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--acid); width: 36%; word-break: break-word;
  border-right: 1px solid var(--line);
}
.tr-net .tr-net-why { font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.tr-net .tr-net-why b { color: var(--ink); font-weight: 600; }

/* ---- contact block ---- */
.tr-contact {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line-hi); background: var(--panel);
  padding: 15px 19px; clip-path: var(--chamfer);
}
.tr-contact-glyph { font-size: 22px; filter: drop-shadow(0 0 10px rgba(184, 255, 47, .5)); }
.tr-contact-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .22em; color: var(--ink-mute); }
.tr-contact a {
  display: block; font-family: var(--f-mono); font-size: 14px; font-weight: 600;
  letter-spacing: .05em; color: var(--acid);
  text-decoration: underline; text-underline-offset: 3px; margin-top: 3px;
}
.tr-contact a:hover { color: #D2FF6B; }

/* ---- back-to-anchors link (legal) ---- */
.tr-top {
  align-self: flex-start;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--ink-mute); border: 1px solid var(--line); padding: 6px 11px;
  transition: color .2s, border-color .2s;
}
.tr-top:hover { color: var(--acid); border-color: var(--acid-dim); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .tr-anchors a { flex: 1 1 calc(50% - 8px); text-align: center; }
  .tr-prose p, .tr-list li { font-size: 13.5px; }
  /* stack the network table — hosts become row headers */
  .tr-net thead { display: none; }
  .tr-net, .tr-net tbody, .tr-net tr, .tr-net td { display: block; width: 100%; }
  .tr-net .tr-net-host { width: 100%; border-right: 0; border-bottom: 0; background: var(--panel-2); padding-bottom: 8px; }
  .tr-net .tr-net-why { padding-top: 10px; }
  .tr-contact { width: 100%; }
}