/* /learn/fix/: the troubleshooter */
.fx-page{display:flex; flex-direction:column; gap:clamp(1.4rem,3vw,2rem)}
.fx-page > *{max-width:56rem}
.fx-tools{position:sticky; top:var(--bar-h); z-index:5; display:flex; flex-direction:column; gap:.45rem; padding:.8rem 0 .7rem; background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.fx-label{font:600 .92rem/1.3 var(--f-ui); color:var(--ink)}
.fx-find{font-size:1.05rem; min-height:3rem}
.fx-count,.fx-none{margin:0; font:400 .86rem/1.4 var(--f-ui); color:var(--ink-3)}
.fx-nav{display:flex; flex-wrap:wrap; gap:.4rem}
.fx-nav a{display:inline-flex; align-items:center; min-height:2.1rem; padding:0 .8rem; border:1px solid var(--line); border-radius:999px; font:500 .86rem/1 var(--f-ui); color:var(--ink-2); text-decoration:none; background:var(--panel)}
.fx-nav a:hover{color:var(--ink); border-color:var(--ink-3)}
.fx-group{display:flex; flex-direction:column; scroll-margin-top:calc(var(--bar-h) + 7rem)}
.fx-group .h2{margin:0 0 .5rem; font-size:clamp(1.3rem,2.4vw,1.6rem)}
.fx{border-top:1px solid var(--line); scroll-margin-top:calc(var(--bar-h) + 7rem)}
.fx:last-of-type{border-bottom:1px solid var(--line)}
.fx summary{display:flex; align-items:center; gap:.8rem; min-height:3.2rem; padding:.7rem 0; cursor:pointer; list-style:none; font:500 1.02rem/1.4 var(--f-ui); color:var(--ink)}
.fx summary::-webkit-details-marker{display:none}
.fx summary::after{content:""; flex:none; margin-left:auto; width:.55rem; height:.55rem; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); transition:transform .2s}
.fx[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fx summary:hover{color:var(--accent)}
.fx-body{display:flex; flex-direction:column; gap:.7rem; padding:0 0 1.2rem; max-width:66ch}
.fx-why,.fx-fix{margin:0; font:400 1.02rem/1.6 var(--f-serif); color:var(--ink-2)}
.fx-why{color:var(--ink-3)}
.fx-add{margin:0; white-space:pre-wrap}
.fx-copy{align-self:flex-start; margin-top:-.2rem}
.fx-more{margin:0; font:500 .9rem/1.5 var(--f-ui); color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){ .fx summary::after{transition:none} }