/* /best ranking pages (views/families/best.js). Builds on tokens.css, bundle.css and kit.css. Mobile first:
   tables scroll inside their own container, never the page; rows become cards under 600px. */
.best-sec{margin:var(--space-8) 0}
.best-sec h2{font-size:22px;line-height:1.3;margin:0 0 var(--space-3)}
.best-sec h3{font-size:17px;line-height:1.35;margin:0 0 var(--space-2)}
.best-sec p{max-width:70ch;line-height:1.6}
.best-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.best-chip{border:1px solid var(--success-line);background:var(--success-tint);color:var(--text);border-radius:9999px;padding:6px 12px;font-size:14px;line-height:1.4}
.best-chip b{color:var(--success-text)}
.best-howto{border-left:3px solid var(--border-strong);padding-left:var(--space-3);color:var(--text-secondary);font-size:15px}
.best-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.best-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.best-table caption{text-align:left;font-size:13px;color:var(--text-secondary);padding:0 0 var(--space-2)}
.best-table th,.best-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
.best-table th{font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.best-table td.num{text-align:right;white-space:nowrap}
.best-table .sub{display:block;font-size:12px;color:var(--text-secondary)}
.best-v{display:inline-block;border-radius:9999px;padding:1px 8px;font-size:12px;white-space:nowrap}
.best-v--fewer{background:var(--info-tint);color:var(--info-text)}
.best-v--more{background:var(--danger-tint);color:var(--danger-text)}
.best-v--average{background:var(--border-subtle);color:var(--text-secondary)}
@media (max-width:599px){
  .best-table--cards thead{display:none}
  .best-table--cards tr{display:block;border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2)}
  .best-table--cards td{display:flex;justify-content:space-between;gap:var(--space-3);border:0;padding:4px 0;text-align:right}
  .best-table--cards td::before{content:attr(data-label);color:var(--text-secondary);font-size:12px;text-align:left;flex:none}
  .best-table--cards td.name{display:block;text-align:left;font-weight:600}
  .best-table--cards td.name::before{content:none}
}
.best-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.best-dots{display:block;width:100%;height:auto;max-width:720px;margin:var(--space-4) 0}
.best-dots text{font:12px/1 var(--font-sans);fill:var(--text)}
.best-dots .ax{fill:var(--text-secondary)}
.best-dots .grid{stroke:var(--border);stroke-width:1}
.best-dots .base{stroke:var(--text-secondary);stroke-width:1.5;stroke-dasharray:4 3}
.best-dots .wh{stroke:var(--text);stroke-width:2;stroke-linecap:round}
.best-dots .d-fewer{fill:var(--info)}
.best-dots .d-average{fill:var(--text-muted)}
.best-dots .d-more{fill:var(--danger)}
.best-dots circle{stroke:var(--surface);stroke-width:2}
.best-entry{border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-4);margin:0 0 var(--space-3)}
.best-entry p{margin:var(--space-2) 0 0;font-size:15px}
.best-entry .bk-eyebrow{margin:0}
.best-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:14px}
.best-links a{min-height:44px;display:inline-flex;align-items:center}
.best-index{columns:2 240px;column-gap:var(--space-6);padding-left:var(--space-4);margin:0}
.best-index li{break-inside:avoid;margin:0 0 6px;line-height:1.45}
.best-index .sub{color:var(--text-secondary);font-size:13px}
.best-figure{margin:var(--space-4) 0}
.best-figure img{display:block;width:100%;height:auto;max-width:780px;border-radius:var(--radius-xl)}
.best-figure figcaption{font-size:13px;color:var(--text-secondary);margin-top:6px}
.best-embed{width:100%;min-height:150px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:var(--space-2);background:var(--bg-secondary);color:var(--text);box-sizing:border-box}
.best-md table{border-collapse:collapse;font-size:14px}
.best-md th,.best-md td{border-bottom:1px solid var(--border-subtle);padding:6px 8px;text-align:left;vertical-align:top}
.best-md .best-scroll{margin:var(--space-3) 0}
.best-rest{columns:2 220px;column-gap:var(--space-6);font-size:14px;line-height:1.5;padding-left:var(--space-8);margin:var(--space-2) 0}
.best-rest li{break-inside:avoid}
.best-md code{word-break:break-all}