/* Site-wide chrome (<site-header>, js/site-header.js) - the tab bar and
   the logged-out Log in/Join links. See doc/plans/client-design.md's
   "Resolved: site-wide tabs".

   A single horizontal bar at every width for now, matching the table
   design's portrait layout - the landscape/desktop mockups' vertical
   tab-rail was specifically about leaving the felt more room, which
   doesn't apply to ordinary pages the same way. Worth revisiting if a
   horizontal bar turns out cramped on a narrow phone with five tabs
   (once Admin is in the mix), but not assumed to be a problem yet. */

site-header {
  display: block;
}

.site-tabs {
  display: flex;
  border-bottom: 1px solid var(--wood-line);
  background: var(--wood);
}

.site-tab {
  flex: 1;
  position: relative;
  padding: 13px 0 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.site-tab svg {
  width: 21px;
  height: 21px;
}

.site-tab-active {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* Brighter than the tab's own brass accent so it reads as "something
   needs you" rather than blending into the active-tab colour, plus a
   pulse. A bright gold rather than red - Richard: the red pulse
   "looks both angry and quite dark", not the tone this is going for.
   Animates opacity+scale rather than box-shadow - simpler for the
   browser to keep running indefinitely without the visual settling
   Richard saw with the box-shadow version. */
.site-tab-badge {
  position: absolute;
  top: 10px;
  right: calc(50% - 20px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(0.85 0.18 85);
  animation: site-tab-badge-pulse 1.4s ease-in-out infinite;
}

@keyframes site-tab-badge-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

.site-header-login,
.site-header-join {
  display: inline-block;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
}