/* HyperCurio — HC-303: the help center.
 *
 * Layout per the ticket: portrait is search, then the topic list, then articles as full-width
 * pages; landscape and desktop put the topics in a left sidebar with the article beside them;
 * desktop adds an "On this page" outline on the far right.
 */

.hp-body { min-height: 100vh; min-height: 100dvh; }
.hp-main { max-width: var(--hc-max); margin: 0 auto; padding: var(--hc-6) var(--hc-pad) var(--hc-16); }

.hp-top { display: grid; gap: var(--hc-4); }
.hp-h1 { font-family: var(--hc-font-display); font-size: var(--hc-h1); font-weight: var(--hc-weight-head); margin: 0; }

.hp-searchwrap { position: relative; max-width: 560px; }
.hp-searchwrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hc-text-muted); pointer-events: none; }
.hp-search { padding-left: 44px; }
.hp-ask { width: auto; justify-self: start; }

.hp-cols { display: grid; gap: var(--hc-6); margin-top: var(--hc-section-gap); }

/* ---------------------------------------------------------------- topics */
.hp-topic + .hp-topic { margin-top: var(--hc-5); }
.hp-topic-h { font-family: var(--hc-font-title); font-size: calc(17px * var(--hc-scale-title)); font-weight: var(--hc-weight-head); margin: 0 0 var(--hc-2); }
.hp-topics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hp-topics a {
  display: block; padding: var(--hc-2) var(--hc-3); border-radius: var(--hc-radius-control);
  color: var(--hc-text-muted); text-decoration: none; font-size: 15px;
}
.hp-topics a:hover { background: var(--hc-surface-1); color: var(--hc-text); }
.hp-topics a[aria-current="page"] { background: var(--hc-surface-2); color: var(--hc-accent); font-weight: 700; }

/* ---------------------------------------------------------------- article */
.hp-article { min-width: 0; max-width: 68ch; }
.hp-crumb { font-family: var(--hc-font-label); color: var(--hc-accent); font-size: var(--hc-eyebrow-size); font-weight: var(--hc-weight-label); letter-spacing: var(--hc-label-track); text-transform: uppercase; margin: 0; }
.hp-art-h1 { font-family: var(--hc-font-display); font-size: var(--hc-h2); font-weight: var(--hc-weight-head); margin: var(--hc-2) 0 0; }
.hp-summary { color: var(--hc-text-muted); font-size: 17px; margin: var(--hc-2) 0 var(--hc-6); }
.hp-article h2 { font-family: var(--hc-font-title); font-size: calc(21px * var(--hc-scale-title)); font-weight: var(--hc-weight-head); margin: var(--hc-6) 0 var(--hc-2); scroll-margin-top: var(--hc-6); }
.hp-article p { margin: 0 0 var(--hc-3); }
.hp-article ul, .hp-article ol { margin: 0 0 var(--hc-3); padding-left: var(--hc-6); }
.hp-article li { margin-bottom: var(--hc-2); }
.hp-article strong { color: var(--hc-text); }

.hp-fig { margin: var(--hc-5) 0; }
.hp-fig img { width: 100%; border-radius: var(--hc-radius-card); border: 1px solid var(--hc-border); background: var(--hc-surface-1); display: block; }
/* The caption repeats the alt text on purpose. It describes what the step shows, which is useful
   to everybody, not only to people who cannot see the picture. */
.hp-fig figcaption { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }

.hp-updated { color: var(--hc-text-disabled); font-size: 13px; margin-top: var(--hc-6); }
.hp-related { margin-top: var(--hc-6); padding-top: var(--hc-5); border-top: 1px solid var(--hc-border); }
.hp-related h2 { font-family: var(--hc-font-title); font-size: calc(19px * var(--hc-scale-title)); margin: 0 0 var(--hc-2); }
.hp-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hc-2); }
.hp-related a { color: var(--hc-accent); }

/* ---------------------------------------------------------------- on this page */
.hp-onthispage { display: none; }
.hp-otp-h { font-family: var(--hc-font-label); font-size: var(--hc-label-size); font-weight: var(--hc-weight-label); letter-spacing: var(--hc-label-track); text-transform: uppercase; color: var(--hc-text-muted); margin: 0 0 var(--hc-2); }
.hp-onthispage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hc-2); }
.hp-onthispage a { color: var(--hc-text-muted); text-decoration: none; font-size: 14px; }
.hp-onthispage a:hover { color: var(--hc-text); }

/* ---------------------------------------------------------------- landscape */
@media (min-width: 600px) {
  .hp-cols { grid-template-columns: 240px 1fr; align-items: start; }
  .hp-topics { position: sticky; top: var(--hc-5); }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
  .hp-cols { grid-template-columns: 260px minmax(0, 1fr) 220px; }
  .hp-onthispage { display: block; position: sticky; top: var(--hc-5); }
}
/* 861: a link on its own line is a button. */
.hp-action .hc-btn { width: auto; display: inline-flex; text-decoration: none; }