/* ── 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(--sans); font-size:13px; font-weight:600; 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:8px;
  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(--sans); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-2);
}
.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:4px;
  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:8px; 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(--sans); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-2)}
.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: one ruled list, the kind of guide in the left column and its name and what it answers beside it */
.glist{list-style:none; padding:0; margin:22px 0 0; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.glist li + li{border-top:1px solid var(--line-soft)}
.glist a{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:2px 18px; padding:14px 18px;
  text-decoration:none; color:var(--ink);
}
.glist a:hover{background:var(--inset)}
.glist a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.glist .gk{grid-row:1 / 3; padding-top:4px; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-2)}
.glist b{display:block; font-family:var(--disp); font-size:19px; letter-spacing:.01em}
.glist .gb{display:block; font-size:14.5px; color:var(--ink-2); line-height:1.45}
@media (max-width:620px){ .glist a{grid-template-columns:1fr; padding:12px 14px} .glist .gk{grid-row:auto; padding-top:0} }

/* 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}
}

/* a note that answers per slide or per case, one line each (the slim GLOCK threads) */
.note .cw{display:block; margin-top:5px}

/* a maker's document named beside the sentence it backs */
.cite{font-size:12.5px; color:var(--ink-3)}
.cite a{color:inherit; text-decoration:underline}
.src-list{margin:6px 0 0; padding-left:18px; font-size:14px; line-height:1.7}