/* Wild West API: the generated guides, research and comparison pages. Same quiet
   system as ww.css; this only covers the article furniture those pages use. */
.gen { padding-bottom: 8px; }
.gen .crumbs { font-size: 13px; color: var(--muted); padding: 22px 0 0; }
.gen .crumbs a { color: var(--muted); text-decoration: none; }
.gen .crumbs a:hover { color: var(--ink); }
.gen .crumbs .sep { margin: 0 7px; color: var(--line-2); }
.gen .crumbs [aria-current] { color: var(--ink-2); }
.gen .prose { max-width: 780px; padding: 18px 0 24px; }
.gen .prose.wide, .gen .prose.full { max-width: 860px; }
.gen .prose h1, .gen h1 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0 12px; }
.gen .tagline { font-size: 17px; color: var(--ink-2); margin: -4px 0 14px; font-weight: 500; }
.gen .lede { font-size: 16.5px; color: var(--muted); }
.gen .prose a { text-decoration-color: var(--line-2); }
.gen .prose a:hover { text-decoration-color: currentColor; }
.gen .mono { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.gen .checked { font-size: 12.5px; color: var(--muted); }
.gen .backlink { font-size: 14px; color: var(--muted); margin: 6px 0 24px; }
.gen .note { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; }
.gen .pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }

/* Tables */
.gen .tablewrap { margin: 0 0 1.4em; }
.gen .tablewrap table { margin: 0; }
.gen table.cmp, .gen table.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.gen table.cmp th, .gen table.cmp td, .gen table.spec th, .gen table.spec td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gen table.cmp tr.hdr th, .gen table.spec tr.hdr th, .gen table.cmp thead th { background: var(--bg-2); color: var(--muted); font-weight: 500; font-size: 12.5px; }
.gen table.cmp tbody th, .gen table.spec tbody th, .gen table tr:not(.hdr) > th { color: var(--ink); font-weight: 500; }
.gen table tr:last-child > td, .gen table tr:last-child > th { border-bottom: 0; }
.gen tr.is-this td, .gen tr.is-this th { background: var(--accent-soft); }
@media (max-width: 640px) {
  .gen table.stack, .gen table.stack tbody, .gen table.stack tr, .gen table.stack td, .gen table.stack th { display: block; width: 100%; }
  .gen table.stack tr.hdr { display: none; }
  .gen table.stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .gen table.stack tr:last-child { border-bottom: 0; }
  .gen table.stack td, .gen table.stack th { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; text-align: right; }
  .gen table.stack td[data-label]::before, .gen table.stack th[data-label]::before { content: attr(data-label); color: var(--muted); text-align: left; font-weight: 400; flex: none; max-width: 45%; }
}

/* FAQ blocks */
.gen .faq { border-top: 1px solid var(--line); margin: 0 0 1.4em; }
.gen .faq-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.gen .faq-item h3 { margin: 0 0 6px; font-size: 15px; }
.gen .faq-item p { margin: 0; font-size: 14.5px; }

/* Link grids */
.gen .cases { display: grid; gap: 10px; margin: 8px 0 24px; }
@media (min-width: 720px) { .gen .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gen .cases.guide-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gen .cases a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.gen .cases a:hover { border-color: var(--line-2); background: var(--bg-2); }
.gen .cases a strong { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.gen .cases a span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gen .guide-rel a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.gen .guide-rel .tool-mark { grid-row: span 2; }
.gen .callout { margin: 0 0 1.4em; }

/* Guide heads and fact rows */
.gen .guide-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 6px 0 12px; }
.gen .guide-head h1 { margin: 0; }
.gen .tool-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); flex: none; }
.gen .tool-mark img { width: 22px; height: 22px; display: block; object-fit: contain; }
.gen .tool-mark-letter { font-weight: 600; font-size: 17px; color: var(--ink); }
.gen .guide-facts, .gen .mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 20px; }
.gen .guide-facts > div, .gen .mstats > div { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.gen .guide-facts dt, .gen .mstats span { display: block; font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.gen .guide-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.gen .mstats b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gen .mstats small { display: block; font-size: 12px; color: var(--muted); }
.gen .mstats small a { color: var(--muted); }

/* Model pages */
.gen .mhero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 6px 0 16px; }
.gen .mhero-art img { width: 48px; height: 48px; display: block; }
.gen .mhero-kind { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.gen .mhero h1 { margin: 0 0 8px; }
.gen .mhero .xpl { color: var(--accent); }
.gen .mhero-lede { color: var(--muted); margin: 0 0 14px; }
.gen .mhero-id code { font-size: 13px; }
.gen .mhero-id { margin: 0 0 14px; }
.gen .mhero-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .gen .mhero { grid-template-columns: 1fr; } }

/* Use-case pages: article first, its facts after. */
.gen .uc-shell { display: grid; gap: 8px; }
@media (min-width: 1000px) { .gen .uc-shell { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; } .gen .uc-side { order: 2; position: sticky; top: 76px; align-self: start; padding-top: 22px; } }
.gen .uc-side { display: grid; gap: 12px; }
.gen .uc-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.gen .uc-card h3 { font-size: 14px; margin: 0 0 8px; }
.gen .uc-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.gen .uc-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.gen .uc-spec dt { color: var(--muted); }
.gen .uc-spec dd { margin: 0; overflow-wrap: anywhere; }

/* The closing call to action on every generated page. */
.gen-cta { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 24px; margin: 24px 0 8px; }
.gen-cta h2 { margin: 0 0 6px; }
.gen-cta p { margin: 0; color: var(--muted); }
.gen-cta .btns { margin-top: 14px; }