/* Suite navigation — the pill row, lifted from Navigate's own .subnav and
 * promoted to packages/shared so all eight apps share one definition
 * rather than eight drifting copies.
 *
 * packages/shared is the design system's source of truth (see the brief's
 * section 4); scripts/copy-shared.js copies this into each app's
 * public/shared/ at build time, because Pages builds each app from its own
 * root and can't reference across the monorepo at runtime.
 *
 * Apps that already have their own in-app .subnav (Navigate's Atlas /
 * Inbox / Blockers row) keep it — this is the row *above* it, for moving
 * between apps rather than within one.
 */

.suite-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Flush left, not indented under the wordmark. It sits directly above
     the person/filter chip row, and two adjacent pill rows starting at
     different x-positions reads as a mistake. */
  margin: 10px 0 8px;
}

.suite-nav-item {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--cream-bg);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

a.suite-nav-item:hover {
  background: var(--timber-tint);
  color: var(--timber-dark);
  border-color: var(--timber-tint);
}

.suite-nav-item.active {
  background: var(--timber);
  color: #fff;
  border-color: var(--timber);
  cursor: default;
}

/* Deliberately NOT enlarged on Tick any more.
 *
 * The earlier rule made these pills bigger on the fridge for tap-target
 * reasons. That was solving a problem that doesn't exist: on
 * fridge.ourstuff.app the nav is filtered to a single pill, so nobody is
 * aiming at a row of them. On tick.ourstuff.app the enlargement just made
 * navigation compete with the board for attention, which is exactly
 * backwards — navigation is secondary on a household screen.
 *
 * They now sit quieter than the content: no border, no fill, and they
 * only gain a background on hover or when active. */
.suite-nav-item {
  background: transparent;
  border-color: transparent;
  padding: 4px 10px;
  font-size: 11px;
}
.suite-nav-item.active {
  /* The current app stays unmistakable — this is the one that keeps a fill. */
  background: var(--timber);
  border-color: var(--timber);
  color: #fff;
}

@media (max-width: 640px) {
  .suite-nav { gap: 5px; }
}