/* RowBranch site · v3 · the few rules the guide articles need that site.css does not carry.
   Loaded by the guides pages via front matter "css". Keep it small. */

/* cards on the guides index */
.card.soon{background:transparent;box-shadow:none;border-style:dashed}
.card.soon h3{color:var(--muted)}
.card.soon .meta{margin-bottom:6px}
.card .meta{font-size:11.5px;letter-spacing:0}

/* quick facts: six stats in three columns at the top of an article */
.stats.three{grid-template-columns:repeat(3,1fr)}
.stats.three .stat{padding:18px 20px 18px 0}
.stats.three .stat+.stat{padding-left:20px}
.stats.three .stat:nth-child(4){border-left:none;padding-left:0}
.stats.three .stat:nth-child(n+4){border-top:1px solid var(--line)}
.stats.three .stat b{font-size:22px;line-height:1.15}
.stats.three .stat b small{display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0;line-height:1.3}
.stats.three .stat span{font-size:12.5px;margin-top:6px;letter-spacing:.02em;text-transform:uppercase;font-family:var(--mono)}
@media(max-width:820px){
  .stats.three{grid-template-columns:1fr 1fr}
  .stats.three .stat{padding:16px 14px 16px 0;border-bottom:none}
  .stats.three .stat+.stat{padding-left:14px}
  .stats.three .stat:nth-child(odd){border-left:none;padding-left:0}
  .stats.three .stat:nth-child(even){border-left:1px solid var(--line)}
  .stats.three .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stats.three .stat:nth-child(-n+2){border-top:none}
}

/* labelled notes inside prose (a "trap" is the red variant) */
.prose .note>*+*{margin-top:.6em}
.prose .note .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:500}
.prose .note.trap{border-left:3px solid #B23B3B;border-radius:0 var(--r) var(--r) 0}
.prose .note.trap .lab{color:#B23B3B}
.prose .note.fine{font-size:13.5px;line-height:1.65;color:var(--muted)}

/* numbered steps */
.prose .step{border-top:1px solid var(--line);padding-top:26px;margin-top:2em}
.prose .step .sn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brass);font-weight:500}
.prose .step h3{margin-top:6px}
.prose .step h3+p{margin-top:.5em}

/* wide tables keep their columns and scroll inside .table-wrap on small screens
   (the prose grid item must be allowed to shrink below the table's min width) */
.article>.prose{min-width:0}
.prose .table-wrap.wide table{min-width:640px}
.prose .ar{color:var(--muted);font-size:14px}

/* the dark callout: its eyebrow, and no prose underline on its button and link */
.callout .eyebrow{color:#E4C079;font-size:13.5px;margin-bottom:12px}
.callout .eyebrow::before{background:#E4C079}
.prose .callout a{text-decoration:none}
.prose .callout .link:hover{text-decoration:underline}