/* site-help.css — the guides page.
   Shares style.css and legal.css for chrome, colour and type; this is only the
   layout the guides need. Kept visually in step with the extension's Help
   Centre (same grouping, same section order, same reading rhythm) so the two
   surfaces feel like one product rather than two documents. */

.sh-main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px; }

/* ── Guided onboarding ─────────────────────────────────────────────── */
.sh-hero { margin-bottom: 30px; }
.sh-hero h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; }
.sh-lede { font-size: 16px; opacity: .8; margin: 0 0 22px; max-width: 62ch; }

.sh-onboard {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.sh-onboard li {
  position: relative; padding: 16px 16px 16px 52px;
  border-radius: 12px;
  background: rgba(139, 92, 246, .07);
  border: 1px solid rgba(139, 92, 246, .18);
}
.sh-step-n {
  position: absolute; left: 14px; top: 15px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(139, 92, 246, .22); color: #c4b5fd;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sh-onboard strong { display: block; margin-bottom: 3px; }
.sh-onboard span:not(.sh-step-n) { font-size: 13.5px; opacity: .82; }

/* ── Search ────────────────────────────────────────────────────────── */
.sh-search-wrap { margin: 0 0 20px; }
.sh-search {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, .3);
  background: rgba(255, 255, 255, .04);
  color: inherit; font: inherit;
}
.sh-search:focus { outline: 2px solid rgba(139, 92, 246, .55); outline-offset: 1px; }

/* ── Layout ────────────────────────────────────────────────────────── */
.sh-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .sh-layout { grid-template-columns: 1fr; } }

.sh-nav { position: sticky; top: 18px; max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 820px) { .sh-nav { position: static; max-height: 320px; } }

.sh-group {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .55; margin: 16px 0 6px; padding-left: 10px;
}
.sh-group:first-child { margin-top: 0; }

.sh-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: none; border-radius: 9px;
  background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.sh-nav-item:hover { background: rgba(255, 255, 255, .05); }
.sh-nav-item.is-active { background: rgba(139, 92, 246, .18); font-weight: 600; }
.sh-nav-icon { flex: none; }
.sh-nav-label { font-size: 14px; }

/* ── Article ───────────────────────────────────────────────────────── */
.sh-article { min-width: 0; }
.sh-article:focus { outline: none; }
.sh-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #a78bfa; margin-bottom: 6px;
}
.sh-title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.sh-purpose { font-size: 16px; opacity: .85; margin: 0 0 24px; max-width: 68ch; }

.sh-sec { margin-bottom: 26px; }
.sh-h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .55; margin: 0 0 10px;
}
.sh-list { margin: 0; padding-left: 20px; max-width: 70ch; }
.sh-list li { margin-bottom: 8px; }

/* The walkthrough reads as one sequence, with a spine joining the steps. */
.sh-walk { list-style: none; counter-reset: shwalk; padding: 0; margin: 0; max-width: 70ch; }
.sh-walk li { counter-increment: shwalk; position: relative; padding: 0 0 14px 40px; }
.sh-walk li::before {
  content: counter(shwalk);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(139, 92, 246, .18); color: #c4b5fd;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sh-walk li:not(:last-child)::after {
  content: ''; position: absolute; left: 12.5px; top: 28px; bottom: 4px;
  width: 1px; background: rgba(139, 92, 246, .22);
}
.sh-walk-title { display: block; font-weight: 700; margin-bottom: 3px; }
.sh-walk-body { display: block; opacity: .84; }

.sh-issue {
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 8px; max-width: 70ch;
}
.sh-issue summary { cursor: pointer; font-weight: 600; }
.sh-issue p { margin: 9px 0 0; opacity: .84; }

.sh-empty { opacity: .7; margin-top: 20px; }

@media (prefers-color-scheme: light) {
  .sh-search { background: rgba(0, 0, 0, .03); }
  .sh-nav-item:hover { background: rgba(0, 0, 0, .05); }
  .sh-issue { border-color: rgba(0, 0, 0, .12); }
}

/* The help sidebar is the primary navigation on this page and its items
   were 37px — under the 44px touch floor, in a list where mis-taps send
   you to the wrong article entirely. */
@media (max-width: 720px) {
  .sh-nav-item { min-height: 44px; }
  .sh-toc a, .sh-article a { min-height: 32px; display: inline-flex; align-items: center; }
}