*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth cross-document fade between pages (Chrome 126+). Falls back to
   instant navigation in browsers that don't yet support cross-document
   view transitions. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Brand subtitle text is set by nav.js once it reads the role. Hide it
   until that JS pass runs so we never flash CLIENT PORTAL before
   becoming STAFF PORTAL. The .brand-ready class is added by nav.js
   after it sets the text content. */
html:not(.brand-ready) .brand__sub { visibility: hidden; }

/* Role-based nav visibility — pre-paint via the .role-* class set by
   the inline head script. The HTML carries every link in canonical
   (staff) order so there is no JS rearrangement on page load. Clients
   simply have the staff-only items hidden by CSS from the first frame.
   Staff sees Admin as the dashboard (admin.html), so the client-only
   index.html link is hidden for staff. */
html.role-client .primary-nav__link[href="admin.html"],
html.role-client .primary-nav__link[href="intelligence.html"],
html.role-client .primary-nav__link[href="flow.html"],
html.role-client .primary-nav__link[href="compliance.html"],
html.role-staff .primary-nav__link[href="index.html"] {
  display: none;
}

/* User-pill identity is pre-rendered in both variants; CSS picks the
   right one based on role class. Eliminates the Juan→Wanda flash. */
html.role-client .user-pill--staff,
html.role-staff .user-pill--client { display: none; }

/* Role-switcher trigger text — swap between Staff/Client via CSS so
   there's no flash when JS hydrates the role pill. */
.role-switcher__current { font-size: 0; }
.role-switcher__current::before {
  font-size: 13px;
  font-weight: 500;
}
html.role-staff .role-switcher__current::before {
  content: attr(data-role-staff);
}
html.role-client .role-switcher__current::before {
  content: attr(data-role-client);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-page-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

h1 { font-size: var(--fs-28); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-20); }
h3 { font-size: var(--fs-18); }
h4 { font-size: var(--fs-16); }

p {
  margin: 0;
}

a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--color-navy-700);
  text-decoration: underline;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--color-text-muted);
}

.mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}