/* ── the guide pages (/guides/) ─────────────────────────────────────────
   Loaded only by the guide pages, after site.css. Neutral tokens only: on
   this site a colour is a claim (brand-and-legal.md), so a question and a
   cause are told apart by a label and a rule, not by green and red. The one
   red box, "stop — don't fire it", uses the existing .note.warn. */

.small{font-size:12.5px; color:var(--ink-3); line-height:1.5; max-width:76ch}

/* the tree: one card per step, the step you're on outlined */
.tjump{margin-top:18px; font-size:13.5px; line-height:1.9; color:var(--ink-2); max-width:80ch}
.tjump b{font-family:var(--disp); letter-spacing:.1em; text-transform:uppercase; font-size:11.5px; color:var(--ink); margin-right:4px}
.tjump a{text-decoration:none; white-space:nowrap}
.tjump a:hover{text-decoration:underline}
.tree{margin-top:10px}
.tnode{
  margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:5px;
  padding:4px 18px 16px; scroll-margin-top:12px;
}
.tnode.tc{background:var(--inset)}
.tnode:target{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow)}
.tnode h2{margin-top:6px; font-size:18px; border-bottom-width:1px}
.tkind{
  margin:12px 0 0; font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.tnode p{font-size:14.5px}
.tans{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; max-width:72ch}
.tans a{
  display:block; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px;
  padding:9px 12px; font-size:14.5px; line-height:1.4;
}
.tans a::after{content:" →"; color:var(--accent)}
.tans a:hover{border-color:var(--accent)}
.tback{margin:12px 0 0; font-size:12.5px}
.tback a{color:var(--ink-3)}
.causes{padding-left:20px; margin:12px 0 0; max-width:74ch}
.causes li{margin:0 0 9px; font-size:14.5px; line-height:1.55}
.steps{padding-left:22px; margin:10px 0 0; max-width:74ch}
.steps li{margin:0 0 6px; font-size:14px; line-height:1.5}
.tnode h3{margin-top:20px}
.more-detail{margin-top:14px}
.more-detail summary{cursor:pointer; font-size:13.5px; font-weight:600; color:var(--accent)}
.more-detail .tw{margin-top:10px}

/* two footprints side by side, stacked on a phone */
.gpair{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:14px}
@media (max-width:360px){ .gpair{grid-template-columns:1fr} }
.gside h3{margin-top:8px}
.gfp{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:12px 14px}
.gfp svg{flex:0 0 96px; width:96px; height:auto}
.gspec{margin:0; flex:1 1 auto; min-width:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:baseline}
.gspec dt{font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.gspec dd{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow-wrap:anywhere}
.gside h3 a{text-decoration:none}

/* a plate table read as cards on a phone — the same move the pistol-page
   tables make (information-design.md, "On a phone the table is read as
   cards"): headers clipped from sight but left in the accessibility tree */
@media (max-width:560px){
  .gcards table.grid thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .gcards table.grid tr{display:block; padding:10px 12px; border-bottom:1px solid var(--line-soft)}
  .gcards table.grid tr:last-child{border-bottom:0}
  .gcards table.grid td{display:block; padding:2px 0; border:0}
  .gcards table.grid td[data-label]{font-size:12.5px}
  .gcards table.grid td[data-label]::before{content:attr(data-label) ": "; font-family:var(--sans); color:var(--ink-3)}
  .gcards{overflow-x:visible}
}

/* the index */
.glist{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.glist a{
  display:block; height:100%; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:4px; padding:12px 14px 14px;
}
.glist a:hover{border-color:var(--accent)}
.glist .gk{display:block; font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.glist b{display:block; font-family:var(--disp); font-size:19px; letter-spacing:.04em; margin:2px 0 4px}
.glist .gb{display:block; font-size:13.5px; color:var(--ink-2); line-height:1.45}

/* paper: every step prints, as a checklist; the jump line and finder don't */
@media print{
  .tjump, .tback, .find{display:none !important}
  .tnode{break-inside:avoid; box-shadow:none}
  .tnode:target{box-shadow:none; border-color:var(--line)}
  .tans a{border-left-width:1px; padding:3px 8px}
}