/* 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;
}

/* Tick runs on a fridge with a poor touchscreen and no hover, so its pills
   get a real tap target. Scoped to the app rather than applied globally —
   the others are used on phones and laptops where 5px padding is fine. */
body.app-tick .suite-nav-item {
  font-size: 14px;
  padding: 9px 16px;
}

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