/* Help page (LH-199). Tokens, .top, .brand, .hbtn, .btn, .pill and .tag-assumed come from app.css; this file
   defines no tokens and no raw colors. Classes are hp-* so nothing here touches the explorer's .help sheet. */
body.hp{overflow:auto;display:flex;flex-direction:column;min-height:100%;height:auto}
.hp-top{position:sticky;top:0;z-index:5}
.hp .skip{position:absolute}

.hp-wrap{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:24px 18px 56px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.hp-toc{position:sticky;top:calc(var(--headh) + 16px);font-size:var(--fs-s)}
.hp-toc-h{margin:0 0 6px;font-weight:650;color:var(--ink)}
.hp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.hp-toc a{display:flex;align-items:center;min-height:26px;padding:0 8px;border-radius:var(--r-ctl);color:var(--ink2);text-decoration:none}
.hp-toc a:hover{background:var(--hover)}
.hp-toc a.dim{color:var(--faint)}

.hp-main{max-width:70ch;min-width:0}
.hp-main:focus{outline:0}
.hp-main h1{font-size:var(--fs-2xl);font-weight:700;margin:0 0 14px;letter-spacing:-.005em}
.hp-main h2{font-size:var(--fs-xl);font-weight:650;margin:0 0 10px;scroll-margin-top:calc(var(--headh) + 12px)}
.hp-main h3{font-size:var(--fs-l);font-weight:650;margin:18px 0 6px;scroll-margin-top:calc(var(--headh) + 12px)}
.hp-main p,.hp-main li,.hp-main dd{line-height:1.55;color:var(--ink2)}
.hp-main p{margin:0 0 10px}
.hp-main ul,.hp-main ol{margin:0 0 10px;padding-left:20px}
.hp-main li{margin:0 0 6px}
.hp-main b{color:var(--ink);font-weight:650}
.hp-sec{padding:22px 0 12px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--headh) + 12px)}
.hp-mute{color:var(--mute);font-size:var(--fs-s)}

.hp-find{display:grid;gap:4px;margin:0 0 18px}
.hp-find label{font-size:var(--fs-s);font-weight:650;color:var(--ink)}
.hp-find input{height:34px;width:100%;max-width:420px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--panel);font-size:var(--fs-m)}
.hp-n{margin:0;min-height:18px;font-size:var(--fs-xs);color:var(--mute)}
.hp-none{padding:14px 16px;margin:0 0 18px;border:1px dashed var(--line-strong);border-radius:var(--r-panel)}
.hp-none p{margin:0}

.hp-steps li::marker{font-weight:650;color:var(--ink)}
.hp-tour{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}

.hp-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;margin:0 0 12px;align-items:baseline}
.hp-dl dt{margin:0}
.hp-dl dd{margin:0}
.pill.hp-bad{background:color-mix(in oklch,var(--bad) 14%,var(--panel));color:var(--bad-ink)}
.pill.hp-warn{background:color-mix(in oklch,var(--warn) 14%,var(--panel));color:var(--warn-ink)}
.pill.hp-good{background:color-mix(in oklch,var(--good) 14%,var(--panel));color:var(--good-ink)}
.hp-dl .pill:not(.hp-bad):not(.hp-warn):not(.hp-good){border:1px solid var(--line-strong);color:var(--ink2)}

.hp-faq details{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--headh) + 12px)}
.hp-faq details:first-of-type{border-top:1px solid var(--line)}
.hp-faq summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 2px;cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::before{content:"+";flex:none;width:16px;text-align:center;color:var(--mute);font-weight:500}
.hp-faq details[open]>summary::before{content:"\2212"}
.hp-faq summary:hover{background:var(--hover)}
.hp-faq details p{margin:0 0 12px 24px}
.hp-faq details:target>summary,.hp-faq details.hl>summary{background:var(--sel)}

.hp .foot{flex-wrap:wrap;row-gap:0}
.hp .foot a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink2)}

@media (max-width:860px){
  .hp-wrap{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 14px 48px}
  .hp-toc{position:static;margin:0 -14px 14px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
  .hp-toc-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hp-toc ol{display:flex;flex-wrap:nowrap;gap:4px}
  .hp-toc a{min-height:32px;border:1px solid var(--line-strong);white-space:nowrap}
}
@media (max-width:760px){
  .hp-find input{height:42px;font-size:16px}
  .hp-dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .hp-dl dd{margin-bottom:8px}
  .hp .foot{display:flex;height:auto;padding:6px 14px}
}