/* The paper trail.
   One column, read top to bottom like a thread. The numbering is real: these are the steps of a race
   in the order they happen. The only loud element is the receipt; the prose around it stays quiet. */
body.guide-page main.trail{max-width:800px;margin:auto;padding:52px max(5vw,20px) 96px;counter-reset:post}
.trail-head{display:block;margin-bottom:44px}
.trail-head h1{font:800 clamp(34px,6.2vw,58px)/1.02 Archivo,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 18px;color:var(--t-ink-hi,#eef4ea);text-wrap:balance}
.trail-deck{font-size:17px;line-height:1.7;color:var(--t-body,#b9c7b7);margin:0 0 28px;max-width:62ch}

/* The race under examination: the page's one piece of "live" chrome. */
.casefile{border:1px solid var(--t-edge,#344d3b);border-radius:14px;background:#0b110d;padding:18px 20px}
.casefile-title{font:700 16px/1.35 Archivo,Arial,sans-serif;color:var(--t-lime,#c6ef79);margin:0}
.casefile-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0 0}
.casefile-facts div{min-width:0}
.casefile-facts dt{font-size:12.5px;color:var(--t-dim,#7f927f);margin-bottom:3px}
.casefile-facts dd{margin:0;font:600 15px/1.3 var(--t-data,"JetBrains Mono",monospace);color:var(--t-ink-hi,#eef4ea);overflow-wrap:anywhere}

/* The thread. A rail runs down the left, joining the posts the way a reply line does. */
.thread{list-style:none;margin:0;padding:0;position:relative}
.thread::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--t-edge,#344d3b),var(--t-edge,#344d3b) 92%,transparent)}
.post{position:relative;padding:0 0 40px 58px;counter-increment:post}
.post:last-child{padding-bottom:0}
.post::before{content:counter(post);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font:600 14px/1 var(--t-data,"JetBrains Mono",monospace);color:var(--t-lime,#c6ef79);background:var(--t-bg,#060a07);border:2px solid var(--t-edge-hi,#5b7d4f)}
.post h2{font:700 clamp(20px,2.6vw,25px)/1.2 Archivo,Arial,sans-serif;letter-spacing:-.015em;margin:2px 0 10px;color:var(--t-ink-hi,#eef4ea);text-wrap:balance}
.post p{font-size:16px;line-height:1.72;color:var(--t-body,#b9c7b7);margin:0;max-width:64ch}
.post p strong{color:var(--t-ink-hi,#eef4ea);font-weight:700}
.post p a{color:var(--t-lime,#c6ef79);text-underline-offset:3px}

/* The receipt: torn-paper top edge, monospace figures, every value a link out to the explorer. */
.receipt{margin-top:16px;border:1px solid var(--t-edge,#344d3b);border-radius:4px 4px 12px 12px;background:#0a0f0c;position:relative;padding:14px 16px 12px;min-height:46px}
.receipt::before{content:"";position:absolute;left:-1px;right:-1px;top:-7px;height:7px;
  background:linear-gradient(135deg,#0a0f0c 33%,transparent 33%) 0 0/12px 7px repeat-x,linear-gradient(-135deg,#0a0f0c 33%,transparent 33%) 0 0/12px 7px repeat-x}
.receipt:empty::after,.receipt:not(.is-filled):not(.is-empty)::after{content:"Fetching the receipt…";font:13px/1.6 var(--t-data,"JetBrains Mono",monospace);color:var(--t-dim,#7f927f)}
.receipt-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;border-bottom:1px dashed #22301f;font:13.5px/1.5 var(--t-data,"JetBrains Mono",monospace)}
.receipt-row:last-child,.receipt-row:has(+ .receipt-more),.receipt-row:has(+ .receipt-note){border-bottom:0}
.receipt-label{color:var(--t-dim,#7f927f);flex:0 1 auto}
.receipt-value{color:var(--t-ink-hi,#eef4ea);text-align:right;overflow-wrap:anywhere;min-width:0}
a.receipt-value{color:var(--t-lime,#c6ef79);text-decoration:underline;text-decoration-color:#c6ef7955;text-underline-offset:3px}
a.receipt-value:hover{text-decoration-color:currentColor}
a.receipt-value:focus-visible,.receipt-more summary:focus-visible{outline:2px solid var(--t-lime,#c6ef79);outline-offset:3px;border-radius:3px}
.receipt-note{font:12.5px/1.6 Archivo,Arial,sans-serif;color:var(--t-dim,#7f927f);margin:8px 0 0 !important;max-width:none !important}
.receipt.is-empty{border-style:dashed}
.receipt-more{margin-top:6px}
.receipt-more summary{cursor:pointer;font:600 13px/1.4 Archivo,Arial,sans-serif;color:var(--t-lime,#c6ef79);padding:6px 0;list-style-position:inside}
.receipt-more[open] summary{margin-bottom:4px}

.trail-end{margin-top:56px;padding-top:36px;border-top:1px solid var(--t-edge,#344d3b)}
.trail-end h2{font:800 28px/1.15 Archivo,Arial,sans-serif;letter-spacing:-.02em;margin:0 0 8px;color:var(--t-ink-hi,#eef4ea)}
.trail-end p{color:var(--t-body,#b9c7b7);margin:0 0 18px;font-size:16px}
.trail-actions{display:flex;flex-wrap:wrap;gap:10px}

@media(max-width:640px){
  .trail{padding-top:32px}
  .casefile-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thread::before{left:13px}
  .post{padding-left:42px}
  .post::before{width:28px;height:28px;font-size:12px}
  /* A hash and its label will not share a line on a phone; stack them and keep both readable. */
  .receipt-row{flex-direction:column;gap:2px}
  .receipt-value{text-align:left}
}