/*
 * Top bar, page container, page furniture. See 01_tokens.css for the load-order contract.
 */

/* --- Top bar --- */

.site-header {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Inner wrapper so the bar's contents line up with the page container on wide screens
   rather than sitting hard against the viewport edge, while the navy band still runs
   full bleed. */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  max-width: var(--container-max);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.brand:hover .brand-word { text-decoration: underline; }

.brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  letter-spacing: 0.02em;
  flex: none;
}

/* Since the primary actions moved out of the bar and onto the index page (they are
   buttons there), the nav is a short list of destinations only. */
.site-nav { display: flex; gap: var(--gap-1); flex: 1; min-width: 0; }

.site-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.site-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.site-nav a.active { color: var(--white); background: rgba(255, 255, 255, 0.16); }

.session-controls {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  font-size: 0.88rem;
  flex: none;
}
.current-user { display: flex; align-items: center; gap: 0.45rem; opacity: 0.95; min-width: 0; }
.current-user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.role-chip {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}

.button-link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
}
.button-link:hover { background: rgba(255, 255, 255, 0.12); }

/* --- Page container --- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--gap-5) var(--container-pad) 4rem;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.page-header h1 { margin-bottom: 0.15rem; }
.page-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lede { color: var(--muted); margin: 0; max-width: 52rem; }
.page-actions { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }

.page-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  flex-wrap: wrap;
  margin-bottom: var(--gap-3);
}
.page-subheader h2, .page-subheader h3 { margin: 0; }

.review-actions, .row-actions { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }

.back-link {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: var(--gap-2);
}
.back-link:hover { color: var(--navy); text-decoration: underline; }