/* Trace — the story between two things. Site language: cream ground, paper
   cards, rust accents, Inter. Nav mirrors the saves/mission header. */
.tr-page{background:var(--bg);min-height:100vh}

.tr-nav{
  display:flex;align-items:center;gap:26px;
  height:49px;padding:0 clamp(20px,2.5vw,48px);   /* shared header geometry */
  border-bottom:1px solid rgba(var(--ink-rgb),.5);
  font-size:13px;font-weight:500;
}
.tr-logo{font-weight:900;font-size:19px;letter-spacing:-.03em;flex:none}
.tr-logo span{color:var(--accent)}
.tr-nav-links{display:flex;gap:18px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tr-nav-links::-webkit-scrollbar{display:none}
.tr-nav-links a{white-space:nowrap;color:var(--mute)}
.tr-nav-links a:hover{color:var(--ink)}
.tr-nav-links a.is-active{color:var(--ink);font-weight:700}
.tr-nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}

.tr-main{max-width:840px;margin:0 auto;padding:clamp(28px,4vw,56px) 20px 80px}
.tr-kicker{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.tr-title{font-size:clamp(38px,6vw,64px);font-weight:900;letter-spacing:-.04em;margin:0 0 10px;line-height:.95}
.tr-dot{display:inline-block;width:.14em;height:.14em;background:var(--accent);margin-left:.04em}
.tr-lead{margin:0 0 30px;color:var(--mute);font-size:13.5px;line-height:1.65;max-width:56ch}

.tr-form{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  background:var(--paper);border:1px solid rgba(var(--ink-rgb),.18);
  padding:16px;border-radius:12px;
}
.tr-field{flex:1;min-width:170px;display:flex;flex-direction:column;gap:6px}
.tr-label{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.tr-input{
  font:500 14px/1.2 Inter,system-ui,sans-serif;color:var(--ink);
  background:var(--bg);border:1px solid rgba(var(--ink-rgb),.22);
  padding:11px 13px;border-radius:8px;outline:none;width:100%;
}
.tr-input:focus{border-color:var(--accent)}
.tr-swap{
  flex:none;width:38px;height:40px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(var(--ink-rgb),.22);background:none;color:var(--mute);
  font-size:15px;
}
.tr-swap:hover{color:var(--ink);border-color:var(--ink)}
.tr-go{
  flex:none;font:700 13px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:13px 22px;border-radius:999px;
}
.tr-go:hover{background:var(--accent);border-color:var(--accent)}
.tr-surprise{
  flex:none;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:none;color:var(--ink);border:1px solid rgba(var(--ink-rgb),.3);
  padding:13px 18px;border-radius:999px;
}
.tr-surprise:hover{background:var(--ink);color:var(--paper)}

.tr-status{margin:18px 2px 0;font-size:13px;color:var(--mute);min-height:1.2em}
.tr-status.is-err{color:var(--accent)}

.tr-result{margin-top:26px;display:flex;flex-direction:column}
.tr-node{
  display:flex;align-items:center;gap:16px;
  background:var(--paper);border:1px solid rgba(var(--ink-rgb),.18);
  border-radius:12px;padding:14px 16px;
  text-decoration:none;color:inherit;
  transition:border-color .15s;
}
.tr-node:hover{border-color:var(--ink)}
.tr-node-img,.tr-node-imgempty{
  width:64px;height:64px;flex:0 0 64px;border-radius:8px;object-fit:cover;
  background:rgba(var(--ink-rgb),.08);display:block;
}
.tr-node-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.tr-node-name{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.tr-node-role{
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.tr-node-tag{font-size:11.5px;color:var(--mute);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr-node-open{margin-left:auto;flex:none;font-size:11px;font-weight:600;color:var(--mute);white-space:nowrap}
.tr-node:hover .tr-node-open{color:var(--accent)}

.tr-hop{
  display:flex;align-items:center;gap:12px;
  padding:6px 0 6px 46px;position:relative;
}
.tr-hop::before{
  content:"";position:absolute;left:31px;top:-8px;bottom:-8px;width:2px;
  background:rgba(var(--accent-rgb),.5);
}
.tr-hop-txt{font-size:11.5px;color:var(--mute);font-style:italic;line-height:1.5;padding:6px 0}
.tr-hop-txt b{color:var(--ink);font-style:normal}

.tr-share{margin-top:26px}
.tr-share-btn{
  font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;
  background:none;color:var(--ink);border:1px solid rgba(var(--ink-rgb),.3);
  padding:11px 18px;border-radius:999px;
}
.tr-share-btn:hover{background:var(--ink);color:var(--paper)}

@media (max-width:640px){
  .tr-swap{display:none}
  .tr-form{padding:12px}
  .tr-go,.tr-surprise{flex:1;text-align:center;justify-content:center}
}

/* Researched connection facts in Trace (2026-07-22) — real, sourced statements
   sit above the old italic fallback tone; the source is a small rust citation. */
.tr-hop-fact{color:var(--ink);font-style:normal;font-weight:500}
.tr-hop-src{
  font-style:normal;font-weight:600;font-size:9.5px;
  color:var(--accent);white-space:nowrap;margin-left:4px;
  text-transform:uppercase;letter-spacing:.04em;
}
.tr-hop-src:hover{text-decoration:underline}