/* ============================================================
   Direction D — "How it works" docs page.
   Local copy of the results-anchor-nav idiom (career-navigator/css/
   dd-navigator.css) so this page doesn't need to touch navigator
   files. Same visual language, own class names.
   ============================================================ */

.hiw-intro { max-width: 760px; }

/* ---- sticky in-page anchor nav ---- */
.hiw-anchor-nav {
  position: sticky; top: 0; z-index: 30; display: flex; border: 1px solid var(--line);
  background: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  margin: 0 44px 0; overflow-x: auto;
}
.hiw-anchor-nav a { padding: 10px 16px; color: var(--faint); border-right: 1px solid var(--line); white-space: nowrap; }
.hiw-anchor-nav a:last-child { border-right: none; }
.hiw-anchor-nav a:hover { color: var(--fg); }

/* the nav is sticky at top:0, so anchor jumps need breathing room equal to
   the nav's own height + a gap (matches the navigator results idiom). */
.hiw-section { scroll-margin-top: 64px; }

.hiw-section h2 { margin-bottom: 16px; }
.hiw-section p { font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--dim); max-width: 760px; margin: 0 0 14px; }
.hiw-section p strong { color: var(--fg); font-weight: 600; }

.hiw-list { list-style: none; margin: 0 0 14px; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.hiw-list li {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.75; color: var(--dim);
  border-left: 2px solid var(--line); padding-left: 14px;
}
.hiw-list li strong { color: var(--fg); font-weight: 600; }

/* ---- weights table ---- */
.hiw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; max-width: 760px; }
.hiw-table { border-collapse: collapse; width: 100%; min-width: 420px; font-family: var(--font-mono); font-size: 13.5px; }
.hiw-table th, .hiw-table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; white-space: nowrap; }
.hiw-table th { color: var(--faint); font-weight: 600; letter-spacing: 0.05em; background: var(--cardbg); }
.hiw-table td { color: var(--dim); }
.hiw-table td:last-child, .hiw-table th:last-child { color: var(--red); font-weight: 600; }

/* ---- optional "under the hood" depth ---- */
.hiw-details { max-width: 760px; margin: 0 0 14px; border: 1px solid var(--line); padding: 12px 16px; }
.hiw-details summary { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; color: var(--faint); cursor: pointer; }
.hiw-details summary:hover { color: var(--fg); }
.hiw-details p { margin-top: 12px; }

/* ---- footer stamp ---- */
.hiw-stamp {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--faint);
  border-top: 1px solid var(--line); margin: 0; padding: 22px 44px;
}

@media (max-width: 760px) {
  .hiw-anchor-nav { margin: 0 18px 0; }
  .hiw-stamp { padding: 18px 18px; }
}