/* ==========================================================================
   gmux — the field guide · tutorial.css
   Forest palette, paper background, zero external requests.
   ========================================================================== */

:root{
  --paper:   #fafbf3;
  --ink:     #1a201a;
  --ink-2:   #3c443c;
  --ink-3:   #5a6058;
  --muted:   #98a093;
  --green:   #3d7a4e;
  --green-2: #6ba376;
  --clay:    #b25a38;
  --surface: #edefe6;
  --hairline:#cfd4c2;
  --card:    #fffdf7;
  --green-t: #e7f0e7;
  --clay-t:  #f5e4da;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(26,32,26,.05), 0 6px 24px -12px rgba(26,32,26,.14);
  --nav-h: 58px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
}
img, svg{ max-width:100%; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; letter-spacing:-.015em; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:700; }
h3{ font-size:1.12rem; font-weight:650; margin-top:1.9em; color:var(--ink); }
h4{ font-size:.92rem; font-weight:650; margin:0 0 .4em; }
p{ margin:0 0 1em; }
a{ color:var(--green); text-underline-offset:2px; }
a:hover{ color:var(--ink); }
code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:.08em .38em;
  white-space:nowrap;
}
strong{ font-weight:650; }
em{ font-style:italic; }

.wrap{ max-width:1060px; margin:0 auto; padding:0 24px; }

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:10px 18px; border-radius:0 0 10px 0; z-index:100;
}
.skip:focus{ left:0; }

/* ---------- progress bar ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:transparent; z-index:60; pointer-events:none;
}
.progress-bar{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--green-2), var(--green));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,251,243,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav-row{
  display:flex; align-items:center; gap:18px;
  height:var(--nav-h);
}
.logo{
  font-weight:800; font-size:1.35rem; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none; flex:none;
}
.logo-dot{ color:var(--green); }
.navlinks{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  flex:1; min-width:0;
  -webkit-overflow-scrolling:touch;
}
.navlinks::-webkit-scrollbar{ display:none; }
.navlinks a{
  flex:none;
  color:var(--ink-3); text-decoration:none;
  font-size:.86rem; font-weight:550;
  padding:6px 11px; border-radius:999px;
  transition:background .15s, color .15s;
}
.navlinks a:hover{ color:var(--ink); background:var(--surface); }
.navlinks a.active{
  color:var(--paper); background:var(--green);
}
.navlinks a:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.nav-cta{
  flex:none;
  font-size:.84rem; font-weight:600; text-decoration:none;
  color:var(--ink); border:1.5px solid var(--ink);
  padding:7px 14px; border-radius:999px;
  transition:background .15s, color .15s;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }

/* ---------- hero ---------- */
.hero{ padding:72px 24px 40px; }
.hero .kicker{ margin-bottom:14px; }
.hero h1{
  font-size:clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight:800; letter-spacing:-.03em;
  margin-bottom:.4em;
}
.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  color:var(--ink-2); max-width:46em;
  margin-bottom:2em;
}
.orient{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 28px;
  margin-bottom:2.2em;
}
.orient-h{
  font-size:.95rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); margin-bottom:.8em;
}
.chips-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:1.6em 0 1.4em;
}

/* ---------- kicker ---------- */
.kicker{
  font-family:var(--mono);
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green);
  margin-bottom:.6em;
}

/* ---------- cards / sections ---------- */
.card{
  background:var(--card);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:0 auto 34px;
  max-width:1060px;
  scroll-margin-top:calc(var(--nav-h) + 18px);
}
.card > .wrap{ padding:44px 24px 40px; }
.card .intro{
  font-size:1.06rem; color:var(--ink-2);
  max-width:44em; margin-bottom:1.4em;
}
.card-final{ border:1.5px solid var(--green-2); }

/* ---------- steps ---------- */
.steps{
  counter-reset:step;
  list-style:none;
  margin:0 0 1.4em; padding:0;
}
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 14px 44px;
  margin:0;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:1px;
  width:28px; height:28px;
  background:var(--green-t);
  color:var(--green);
  border:1.5px solid var(--green-2);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.82rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps li::after{
  content:"";
  position:absolute; left:13.5px; top:34px; bottom:2px;
  width:1.5px; background:var(--hairline);
}
.steps li:last-child::after{ display:none; }
.steps-continue{ counter-reset:step 1; } /* continues the list above at ② */
.steps-continue li::before{
  background:var(--surface); color:var(--ink-3); border-color:var(--hairline);
}

/* checklist (getting started) — bigger */
.checklist{
  list-style:none; counter-reset:chk;
  margin:0; padding:0;
}
.checklist > li{
  counter-increment:chk;
  position:relative;
  padding:18px 0 18px 58px;
  border-top:1px solid var(--hairline);
}
.checklist > li:first-child{ border-top:0; }
.checklist > li::before{
  content:counter(chk);
  position:absolute; left:0; top:16px;
  width:38px; height:38px;
  background:var(--green); color:var(--paper);
  border-radius:12px;
  font-family:var(--mono); font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
}
.checklist pre{ margin:.7em 0 0; }

/* ---------- tips box ---------- */
.tips{
  background:var(--surface);
  border-left:4px solid var(--green);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:18px 22px 14px;
  margin:1.8em 0 0;
}
.tips h4{
  text-transform:uppercase; letter-spacing:.08em;
  font-size:.74rem; color:var(--green);
}
.tips ul{ margin:0; padding-left:1.1em; }
.tips li{ margin-bottom:.45em; color:var(--ink-2); }
.tips li::marker{ color:var(--green-2); }

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono);
  font-size:.72rem; font-weight:600;
  letter-spacing:.02em;
  padding:3px 11px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:var(--surface);
  color:var(--ink-2);
  vertical-align:2px;
  white-space:nowrap;
}
.chip-working, .chip .dot-ok{ background:var(--green-t); color:var(--green); border-color:var(--green-2); }
.chip-waiting{ background:var(--clay-t); color:var(--clay); border-color:var(--clay); }
.chip-idle{ background:var(--surface); color:var(--ink-3); border-color:var(--muted); }
.chip-neutral{ background:var(--surface); color:var(--ink-2); border-color:var(--hairline); }
.chip-clay{ background:var(--clay-t); color:var(--clay); border-color:var(--clay); }

/* fake NEW pill */
.pill-demo{
  display:inline-block;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.06em;
  color:var(--paper); background:var(--green);
  border-radius:999px;
  padding:3px 12px;
  vertical-align:2px;
}
.pill-demo.stop{ background:var(--clay); }

/* ---------- keys (kbd) ---------- */
.key{
  font-family:var(--mono);
  font-size:.78em; font-weight:600;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--hairline);
  border-bottom-width:2.5px;
  border-radius:6px;
  padding:1px 7px;
  white-space:nowrap;
}

/* ---------- code blocks ---------- */
pre.code{
  font-family:var(--mono);
  font-size:.84rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  margin:1em 0 1.3em;
  overflow-x:auto;
}
pre.code code{ background:none; border:0; padding:0; white-space:pre; }
pre.code .c{ color:var(--muted); font-style:italic; }
pre.code .ok{ color:var(--green); font-weight:700; user-select:none; }
pre.code .str{ color:var(--clay); }

/* ---------- tables ---------- */
.tbl{
  width:100%;
  border-collapse:collapse;
  margin:1em 0 1.5em;
  font-size:.92rem;
}
.tbl th{
  text-align:left;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3);
  border-bottom:2px solid var(--hairline);
  padding:8px 12px 8px 0;
}
.tbl td{
  border-bottom:1px solid var(--hairline);
  padding:9px 12px 9px 0;
  vertical-align:top;
  color:var(--ink-2);
}
.tbl td:first-child{ white-space:nowrap; color:var(--ink); }
.tbl tr:last-child td{ border-bottom:0; }
.em{ color:var(--ink-3); font-size:.88em; }

/* ---------- plain list ---------- */
.plain-list{ margin:0 0 1.2em; padding-left:1.2em; }
.plain-list li{ margin-bottom:.55em; color:var(--ink-2); }
.plain-list li::marker{ color:var(--green-2); }

/* ---------- figures & diagrams ---------- */
.figure{
  margin:1.8em 0 1.6em;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-sm);
  padding:22px 22px 14px;
}
.figure figcaption{
  font-size:.82rem; color:var(--ink-3);
  text-align:center;
  padding:10px 8px 4px;
  border-top:1px dashed var(--hairline);
  margin-top:14px;
}
.diagram{ width:100%; height:auto; display:block; }

/* SVG text + shapes (classes used inside inline SVGs) */
.dg-box{ fill:#fff; stroke:var(--ink); stroke-width:1.8; }
.dg-box-accent{ fill:var(--card); }
.dg-card{ fill:#fff; stroke:var(--hairline); stroke-width:1.5; }
.dg-arrow{ fill:none; stroke:var(--ink); stroke-width:1.8; }
.diagram text{ font-family:var(--sans); }
.dg-title{ font-size:13px; font-weight:650; fill:var(--ink); }
.dg-sub{ font-size:11.5px; fill:var(--ink-3); }
.dg-chip-green{ font-size:11px; font-weight:650; fill:var(--green); font-family:var(--mono); }
.dg-chip-clay{ font-size:11px; font-weight:650; fill:var(--clay); font-family:var(--mono); }
.dg-chip-muted{ font-size:11px; font-weight:650; fill:var(--ink-3); font-family:var(--mono); }
.dg-note{ font-size:11.5px; font-weight:600; fill:var(--ink-2); }
.dg-note-green{ font-size:11.5px; font-weight:600; fill:var(--green); }
.dg-note-clay{ font-size:11.5px; font-weight:600; fill:var(--clay); }
.dg-mono{ font-family:var(--mono); font-size:11.5px; fill:var(--ink-2); }

/* ---------- outro / philosophy ---------- */
.philosophy{
  font-size:1.04rem;
  border-top:1px dashed var(--hairline);
  padding-top:1.2em;
  margin-top:1.4em;
}
.outro{
  font-size:1.05rem; color:var(--ink-2);
  border-top:1px dashed var(--hairline);
  padding-top:1.2em; margin-top:1.6em;
}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--hairline);
  margin-top:48px;
  padding:34px 0 46px;
  color:var(--ink-3);
  font-size:.9rem;
}
.footer-row{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  justify-content:space-between; align-items:baseline;
}
.footer p{ margin:0; }
.footer-ver{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.02em;
}
.footer code{ font-size:.9em; }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--green);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav-row{ gap:10px; }
  .nav-cta{ display:none; }
  .hero{ padding-top:48px; }
}
@media (max-width:640px){
  body{ font-size:15.5px; }
  .card > .wrap{ padding:32px 18px 30px; }
  .hero{ padding:40px 18px 28px; }
  .figure{ padding:14px 12px 8px; }
  .figure figcaption{ font-size:.78rem; }
  .checklist > li{ padding-left:50px; }
  .checklist > li::before{ width:32px; height:32px; font-size:.95rem; }
  .footer-row{ flex-direction:column; }
  .steps li{ padding-left:40px; }
  .tbl{ font-size:.86rem; }
  .tbl td:first-child{ white-space:normal; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}
html{ scroll-behavior:smooth; }

/* ---------- print ---------- */
@media print{
  .topnav, .progress, .skip{ display:none !important; }
  body{ background:#fff; font-size:11.5pt; }
  .card, .orient, .figure, pre.code, .tips{ box-shadow:none; }
  .card{ border:1px solid #bbb; break-inside:avoid-page; margin-bottom:16px; }
  .figure, pre.code, .tips, .tbl{ break-inside:avoid; }
  a{ color:inherit; text-decoration:none; }
  .hero{ padding-top:0; }
}