/* Practical article; shared blog typography, shell and pagination stay in blog.css. */
.blog-troubleshooting { padding-bottom:72px; }
.blog-troubleshooting h1 { text-wrap:balance; }
.blog-troubleshooting section { scroll-margin-top:96px; }
.blog-troubleshooting p, .blog-troubleshooting li { line-height:1.9; }
.trouble-jump { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:28px 0; }
.trouble-jump a { display:flex; align-items:center; gap:10px; min-height:56px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.trouble-jump a > span:last-child { margin-left:auto; }
.trouble-jump a:hover { border-color:#ffb77e; }
.trouble-jump-index, .trouble-number { color:#ffb77e; font-size:13px; font-variant-numeric:tabular-nums; }
.trouble-start { margin-block:32px 48px; }
.blog-troubleshooting .trouble-start h2 { font-size:21px; }
.trouble-start ul { padding-left:22px; color:#c9d1dc; }
.trouble-start li { padding-left:5px; margin-block:10px; }
.trouble-section { margin-top:48px; padding-top:26px; border-top:1px solid var(--line); }
.blog-troubleshooting .trouble-number { margin-bottom:8px; }
.blog-troubleshooting .trouble-section h2 { margin-top:0; text-wrap:balance; }
.trouble-figure img { display:block; width:100%; height:auto; border-radius:8px; }
.trouble-figure figcaption { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.trouble-caption-item { display:flex; gap:9px; align-items:baseline; }
.trouble-caption-item b { color:#ffb77e; font-size:14px; }
.trouble-steps { padding-left:27px; margin-block:28px; scroll-margin-top:96px; }
.trouble-steps > li { padding-left:10px; margin-bottom:24px; }
.trouble-steps > li::marker { color:#ffb77e; font-weight:600; }
.trouble-steps h3 { font-size:18px; font-weight:550; line-height:1.6; margin:0 0 8px; }
.trouble-steps p { margin:0; color:#c9d1dc; }
.trouble-check { padding:18px 22px; border-left:2px solid #ffb77e; background:rgba(255,183,126,.04); }
.trouble-check > strong { color:#ffb77e; font-size:14px; font-weight:500; }
.trouble-check p { margin:8px 0 0; font-size:15px; }
.trouble-summary { margin-top:48px; }
.trouble-table { width:100%; border-collapse:collapse; margin:22px 0 26px; text-align:left; font-size:14px; line-height:1.8; }
.trouble-table th, .trouble-table td { padding:16px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.trouble-table th:first-child { padding-left:0; width:19%; }
.trouble-table th { font-weight:500; }
.trouble-table thead { color:var(--dim); }
.trouble-table td { color:#c9d1dc; }
.trouble-table a, .trouble-reading a, .trouble-sources a { text-decoration:underline; text-underline-offset:4px; }
.trouble-reading { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:24px; }
.trouble-reading a { display:inline-flex; align-items:center; min-height:44px; }
.trouble-sources { margin-top:32px; padding-top:22px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; }
.trouble-sources p { margin:0 0 8px; }
.trouble-sources a { display:block; width:fit-content; padding-block:6px; }
.blog-troubleshooting .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:760px) {
  .blog-troubleshooting { padding-top:20px; padding-bottom:48px; }
  .trouble-jump { grid-template-columns:1fr; gap:8px; }
  .trouble-jump a { min-height:48px; }
  .trouble-figure figcaption { grid-template-columns:1fr; gap:6px; }
  .trouble-section { margin-top:36px; }
  .trouble-steps { padding-left:23px; }
  .trouble-steps > li { padding-left:5px; }
  .trouble-check { padding:14px 16px; }
  .trouble-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .trouble-table tbody { display:block; }
  .trouble-table tr { display:grid; grid-template-columns:1fr; padding:18px 0; border-bottom:1px solid var(--line); }
  .trouble-table th, .trouble-table td { padding:6px 0; border:0; overflow-wrap:anywhere; }
  .trouble-table th:first-child { width:auto; font-size:16px; }
  .trouble-table td::before { content:attr(data-label); display:block; color:var(--dim); font-size:12px; margin-bottom:4px; }
}