/* Vector Project's Help Center (/project/help/), PW5 2026-10-18. A copy of
   Engineer's, in yellow. Loaded after /help/help.css (the shared structure) and
   /family.css (the Project yellow). Pages are generated by
   tools/build_help_site.py in the Vector Project repo; this file is hand-written. */

/* family.css turns every link yellow on Project pages; tiles and buttons keep the text colour. */
body.phelp .htile, body.phelp .pn a { color: var(--text); }
body.phelp .chips a { color: var(--muted); }
body.phelp .chips a:hover { color: var(--text); }
body.phelp .chips a[aria-current] { color: #06121F; }
body.phelp header.top nav a[aria-current] { color: var(--text); }
body.phelp .htile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 24px rgba(255, 210, 63, .12); }
body.phelp .hsearch:focus-within { border-color: var(--accent); }
body.phelp .hsec h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 6px; }
body.phelp .hsec .sub { color: var(--muted); margin: 0 0 22px; }
body.phelp .hpage { background: radial-gradient(ellipse at 50% 0%, rgba(58, 46, 8, .6) 0%, rgba(7, 17, 31, 0) 420px); }
body.phelp .hero-shot { padding-top: 0; }
body.phelp .tabs { background: linear-gradient(#1E1A0C, #0E1C2F); border-color: #3A3418; }

/* the browser frame around web screenshots */
.bshot { margin: 0; }
.browser { border-radius: 14px; overflow: hidden; background: #0B1422; border: 1px solid #3A3418;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 210, 63, .08); }
.browser .bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #17150D; border-bottom: 1px solid #2F2A15; }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #45402A; flex: none; }
.browser .bar span { margin-left: 10px; flex: 1; max-width: 360px; font-size: 12px; color: var(--muted); background: #0B1120;
  border-radius: 7px; padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; }
.bshot figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 14px; }

/* a wide screenshot sits under its text; a narrow one beside it */
.hs.wide-shot .bshot { margin-top: 26px; }
.hs.wide-shot .txt { max-width: 820px; }
.hs.has-bshot { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.hs.has-bshot .bshot { position: sticky; top: 20px; }
.hs:not(.has-bshot) .txt { max-width: 820px; }

@media (max-width: 900px) {
  .hs.has-bshot { grid-template-columns: 1fr; gap: 28px; }
  .hs.has-bshot .bshot { position: static; max-width: 420px; }
  .browser .bar span { display: none; }
}

/* Project's yellow on the page top, and the idea on the front page */
body.phelp .fam-product { background: radial-gradient(ellipse 80% 420px at 50% 0, #3A2E08 0%, rgba(7, 17, 31, 0) 100%) no-repeat; }
body.phelp .fam-product .product { background: linear-gradient(90deg, #FFE89A, var(--project));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body.phelp .chips a[aria-current] { color: #241D07; }
body.phelp .idea { max-width: 820px; color: #B7C4D4; font-size: 18px; }
body.phelp .idea p { margin: 0 0 14px; }

/* The topic chips wrap on a wide screen: a mouse can't scroll a row with no
   scrollbar, so the topics past the edge were out of reach (Craig, 2026-10-18).
   Phones keep the one swipeable row. */
@media (min-width: 701px) {
  .chips { flex-wrap: wrap; overflow: visible; }
}