/* ============================================================
   FIELD GUIDE — read-through comprehension mode (meta.mode==='guide').
   Themes off the same CSS vars as the rest of the app.
   ============================================================ */
.view.guide{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:2.4rem; align-items:start }

/* --- left rail: the guide's own section map --- */
.g-rail{ position:sticky; top:4.6rem; align-self:start; max-height:calc(100dvh - 6rem); overflow-y:auto; overscroll-behavior:contain; padding-right:.3rem }
.g-exit{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:1.1rem; transition:.15s }
.g-exit:hover{ color:var(--amber) }
.g-rail-head{ margin-bottom:1rem }
.g-kicker{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:.35rem }
.g-rail-title{ font-family:'Fraunces',serif; font-weight:800; font-size:1.18rem; line-height:1.12; color:var(--ink) }
.g-prog{ display:flex; align-items:center; gap:.55rem; margin-top:.7rem }
.g-prog-bar{ flex:1; height:5px; background:var(--bg-2); border-radius:3px; overflow:hidden }
.g-prog-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--green)); transition:width .5s }
.g-prog span{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--ink-faint) }

.g-toc{ display:flex; flex-direction:column; gap:.05rem; border-left:1px solid var(--line); margin-top:.4rem }
.g-toc-item{ display:flex; align-items:baseline; gap:.55rem; padding:.5rem .6rem; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-dim); font-size:.86rem; line-height:1.25; transition:.15s }
.g-toc-item:hover{ color:var(--ink); background:var(--panel) }
.g-toc-item.cur{ color:var(--amber); border-left-color:var(--amber); background:color-mix(in srgb, var(--amber) 9%, transparent) }
.g-toc-item.done .g-toc-n{ color:var(--green) }
.g-toc-n{ font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--ink-faint); flex-shrink:0 }
.g-toc-item.cur .g-toc-n{ color:var(--amber) }

/* --- body: the readable column --- */
.g-body{ max-width:760px; min-width:0 }
.g-sec-head{ margin-bottom:1.6rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line) }
.g-sec-meta{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:.5rem }
.g-sec-title{ font-family:'Fraunces',serif; font-weight:800; font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.08; letter-spacing:-.01em }

/* content typography — tuned for reading + understanding */
.g-content{ font-size:1.06rem; line-height:1.68; color:var(--ink-dim) }
.g-content > *:first-child{ margin-top:0 }
.g-content p{ margin:1rem 0 }
.g-content .lead{ font-size:1.18rem; color:var(--ink); border-left:3px solid var(--amber); padding-left:1.1rem; margin:0 0 1.6rem }
.g-content h3{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:700; color:var(--gold); margin:2.2rem 0 .7rem; line-height:1.15 }
.g-content h4{ font-size:1.05rem; font-weight:700; color:var(--ink); margin:1.6rem 0 .5rem }
.g-content ul,.g-content ol{ margin:.9rem 0 .9rem 1.3rem }
.g-content li{ margin:.45rem 0 }
.g-content strong,.g-content b{ color:var(--ink); font-weight:700 }
.g-content code{ font-family:'JetBrains Mono',monospace; font-size:.86em; background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:.08em .38em; color:var(--gold) }
.g-content a{ color:var(--amber); text-decoration:underline; text-decoration-color:var(--line-2) }

/* --- callouts: How it works / What's weak / How pros do it / Build your own --- */
.g-call{ margin:1.5rem 0; padding:1rem 1.2rem 1.05rem; border:1px solid var(--line-2); border-left-width:3px; border-radius:0 12px 12px 0; background:var(--panel) }
.g-call .g-call-h{ font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:.5rem }
.g-call p{ margin:.5rem 0 0; font-size:.98rem; color:var(--ink-dim) }
.g-call p:first-of-type{ margin-top:0 }
.g-call.good{ border-left-color:var(--green) } .g-call.good .g-call-h{ color:var(--green) }
.g-call.warn{ border-left-color:var(--ember); background:color-mix(in srgb, var(--ember) 7%, var(--panel)) } .g-call.warn .g-call-h{ color:var(--ember) }
.g-call.pro{ border-left-color:var(--blue) } .g-call.pro .g-call-h{ color:var(--blue) }
.g-call.build{ border-left-color:var(--amber) } .g-call.build .g-call-h{ color:var(--amber) }

/* --- figures / diagrams --- */
.g-fig{ margin:1.8rem 0; padding:1.2rem; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; overflow-x:auto }
.g-fig svg{ display:block; width:100%; height:auto; max-width:100% }
.g-fig figcaption{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.04em; color:var(--ink-faint); text-align:center; margin-top:.9rem }
/* diagram primitives a content author can lean on (currentColor-friendly) */
.g-fig .dia-box{ fill:var(--panel); stroke:var(--line-2) }
.g-fig .dia-accent{ fill:color-mix(in srgb, var(--amber) 16%, var(--panel)); stroke:var(--amber) }
.g-fig .dia-txt{ fill:var(--ink); font-family:'Hanken Grotesk',sans-serif; font-size:13px }
.g-fig .dia-sub{ fill:var(--ink-faint); font-family:'JetBrains Mono',monospace; font-size:10px }
.g-fig .dia-line{ stroke:var(--line-2); stroke-width:2; fill:none }
.g-fig .dia-arrow{ fill:var(--amber) }

/* --- prev/next footer --- */
.g-foot-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line) }
.g-navbtn{ display:flex; flex-direction:column; gap:.2rem; padding:.85rem 1.1rem; border:1px solid var(--line-2); border-radius:12px; min-width:0; max-width:48%; transition:.16s }
.g-navbtn:hover{ border-color:var(--amber); background:var(--panel) }
.g-navbtn.ghost{ border:none; background:none; pointer-events:none }
.g-navbtn.next{ text-align:right; margin-left:auto }
.g-navbtn.fin{ border-color:var(--green-deep) }
.g-navbtn.fin:hover{ border-color:var(--green) }
.g-navdir{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-deep) }
.g-navbtn.fin .g-navdir{ color:var(--green) }
.g-navlbl{ font-size:.92rem; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

@media (max-width:860px){
  .view.guide{ grid-template-columns:1fr; gap:1.2rem }
  .g-rail{ position:static; max-height:none; overflow:visible; border-bottom:1px solid var(--line); padding-bottom:1rem; margin-bottom:.6rem }
  .g-toc{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem }
  .g-body{ max-width:none }
  .g-navlbl{ display:none }
}