/* css/site.css - layout, components, motion, drawer, responsive. Ported
   verbatim from the verified docs/design/2026-08-30-thegrove-network/
   direction-chosen.html - do not restyle without re-running the designer's
   contrast/touch-target/focus-order pass documented in decision.md. */
*{box-sizing:border-box;}
html,body{background:var(--bg);}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:960px;
  margin:0 auto;
  padding:32px 20px 96px;
}

/* terminal window chrome */
.term{
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.term-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.term-dot{width:11px;height:11px;border-radius:50%;background:var(--rule);flex:none;}
.term-dot.r{background:#C2643A;}
.term-dot.y{background:var(--accent);}
.term-dot.g{background:#4E7A5B;}
.term-title{
  margin-left:8px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
}
.term-body{padding:28px 24px 36px;}
@media (min-width:768px){
  .term-body{padding:40px 48px 56px;}
}

/* prompt line */
.prompt-line{
  font-size:15px;
  margin:0 0 28px;
  color:var(--text);
}
.prompt-user{color:var(--accent);}
.prompt-sep,.prompt-path{color:var(--muted);}
.prompt-path{margin-right:.5ch;}
.prompt-cmd{color:var(--text);}
.cursor{
  display:inline-block;
  width:8px;height:1em;
  background:var(--accent);
  margin-left:2px;
  vertical-align:text-bottom;
  animation:blink 1.2s step-end infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none !important;opacity:1;}
}

/* identity blurb - always visible, never gated */
.identity{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  margin-bottom:32px;
  padding-bottom:28px;
  border-bottom:1px solid var(--rule);
}
@media (min-width:768px){
  .identity{flex-direction:row;align-items:center;gap:22px;}
}
/* Root mark: substantially larger than every child badge, no frame - the mark carries
   itself. Sized to read clearly at a glance (ring, three conifers, gold heart, node-graph
   root system), at least as large as Direction C's rendering of the same mark. */
.root-glyph{
  flex:none;
  width:92px;height:92px;
  display:flex;align-items:center;justify-content:center;
}
@media (min-width:768px){
  .root-glyph{width:128px;height:128px;}
}
.root-glyph img{
  width:100%;height:100%;
  clip-path:circle(50% at 50% 50%);
  object-fit:cover;
}
.identity-text{
  margin:0;
  font-size:14px;
  color:var(--text);
  max-width:56ch;
}
@media (min-width:768px){
  .identity-text{font-size:15px;}
}

/* tree */
.tree{list-style:none;margin:0;padding:0;}
.tree-item{margin:0;}
.child-list{list-style:none;margin:0;padding:0;}

.node-row{
  all:unset;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  width:100%;
  gap:.4ch;
  padding:10px 8px;
  border-radius:6px;
  cursor:pointer;
  min-height:44px;
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  text-align:left;
}
@media (max-width:767px){
  .node-row{padding:13px 6px;font-size:13.5px;}
}
.node-row:hover{background:var(--surface);}
.node-row:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  background:var(--surface);
}

.prefix{color:var(--rule);white-space:pre;flex:none;}
.prefix--light{opacity:.65;}

.rule{
  display:inline-block;
  overflow:hidden;
  white-space:pre;
  color:var(--rule);
  width:3ch;
  flex:none;
}
.rule--child{width:3ch;opacity:.65;}
/* Desktop indent: the top-level badges' left edge is aligned to the left edge of the
   identity blurb text, so the tree hangs off the same vertical as the copy above it
   rather than floating far to its right. 13.6ch is the measured value that lands a
   top-level badge at the blurb's x. The child rule adds one deliberate step (the 4ch
   child prefix plus 4ch more rule), putting nested badges ~72px in - clearly nested,
   without reopening the long empty connector runs this replaced. */
@media (min-width:768px){
  .rule{width:13.6ch;}
  .rule--child{width:17.5ch;}
}
.rule.draw{
  clip-path:inset(0 100% 0 0);
  animation:draw-rule .5s ease forwards;
  animation-delay:var(--delay,0ms);
}
@keyframes draw-rule{to{clip-path:inset(0 0% 0 0);}}

.node-content{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  min-width:0;
  opacity:1;
}
.node-content.reveal{
  opacity:0;
  transform:translateX(-6px);
  animation:reveal-node .4s ease forwards;
  animation-delay:calc(var(--delay,0ms) + 150ms);
}
@keyframes reveal-node{to{opacity:1;transform:none;}}

/* Circle badge IS the node - no hairline frame, no rounded-square slot, no backing chip.
   One uniform diameter for every non-root mark, top-level and thegrove.media's children
   alike; the two opaque-square source images (hitl.png, twelfth-help.png) still get the
   hard circular clip below so they don't render as literal squares, but nothing else is
   added to mediate the heterogeneity - that unmediated read is deliberate. 56px clears the
   44px touch-target minimum on its own, no padded hit-area trick needed. */
.glyph{
  flex:none;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
}
.glyph img{
  width:100%;height:100%;
  object-fit:cover;
  clip-path:circle(50% at 50% 50%);
}
.glyph.llc-mark img{
  filter:brightness(1.45) contrast(1.2);
}

.node-name{
  color:var(--text);
  font-weight:500;
}
@media (min-width:768px){
  .node-name{white-space:nowrap;}
}
.node-caret{
  display:none;
  color:var(--muted);
  font-size:12px;
  flex:none;
}
@media (min-width:768px){
  .node-caret{display:inline-block;}
}
.node-row:hover .node-caret,
.node-row:focus-visible .node-caret{
  color:var(--accent);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---- right drawer, ported from Direction B's filmstrip-derived drawer, restyled to
   Direction A's shanku.net dark-forest palette + JetBrains Mono ---- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:all; }

.drawer{
  position:fixed; right:0; top:0; bottom:0; width:75vw; max-width:640px;
  background:var(--surface); border-left:1px solid var(--rule);
  z-index:201; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.drawer.open{ transform:translateX(0); }

.drawer-close{
  position:absolute; top:16px; right:20px; width:32px; height:32px; z-index:10;
  background:var(--bg); border:1px solid var(--rule); border-radius:4px;
  color:var(--text); font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.drawer-close:hover{ background:var(--surface); color:var(--accent); border-color:var(--accent); }
.drawer-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.drawer-hero{ position:relative; height:220px; background:var(--bg); border-bottom:1px solid var(--rule); }
.drawer-hero-img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

.drawer-body{ padding:26px 30px 52px; }
.drawer-num{ font-size:11.5px; color:var(--accent-hover); letter-spacing:.12em; margin-bottom:6px; }
.drawer-name{ font-size:23px; font-weight:700; color:var(--text); line-height:1.2; margin:0; }
.drawer-url{ margin-top:6px; font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.drawer-tag{ margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.55; }

.drawer-visit{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:12.5px;
  padding:9px 16px; border-radius:2px; text-decoration:none; letter-spacing:.02em;
}
.drawer-visit:hover{ background:var(--accent-hover); }
.drawer-visit:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.drawer-divider{ border:none; border-top:1px solid var(--rule); margin:22px 0; }
.drawer-section{ margin-bottom:20px; }
.drawer-label{
  /* --accent-hover (#DDA22A), not --accent: at 10-11px on --surface the base
     gold measures 4.75:1, only 0.25 above the AA floor. The lighter gold
     clears it with real margin at the smallest type on the page. */
  font-size:10.5px; color:var(--accent-hover); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;
}
.drawer-content{ font-size:14.5px; color:var(--muted); line-height:1.65; margin:0; }

.drawer-stack{ display:flex; flex-wrap:wrap; gap:8px; }
.drawer-stack-item{
  font-size:11.5px; color:var(--muted); background:rgba(194,138,5,.08);
  border:1px solid var(--rule); padding:4px 10px; border-radius:2px;
}

.drawer-quote{
  margin:22px 0 0; border-left:2px solid var(--accent); padding:10px 0 10px 18px;
  font-size:16px; color:var(--text); line-height:1.5;
}

@media (max-width: 767.98px){
  .drawer{
    width:100%; max-width:100%; height:85vh; top:auto; bottom:0; right:0; left:0;
    border-left:none; border-top:1px solid var(--rule); border-radius:12px 12px 0 0;
    transform:translateY(100%);
  }
  .drawer.open{ transform:translateY(0); }
}