/* Vector Engineer's Help Center (/engineer/help/), W8 2026-09-27. Loaded after
   /help/help.css (the shared structure) and /family.css (the Engineer violet).
   Pages are generated by tools/build_help_site.py in the Vector Engineer repo;
   this file is hand-written. */

/* family.css turns every link violet on Engineer pages; tiles and buttons keep the text colour. */
body.ehelp .htile, body.ehelp .pn a { color: var(--text); }
body.ehelp .chips a { color: var(--muted); }
body.ehelp .chips a:hover { color: var(--text); }
body.ehelp .chips a[aria-current] { color: #06121F; }
body.ehelp header.top nav a[aria-current] { color: var(--text); }
body.ehelp .htile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 24px rgba(167, 139, 250, .14); }
body.ehelp .hsearch:focus-within { border-color: var(--accent); }
body.ehelp .hsec h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 6px; }
body.ehelp .hsec .sub { color: var(--muted); margin: 0 0 22px; }
body.ehelp .hpage { background: radial-gradient(ellipse at 50% 0%, rgba(42, 31, 92, .55) 0%, rgba(7, 17, 31, 0) 420px); }
body.ehelp .hero-shot { padding-top: 0; }
body.ehelp .tabs { background: linear-gradient(#1A1638, #0E1C2F); border-color: #34305E; }

/* the browser frame around web screenshots */
.bshot { margin: 0; }
.browser { border-radius: 14px; overflow: hidden; background: #0B1422; border: 1px solid #2E2A55;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(167, 139, 250, .10); }
.browser .bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #141A2E; border-bottom: 1px solid #262B47; }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A3F5C; 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; }
}