/* Written by website/add-header-buttons.sh (King Teen Patti repository): the header's
   Documentation and Dashboard buttons. Their pages need the team's Google sign-in.
   Reads style.css's colours (--fg, --gold, --line-2, --line-3); loaded after it. */
.site-nav .nav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  padding: 7px 14px; /* the 1px border keeps it as tall as the text links (8px) */
  transition: color .2s, background-color .2s, border-color .2s;
}
.site-nav a:not(.nav-pill) + .nav-pill { margin-left: 10px; }
.site-nav .nav-pill + .nav-pill { margin-left: 6px; }
.site-nav .nav-pill:hover { color: var(--fg); border-color: var(--line-3); background: rgba(255, 206, 120, .07); }
.site-nav .nav-pill svg {
  flex: none; width: 15px; height: 15px; color: var(--gold);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* A narrow desktop: the icons alone, so the header never wraps (the words stay for a screen reader).
   The words fit from about 900px; 960px keeps room for a wider fallback font. */
@media (min-width: 720px) and (max-width: 959px) {
  .site-nav .nav-pill { padding: 7px 10px; }
  .site-nav .nav-pill .pill-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
/* A phone: the menu's drop-down column, each button a full-width row like the other links. */
@media (max-width: 719px) {
  .js .site-nav .nav-pill,
  .js .site-nav a:not(.nav-pill) + .nav-pill { margin-left: 0; padding: 13px 11px; gap: 10px; }
  .js .site-nav .nav-pill svg { width: 17px; height: 17px; }
  html:not(.js) .site-nav .nav-pill,
  html:not(.js) .site-nav a:not(.nav-pill) + .nav-pill { margin-left: 0; padding: 5px 8px; }
  html:not(.js) .site-nav .nav-pill .pill-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}