:root {
  --fd-nav-bg: #f7f7f7;        /* light background for bar */
  --fd-nav-text: #111;         /* dark text */
  --fd-nav-border: #ddd;       /* subtle border */
  --fd-nav-hover-bg: #111;     /* inverted background on hover */
  --fd-nav-hover-text: #f7f7f7;/* inverted text on hover */
  --fd-nav-gap: 8px;           /* spacing between pills */
  --fd-nav-pad-y: 6px;         /* vertical padding in bar */
  --fd-nav-pad-x: 8px;         /* horizontal padding around pills inside bar */
  --fd-nav-pill-pad-y: 6px;    /* pill vertical padding */
  --fd-nav-pill-pad-x: 10px;   /* pill horizontal padding */
  --fd-nav-z: 1000;            /* z-index above page content */
  --fd-nav-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Fixed rectangular nav container on top-right */
.fd-nav {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: var(--fd-nav-z);
  background: var(--fd-nav-bg);
  color: var(--fd-nav-text);
  border: 1px solid var(--fd-nav-border);
  /* square corners per request (no border-radius) */
  border-radius: 0;
  padding: var(--fd-nav-pad-y) var(--fd-nav-pad-x);
  font-family: var(--fd-nav-font);
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.fd-nav__list {
  list-style: none;
  display: flex;
  gap: var(--fd-nav-gap);
  margin: 0;
  padding: 0;
}

/* Individual rectangular link "pills" */
.fd-nav__link {
  display: inline-block;
  text-decoration: none;
  color: var(--fd-nav-text);
  background: transparent;
  border: 1px solid var(--fd-nav-border);
  /* square corners per request */
  border-radius: 0;
  padding: var(--fd-nav-pill-pad-y) var(--fd-nav-pill-pad-x);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Hover invert: fill space behind text and invert colors */
.fd-nav__link:hover {
  background: var(--fd-nav-hover-bg);
  color: var(--fd-nav-hover-text);
  border-color: var(--fd-nav-hover-bg);
  text-decoration: none;
}

/* Focus visible for keyboard users */
.fd-nav__link:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}

/* Active page indication (also inverted) */
.fd-nav__link.is-active {
  background: var(--fd-nav-hover-bg);
  color: var(--fd-nav-hover-text);
  border-color: var(--fd-nav-hover-bg);
}

/* Safe-area spacing on very small screens */
@supports (padding: max(0px)) {
  .fd-nav {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
}

/* Optional: body top padding helper if pages want to avoid overlap
   (not auto-applied to prevent layout shifts) */
body.fd-has-fixed-nav {
  padding-top: 56px; /* adjust if needed */
}