/* help.html page styles. Owner: FIRM agent. Selectors prefixed .hp-. Calm instructional layout. */
.hp-layout { display: grid; gap: var(--space-8) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .hp-layout { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); } .hp-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.hp-aside { display: grid; gap: 1rem; }
.hp-aside__h { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); margin-bottom: .6rem; }
.hp-topics { padding-bottom: .6rem; }
.hp-topics__list { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--rule-strong); }
.hp-topics__list a { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .4rem; align-items: baseline; padding: .8rem .2rem; border-bottom: 1px solid var(--rule); color: var(--fg-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; transition: color var(--dur-2), padding var(--dur-3) var(--ease-out); }
.hp-topics__list a .mono { font-size: var(--fs-2xs); color: var(--fg-3); }
.hp-topics__list a:hover { color: var(--fg); padding-left: .5rem; }
.hp-topics__list a.is-active { color: var(--green); }
.hp-topics__list a.is-active::before { content: ""; position: absolute; left: -1rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--green); }
.hp-note { padding: 1.1rem 1.2rem; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); color: var(--fg-2); }
.hp-note--quiet { background: none; border-style: dashed; }
.hp-note a { color: var(--link); }

.hp-main { display: grid; gap: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.hp-bar { margin: 0; padding: 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.hp-bar__row { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--ink); color: #E2EEE8; font-size: .78rem; white-space: nowrap; overflow: hidden; }
.hp-bar__logo { font-family: var(--font-display); font-weight: 700; letter-spacing: .18em; color: #fff; font-size: .8rem; }
.hp-bar__nav, .hp-bar__tools { display: flex; align-items: center; gap: .9rem; }
.hp-bar__nav { margin-inline: auto; }
.hp-bar__tools .icon { width: 1em; height: 1em; }
.hp-bar [data-hp] { position: relative; padding: .2rem .45rem; border-radius: 6px; outline: 1px solid rgba(111,209,165,.55); outline-offset: 1px; }
.hp-bar [data-hp]::after { content: attr(data-hp); position: absolute; top: -.55rem; right: -.55rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--mint); color: var(--ink); font: 700 .6rem/1.05rem var(--font-mono); text-align: center; }
.hp-bar__cta { padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); font-weight: 600; }
.hp-bar__menu { display: none; }
.hp-bar__key { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: .8rem .3rem 0; font-size: var(--fs-xs); color: var(--fg-2); }
.hp-bar__key b { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .35rem; border-radius: 50%; background: var(--green); color: #fff; font: 700 .62rem/1 var(--font-mono); }
@media (max-width: 1199.98px) { .hp-bar__nav, .hp-bar__tools > span:nth-child(3), .hp-bar__cta { display: none; } .hp-bar__menu { display: inline; } .hp-bar__tools { margin-left: auto; } }

.hp-chap { scroll-margin-top: calc(var(--header-h) + 24px); }
.hp-chap__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 3px double var(--rule-strong); }
.hp-chap__n { font-size: var(--fs-xs); color: var(--green); }
.hp-chap__t { font-size: var(--fs-h3); letter-spacing: -.012em; scroll-margin-top: calc(var(--header-h) + 24px); }
.hp-chap__t:focus { outline: none; }
.hp-list { list-style: none; margin: 0; padding: 0; counter-reset: hp; }
.hp-list > li { counter-increment: hp; position: relative; display: block; padding: 1.1rem 0 1.1rem 3.2rem; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: var(--fs-md); line-height: 1.68; max-width: 80ch; }
.hp-list > li::before { content: counter(hp, decimal-leading-zero); position: absolute; left: .2rem; top: 1.35rem; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-3); letter-spacing: .06em; }
.hp-list strong { color: var(--fg); }
.hp-list a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.hp-list code { font-family: var(--font-mono); font-size: .88em; }
.hp-sec kbd {
  display: inline-block; min-width: 1.9em; padding: .1em .45em; margin: 0 .05em; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 6px;
  background: var(--surface); color: var(--fg); font: 500 .82em/1.4 var(--font-mono); text-align: center; vertical-align: .05em;
}