/* Rendering Problems page (problems-page.js). Builds on page.css: same colours, same
   description pane; the left column is a symptom picker instead of the Attribute Manager. */
.pb-pick { position: sticky; top: 12px; border: 1px solid var(--pg-line); border-radius: 10px; background: var(--pg-panel); overflow: hidden; }
.pb-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-bottom: 1px solid var(--pg-line); background: #151515; }
.pb-cats button { padding: 6px 12px; border: 1px solid #333; border-radius: 999px; background: #222; color: #bbb; font: 13px var(--pg-sans); cursor: pointer; }
.pb-cats button:hover { border-color: #555; color: #fff; }
.pb-cats button[aria-selected="true"] { border-color: var(--pg-red); background: var(--pg-red-dark); color: #fff; }
.pb-cats button:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: 2px; }
.pb-list { margin: 0; padding: 6px; list-style: none; }
.pb-list a { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid transparent; border-radius: 6px; color: var(--pg-text); }
.pb-list a strong { color: #fff; font-weight: normal; font-size: 15px; }
.pb-list a span { font-size: 13px; color: var(--pg-muted); }
.pb-list a:hover { background: #242424; color: var(--pg-text); }
.pb-list a[aria-current="true"] { border-left-color: var(--pg-red); background: #262626; }
.pb-list a:focus-visible { outline: 2px solid var(--pg-blue); outline-offset: -2px; }
.pb-steps { margin: 0; padding-left: 22px; }
.pb-steps li { margin-bottom: 10px; padding-left: 4px; }
.pb-steps li::marker { color: var(--pg-red); font-family: "PoppinsExtraBold", var(--pg-sans); }
.pg-desc a.pb-set, .pg-desc a.pb-jump { color: #ff8d97; text-decoration: underline; text-underline-offset: 2px; }
.pg-desc a.pb-set:hover, .pg-desc a.pb-jump:hover { color: #fff; }
.pb-foot { margin: 18px 0 0; font-size: 13px; color: var(--pg-muted); }
@media (max-width: 960px) {
  .pb-pick { position: static; }
}