/* ---------- Shared view toggle ---------- */
/* This is the ONE .view-toggle definition that show-our-work.html and
   workspace.js's Capabilities tab both build on — but it is NOT the only
   `.view-toggle` in the codebase: styles.css:389 defines an unrelated, dead
   rail-toggle under the same class name (its `.vt-btn` child is never used
   anywhere). Only show-our-work.html loads styles.css; workspace.html does
   not. So this file must declare every property this component depends on
   explicitly — it cannot rely on inheriting anything from styles.css's
   cascade, even by accident, or the two hosts render differently. (Concretely:
   styles.css's dead rule happens to also set `padding: 2px` on `.view-toggle`;
   if this file didn't set its own padding, About would silently get 2px from
   that collision while workspace — which never loads styles.css — would get
   none.)
   The two hosts also name the same light palette differently: show-our-work.html
   declares --pine/--card/--wash/--line-2/--ink-* at :root, while workspace.css
   declares the IDENTICAL values as --doc-* (scoped to .center). The --vt-*
   locals below resolve through both, so the component renders the same pixels
   on either host instead of being forked.
     About page  → --doc-accent undefined → falls back to --pine      (#1d4e4a)
     Workspace   → --doc-accent defined                              (#1d4e4a)
   --mono is the exception: show-our-work defines it, workspace.css does NOT (it
   inlines the same stack literally, e.g. workspace.css:415). So --vt-mono falls
   back to the literal stack, not to another token.
   Consumers: show-our-work.html (Why|How), workspace.js Capabilities
   (Functions|Tech Stack). */
.view-toggle {
  --vt-accent: var(--doc-accent, var(--pine));
  --vt-line:   var(--doc-line-2, var(--line-2));
  --vt-card:   var(--doc-card, var(--card));
  --vt-wash:   var(--doc-wash, var(--wash));
  --vt-ink:    var(--doc-ink-3, var(--ink-3));
  --vt-ink-hi: var(--doc-ink-1, var(--ink-1));
  --vt-mono:   var(--mono, ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace);

  display: inline-flex;
  /* gap: 0 is the flex default and therefore inert today, but it is declared
     explicitly (not omitted) so the property-parity test in
     tests/capabilitiesViewTabs.test.js stays strict: styles.css:389's dead
     .view-toggle also sets `gap`, and if this file didn't declare it too, a
     future edit to that dead rule's gap value would silently diverge the two
     hosts with nothing to catch it. */
  gap: 0;
  margin-top: 16px;
  padding: 2px;
  border: 1px solid var(--vt-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--vt-card);
}
.view-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--vt-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vt-ink);
  padding: 7px 18px;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle button + button { border-left: 1px solid var(--vt-line); }
.view-toggle button:hover { color: var(--vt-ink-hi); background: var(--vt-wash); }
.view-toggle button[aria-selected="true"] {
  background: var(--vt-accent);
  color: #fff;
}
.view-toggle button:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: -2px; }