/* Shared base for every page bundle: design tokens that must not diverge between
   the homepage, the introduction, the use-case catalog, and the case pages. */
:root {
  /* Warm neutrals from the page palette, so a scrollbar reads as part of the paper. */
  --scrollbar-thumb: #d5d8ca;
  --scrollbar-thumb-hover: #bcc0ad;
  --scrollbar-size: 11px;
  /* scrollbar-width and scrollbar-color inherit, so Firefox needs this once. */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit and Blink keep their own pseudo-elements; unprefixed rules reach every
   scroll container, including dialogs and the workspace panes. */
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

/* The GitHub mark in every top bar, beside the main call to action. */
.github-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 8px; color: #283734; transition: background .2s, color .2s; }
.github-link:hover { background: #2837340d; color: #000; }
.github-link:focus-visible { outline: 2px solid #6691c3; outline-offset: 2px; }
.story-actions { display: inline-flex; align-items: center; gap: 10px; }
.social-links { display: inline-flex; align-items: center; gap: 4px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: #5d6f69; transition: background .2s, color .2s; }
.social-links a:hover { background: #2837340d; color: #283734; }
.footer-brand .social-links { display: flex; margin: 10px 0 0 -8px; }
.story-footer .social-links { margin-left: 4px; }
/* Phones: the hero repeats "Explore the workspace" right below, so the bar keeps the GitHub mark and the menu. */
@media (max-width: 480px) { .site-header .header-actions > .button { display: none; } }