/* TreeTrace.dev - shared shell: top nav + footer + reusable primitives.
   Identical on every page. Pages add only their own page-*.css on top. */

/* =========================================================
   SHARED PRIMITIVES
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--tt-font-mono);font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tt-ash);
}
.eyebrow .tick{width:7px;height:7px;border-radius:50%;background:var(--tt-signal);
  box-shadow:0 0 0 3px rgba(46,91,255,.16);flex:none}

h1,h2,h3{font-family:var(--tt-font-display);letter-spacing:-.02em;line-height:1.04;color:var(--tt-paper);overflow-wrap:break-word}

.lead{font-family:var(--tt-font-serif);font-style:italic;color:var(--tt-ash);
  font-size:18px;line-height:1.5}

/* PERF: skip painting/layout for off-screen sections during scroll.

/* PERF: freeze the tiny looping indicators (live dots, blink cursors) while
   the page is actively scrolling so they don't repaint mid-scroll. */
body.is-scrolling .live i,
body.is-scrolling .seal i,
body.is-scrolling .progress i,
body.is-scrolling .blink{animation-play-state:paused}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--tt-font-mono);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px;border-radius:9px;border:1px solid var(--tt-line);
  background:transparent;color:var(--tt-paper);cursor:pointer;
  transition:border-color .2s var(--tt-ease),background .2s var(--tt-ease),transform .15s var(--tt-ease);
}
.btn:hover{border-color:rgba(155,160,166,.4);background:rgba(255,255,255,.03)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}

.btn--primary{
  background:var(--tt-signal);color:var(--tt-on-signal);border-color:transparent;
  box-shadow:0 8px 22px -8px rgba(46,91,255,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{background:var(--tt-signal-dim);border-color:transparent}
.btn--ghost{color:var(--tt-ash)}
.btn--ghost:hover{color:var(--tt-paper)}
.btn--sm{padding:9px 13px;font-size:11.5px}

/* External-link arrow */
.ext::after{content:"↗";font-size:.85em;margin-left:.1em;color:var(--tt-ash)}

/* Copy-snippet pill (used by copy.js) */
.snippet{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--tt-font-mono);font-size:14px;color:var(--tt-paper);
  padding:11px 14px;border-radius:9px;border:1px solid var(--tt-line);
  background:rgba(8,9,11,.55);max-width:100%;
}
.snippet .p{color:var(--tt-signal);font-weight:700;flex:none}
.snippet code{font-family:var(--tt-font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snippet .copy{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tt-ash);
  background:transparent;border:1px solid var(--tt-line);border-radius:6px;
  padding:5px 9px;cursor:pointer;transition:color .2s,border-color .2s;
}
.snippet .copy:hover{color:var(--tt-paper);border-color:rgba(155,160,166,.4)}
.snippet .copy.is-copied{color:var(--tt-signal);border-color:rgba(46,91,255,.5)}
.snippet .copy svg{width:13px;height:13px}

/* =========================================================
   TOP NAV (fixed, mono uppercase)
   ========================================================= */
.tt-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--tt-nav-h);
  display:flex;align-items:center;
  background:rgba(11,12,14,.72);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--tt-line);
}
.tt-nav__inner{
  width:100%;max-width:var(--tt-wrap);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:20px;
}
.tt-brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.tt-brand img{width:28px;height:28px;display:block}
.tt-brand .word{font-family:var(--tt-font-display);font-weight:800;font-size:18px;
  letter-spacing:-.02em;color:var(--tt-paper)}

.tt-nav__links{display:flex;align-items:center;gap:6px;margin-left:18px}
.tt-nav__links a{
  position:relative;font-family:var(--tt-font-mono);font-size:11.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tt-ash);
  padding:8px 12px;border-radius:6px;transition:color .2s var(--tt-ease);
}
.tt-nav__links a:hover{color:var(--tt-paper)}
.tt-nav__links a[aria-current="page"]{color:var(--tt-paper)}
.tt-nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--tt-signal);border-radius:2px;
  box-shadow:0 0 8px rgba(46,91,255,.5);
}

.tt-nav__right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tt-nav__right .gh{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tt-ash);
  display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:6px;transition:color .2s}
.tt-nav__right .gh:hover{color:var(--tt-paper)}
.tt-nav__right .gh svg{width:16px;height:16px;fill:currentColor}

/* hamburger */
.tt-burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--tt-line);
  border-radius:8px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.tt-burger span{display:block;width:18px;height:2px;background:var(--tt-paper);border-radius:2px;transition:transform .25s var(--tt-ease),opacity .2s}
.tt-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.tt-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tt-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile slide-in panel */
.tt-mobile{
  position:fixed;inset:0;z-index:99;display:none;
}
.tt-mobile__scrim{position:absolute;inset:0;background:rgba(6,7,9,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s var(--tt-ease)}
.tt-mobile__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(82vw,340px);
  background:var(--tt-surface);border-left:1px solid var(--tt-line);
  padding:calc(var(--tt-nav-h) + 16px) 24px 28px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);transition:transform .3s var(--tt-ease);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.7);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.tt-mobile.is-open{display:block}
.tt-mobile.is-open .tt-mobile__scrim{opacity:1}
.tt-mobile.is-open .tt-mobile__panel{transform:translateX(0)}
.tt-mobile__panel a{
  font-family:var(--tt-font-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tt-ash);padding:14px 4px;border-bottom:1px solid var(--tt-line-2);transition:color .2s}
.tt-mobile__panel a:hover,.tt-mobile__panel a[aria-current="page"]{color:var(--tt-paper)}
.tt-mobile__panel a[aria-current="page"]{border-left:2px solid var(--tt-signal);padding-left:12px}
.tt-mobile__panel .m-cta{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.tt-mobile__panel .m-cta a{border-bottom:0}
.tt-mobile__panel .m-cta a.btn{padding:14px 18px}

/* =========================================================
   FOOTER
   ========================================================= */
.tt-footer{
  border-top:1px solid var(--tt-line);margin-top:120px;
  background:linear-gradient(180deg, transparent, rgba(46,91,255,.025));
}
.tt-footer__inner{max-width:var(--tt-wrap);margin:0 auto;padding:64px 28px 40px}

/* telemetry strip flourish */
.tt-telemetry{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  font-family:var(--tt-font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tt-ash-2);padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--tt-line);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.tt-telemetry .ti{display:inline-flex;align-items:center;gap:8px}
.tt-telemetry .ti b{color:var(--tt-ash);font-weight:700}
.tt-telemetry .live{color:var(--tt-signal)}
.tt-telemetry .live i{width:6px;height:6px;border-radius:50%;background:var(--tt-signal);display:inline-block;
  box-shadow:0 0 8px var(--tt-signal);margin-right:6px}
.tt-telemetry .blink{animation:tt-blink 1.1s steps(2,start) infinite}
@keyframes tt-blink{50%{opacity:0}}

.tt-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.tt-footer__brand .tt-brand{margin-bottom:14px}
.tt-footer__brand .tag{font-family:var(--tt-font-mono);font-size:13px;color:var(--tt-ash);max-width:300px;line-height:1.6}
.tt-fcol h5{font-family:var(--tt-font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tt-ash-2);margin-bottom:16px;font-weight:700}
.tt-fcol a{display:block;font-family:var(--tt-font-mono);font-size:13px;color:var(--tt-ash);
  padding:6px 0;transition:color .2s}
.tt-fcol a:hover{color:var(--tt-paper)}

.tt-footer__bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
  margin-top:54px;padding-top:26px;border-top:1px solid var(--tt-line);
  font-family:var(--tt-font-mono);font-size:11.5px;color:var(--tt-ash-2)}
.tt-footer__bottom a{color:var(--tt-ash)}
.tt-footer__bottom a:hover{color:var(--tt-paper)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:920px){
  .tt-nav__links,.tt-nav__right{display:none}
  .tt-burger{display:flex}
  .tt-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .tt-footer__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .tt-footer__grid{grid-template-columns:1fr 1fr;gap:26px}
  .tt-footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Touch-target sizing on coarse (touch) pointers - >=44px tap area, >=8px gap */
@media (pointer:coarse){
  .tt-fcol a{padding:11px 0}
  .tt-footer__bottom{gap:12px 24px}
  .tt-footer__bottom a{display:inline-block;padding:8px 0}
  .snippet .copy,.codeblock .copy,.codeblock__bar .copy,.replay-btn{min-height:44px}
  .tt-mobile__panel a{padding:15px 4px}
}