/* The Guide (/guide/), on top of article.css.
 *
 * Only what a lesson has and an article does not: the breadcrumb, the two
 * kinds of figure, the practice box, the previous/next links and the list of
 * lessons on the hub. Colours are article.css's own variables, so green still
 * means damping and purple amplifying — the same two colours every chart in
 * the app uses.
 */
.crumbs{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 16px;
}
.crumbs a{color:var(--ink-faint); text-decoration:none;}
.crumbs a:hover{color:var(--green);}
.crumbs span{margin:0 6px;}

.gfigure{margin:30px 0 34px;}
.gfig{display:block; width:100%; height:auto; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px;}
.gfig .pos{fill:var(--green);}
.gfig .neg{fill:var(--purple);}
.gfig .call{fill:var(--green); opacity:.45;}
.gfig .put{fill:var(--purple); opacity:.45;}
.gfig .wall{opacity:1;}
.gfig .axis{stroke:var(--line-strong); stroke-width:1;}
.gfig .cum{fill:none; stroke:var(--ink); stroke-width:1.6;}
.gfig .flip{stroke:var(--ink); stroke-width:1; stroke-dasharray:5 4;}
.gfig .cross{fill:var(--bg); stroke:var(--ink); stroke-width:1.6;}
.gfig .spot{stroke:var(--green-ink); stroke-width:1; stroke-dasharray:2 3;}
.gfig text{font-family:var(--font-mono); font-size:11px;}
.gfig .lab{fill:var(--ink-faint);}
.gfig .note{fill:var(--ink);}
.gfig .spotlab{fill:var(--green-ink);}
.gfig .cumlab{fill:var(--ink-soft);}
.shot{margin:28px 0 32px;}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--line-strong); border-radius:10px;}
.shot figcaption, .gfigure figcaption{font-size:13.5px; color:var(--ink-faint); margin-top:10px; line-height:1.5;}

.practice{
  margin:36px 0; padding:22px 24px; border:1px solid var(--green); border-radius:10px;
  background:linear-gradient(var(--green-soft), var(--green-soft)), var(--bg-raised); font-size:15.5px;
}
.practice .label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-ink); margin-bottom:10px; display:block;
}
.practice p{color:var(--ink);}
.practice .btn-primary{margin-top:0;}

.prose-last th:last-child, .prose-last td:last-child{text-align:left;}

.read-next ul{margin:0; padding-left:18px;}
.read-next li{margin-bottom:6px;}

.lesson-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px;}
.lesson-nav a{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--line-strong);
  border-radius:10px; text-decoration:none; color:var(--ink); background:var(--bg-raised); font-size:15px; line-height:1.45;
}
.lesson-nav a:hover{border-color:var(--green);}
.lesson-nav span{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.lesson-nav .next{grid-column:2; text-align:right;}

.lessons{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:12px;}
.lessons li{margin:0;}
.lessons a{
  display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1px solid var(--line-strong);
  border-radius:10px; background:var(--bg-raised); text-decoration:none;
}
.lessons a:hover{border-color:var(--green);}
.lessons .n{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.lessons b{color:var(--ink); font-family:var(--font-mono); font-size:17px; line-height:1.35;}
.lessons .d{color:var(--ink-soft); font-size:15px; line-height:1.55;}

@media (max-width:640px){
  .lesson-nav{grid-template-columns:1fr;}
  .lesson-nav .next{grid-column:1;}
}