/* Common problems pages (views/families/problems.js). kp-* classes only, on tokens.css. Mobile first:
   16px gutters, nothing wider than the viewport (tables become cards under 640px), 44px tap targets. */
.kp-sec{min-width:0;overflow-wrap:anywhere}
.kp-sec h3{font-size:17px;line-height:1.4;margin:var(--space-6) 0 var(--space-2)}
.kp-note{font-size:13px;line-height:1.55;color:var(--text-secondary);margin:var(--space-3) 0}
.kp-define{font-size:14px;color:var(--text-secondary)}
.kp-badge{display:inline-block;font-size:12px;line-height:18px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);border:1px solid var(--border);white-space:nowrap}
.kp-badge--more{color:var(--accent-text);background:var(--accent-tint);border-color:var(--accent-line)}
.kp-badge--less{color:var(--info-text);background:var(--info-tint);border-color:#bfdbfe}
.kp-badge--avg{color:var(--text-secondary);background:var(--bg-secondary)}
.kp-table-wrap{max-width:100%;overflow-x:auto}
.kp-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
.kp-table th,.kp-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.kp-table thead th{font-size:12px;color:var(--text-secondary);font-weight:600;border-bottom:1px solid var(--border)}
.kp-grey{color:var(--text-muted)}
@media (max-width:639px){
  .kp-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kp-cards,.kp-cards tbody,.kp-cards tr,.kp-cards th,.kp-cards td{display:block;width:100%}
  .kp-cards tr{border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2);background:var(--surface)}
  .kp-cards th,.kp-cards td{border:0;padding:4px 0}
  .kp-cards td[data-label]::before{content:attr(data-label) ": ";color:var(--text-secondary);font-size:12px}
}
.kp-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accent-text);font-weight:600}
.kp-card.bk-finding{display:block;grid-template-columns:none}
.kp-card{border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-4);margin:0 0 var(--space-4);background:var(--surface)}
.kp-card h3{margin-top:0}
.kp-tags{margin:0 0 var(--space-2);display:flex;flex-wrap:wrap;gap:6px}
.kp-tag{font-size:12px;line-height:18px;padding:2px 8px;border-radius:var(--radius-full);background:var(--bg-secondary);color:var(--text-secondary)}
.kp-sev,.kp-freq{margin:var(--space-2) 0;font-size:15px;line-height:1.55}
.kp-dl{margin:var(--space-3) 0 0;display:grid;gap:4px 12px;font-size:14px;line-height:1.5}
.kp-dl dt{font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-top:var(--space-2)}
.kp-dl dd{margin:0}
.kp-dl ul{margin:0;padding-left:18px}
.kp-est{display:block;font-size:12px;line-height:1.5;color:var(--text-secondary)}
.kp-cardlink{margin:var(--space-3) 0 0}
.kp-sec a:not(.bk-btn),.kp-card a{display:inline-block;min-height:24px;color:var(--accent-text)}
.kp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kp-sec .kp-chips li a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-full);text-decoration:none;font-size:14px}
/* §6.2: 44px tap targets for list links (rivals, siblings, recalls, items, the top list); inline text links stay inline. */
.kp-sec .kp-rivals li>a,.kp-sec .kp-top li>a,.kp-sec .kp-recalls li>a,.kp-sec .kp-items li>a,.kp-cardlink a,.kp-sec .kp-table th>a{display:inline-flex;align-items:center;min-height:44px}
/* §2.2.15: reserve the sticky's height from first paint on phones (CLS 0). */
@media (max-width:759px){body:has(.kit-sticky){padding-bottom:calc(64px + env(safe-area-inset-bottom))}}
.kp-count{font-size:12px;color:var(--text-secondary)}
.kp-check li,.kp-walk li,.kp-adv li,.kp-recalls li,.kp-items li,.kp-rivals li{margin:0 0 var(--space-2);line-height:1.55}
.kp-triple{display:grid;gap:var(--space-3)}
@media (min-width:760px){.kp-triple{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kp-triple>div{border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-3)}
.kp-triple h3{margin-top:0}
.kp-chart{margin:var(--space-4) 0;max-width:100%}
.kp-chart svg{display:block;width:100%;height:auto;max-width:100%}
.kp-chart figcaption{font-size:12px;color:var(--text-secondary);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 12px}
.kp-grid{stroke:var(--border-subtle);stroke-width:1}
.kp-zero{stroke:var(--text-muted);stroke-width:1}
.kp-axis{font-size:15px;fill:var(--text-secondary)}
.kp-m-more rect{fill:var(--accent-text)}.kp-m-less rect{fill:var(--info-text)}.kp-m-avg rect{fill:var(--text-muted)}
.kp-m-grey rect{opacity:.45}
.kp-whisk{stroke:var(--text);stroke-width:1.5}
.kp-line{fill:none;stroke:var(--accent-text);stroke-width:2}
.kp-line-nat{fill:none;stroke:var(--text-muted);stroke-width:2;stroke-dasharray:5 4}
.kp-dot{fill:var(--accent-text);stroke:var(--surface);stroke-width:2}
.kp-old{fill:var(--bg-secondary)}
.kp-key::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;background:var(--text-muted)}
.kp-key.kp-m-more::before,.kp-key.kp-m-model::before{background:var(--accent-text)}
.kp-key.kp-m-less::before{background:var(--info-text)}
.kp-key.kp-m-nat::before{background:none;border-top:2px dashed var(--text-muted);height:0;border-radius:0}