/* =====================================================================
   Root & Branch · page pieces (Thread industry template)
   Load after thread.css. Prefix rb-.
   ===================================================================== */
.rb-patch { display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); min-width: 0; }
.rb-patch h3 { font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; }
.rb-sow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rb-sow li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-s); background: var(--well); font: 600 15px/1.3 var(--display); }
.rb-sow li small { font: 500 12.5px/1.3 var(--body); color: var(--muted); }
html:not(.calm) .rb-sow li { animation: th-spin 420ms var(--ease) both; }
html:not(.calm) .rb-sow li:nth-child(2) { animation-delay: 50ms; } html:not(.calm) .rb-sow li:nth-child(3) { animation-delay: 100ms; } html:not(.calm) .rb-sow li:nth-child(4) { animation-delay: 150ms; } html:not(.calm) .rb-sow li:nth-child(5) { animation-delay: 200ms; } html:not(.calm) .rb-sow li:nth-child(6) { animation-delay: 250ms; }
.rb-frost { font-size: 14.5px; color: var(--ink-2); }
.rb-frost b { color: var(--ink); }
.rb-weed { margin-top: -4px; }
.rb-steps { display: grid; gap: 0; counter-reset: st; }
.rb-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 0 0 22px; counter-increment: st; }
.rb-steps li::before { content: counter(st); grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ultra-soft); color: var(--ultra); font: 600 14px/1 var(--mono); }
.rb-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: color-mix(in srgb, var(--ultra) 30%, var(--line)); }
.rb-steps b { font: 600 17px/1.35 var(--display); padding-top: 4px; }
.rb-steps p { font-size: 15px; color: var(--ink-2); }
.rb-done { padding: 16px 18px; border-radius: var(--r-m); background: var(--mint); color: var(--ink); font-weight: 500; }
.rb-need { padding: 12px 16px; border-radius: var(--r-m); background: var(--flag-soft); color: var(--ink); font-size: 15px; }
.rb-thread-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; }
.rb-thread-info dt { color: var(--muted); }
.rb-thread-info dd { font-weight: 600; }
.rb-patch .seg { border-radius: var(--r-m); justify-self: start; }