/* Gear index, gear pages and gear guides (task 823.9; loaded on /gear pages only). Colors come from site.css. */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.guide-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--honey); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.guide-card:hover { border-color: var(--accent); color: var(--ink); }
.guide-card-title { font: 700 1.1rem/1.25 var(--serif); }
.guide-card .muted { font-size: .92rem; line-height: 1.45; }
.guide-card-n { margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--accent); }
.gear-jump { margin-top: 8px; }
.gear-item .used-in a { color: var(--muted); }
.gear-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 28px; align-items: start; margin-top: 8px; }
.gear-about p { max-width: 68ch; }
.gear-stats { font-size: 1.05rem; }
.gear-buy h2 { font-size: 1.2rem; }
.gear-buy .btn { width: 100%; justify-content: center; margin: 4px 0 10px; }
.gear-buy .disclosure { margin: 0; font-size: .85rem; }
.gear-cat { font: 700 1rem var(--sans); margin: 18px 0 6px; }
.gear-recipes { columns: 3 220px; column-gap: 28px; padding-left: 1.1em; margin: 0 0 8px; }
.gear-recipes li { break-inside: avoid; margin: 0 0 4px; }
.guide-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.guide-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.guide-rank { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--honey-soft); font: 700 1.2rem var(--serif); color: var(--ink); }
.guide-body p { margin: 2px 0; }
.guide-stat { font-weight: 600; }
.guide-total { font-size: 1.05rem; background: var(--herb-soft); border-radius: 12px; padding: 12px 16px; }
.how p { max-width: 72ch; }
@media (max-width: 760px) {
  .gear-main { grid-template-columns: 1fr; }
  .guide-item { grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 14px; gap: 12px; }
  .guide-rank { width: 34px; height: 34px; font-size: 1rem; }
  .guide-item .btn.amazon { grid-column: 2; justify-self: start; }
}