/**
 * University uniform shell — match campus dark gold UI, full viewport width.
 * Screenshot parity: dark green field, gold edges, wide stage.
 */
:root {
  --cu-vp-max: min(96rem, 100%);
  --cu-gold: #d4b45a;
  --cu-gold-dim: rgba(212, 180, 90, 0.35);
  --cu-teal: #0d4f3c;
  --cu-bg-deep: #0a1210;
  --cu-bg-panel: rgba(12, 22, 18, 0.92);
  --cu-text: #e7efe9;
  --cu-muted: rgba(231, 239, 233, 0.78);
  --cu-banner-bg: linear-gradient(90deg, #0a2a22 0%, #0d4f3c 42%, #145a45 100%);
}

html[data-theme="dark"] body.cu-page,
body.cu-page {
  background: radial-gradient(1000px 520px at 50% -8%, rgba(13, 79, 60, 0.45), var(--cu-bg-deep) 55%) !important;
  color: var(--cu-text) !important;
  min-height: 100vh;
}

/* Full-bleed banner */
header.cu-banner,
body.cu-page > header.cu-banner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.55rem clamp(0.75rem, 2.5vw, 1.5rem) !important;
  background: var(--cu-banner-bg) !important;
  border-bottom: 1px solid var(--cu-gold-dim) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  position: sticky;
  top: 0;
  z-index: 40;
}
.cu-banner .cu-brand {
  color: #f3ead0 !important;
  text-decoration: none !important;
}
.cu-banner .cu-brand small {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: uppercase;
}
.cu-banner .cu-brand strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f7e7b0 !important;
}
.cu-banner .cu-main-link {
  color: #e8c47a !important;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  border: 1px solid var(--cu-gold-dim);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: rgba(0, 0, 0, 0.2);
}

/* Main: near full viewport */
main.cu-wrap,
body.cu-page main.cu-wrap {
  width: 100% !important;
  max-width: var(--cu-vp-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(0.65rem, 2vw, 1.25rem) !important;
  padding-right: clamp(0.65rem, 2vw, 1.25rem) !important;
  box-sizing: border-box !important;
}

/* Pills — gold/green chip row */
nav.cu-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  justify-content: center !important;
  margin: 0.65rem auto 0.85rem !important;
  max-width: var(--cu-vp-max) !important;
}
nav.cu-pills a {
  color: var(--cu-text) !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184, 166, 135, 0.35) !important;
  background: rgba(0, 0, 0, 0.25) !important;
}
nav.cu-pills a.here,
nav.cu-pills a[aria-current="page"] {
  border-color: var(--cu-gold) !important;
  background: rgba(212, 180, 90, 0.18) !important;
  color: #f3ead0 !important;
}

/* Cards / stage — wide */
.cu-how,
.cu-continue,
.cu-stage-band,
.cu-page-hero,
.riwaq-grid,
#clarity-campus-stage,
#cu-phase-gate,
#cu-next-riwaq,
#cu-phase-craft,
.cu-desk-subnav,
.cu-quiet,
.cu-room-lead,
.cu-grid,
.cu-rich-grid {
  max-width: var(--cu-vp-max) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#clarity-campus-stage,
#junior-curriculum-card,
#junior-high-curriculum-card,
#daily-hs-curriculum-card,
#dai-university-curriculum-card,
.curriculum-phase-card {
  max-width: var(--cu-vp-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid var(--cu-gold-dim) !important;
  border-radius: 16px !important;
  background: var(--cu-bg-panel) !important;
  color: var(--cu-text) !important;
}

.cu-page-hero h1 {
  color: #f3ead0 !important;
  font-weight: 800;
}
.cu-page-hero p,
.cu-foot {
  color: var(--cu-muted) !important;
}

.cu-btn {
  border-color: var(--cu-gold-dim) !important;
  color: var(--cu-text) !important;
  background: rgba(31, 166, 122, 0.18) !important;
}

/* Override lean desk 52rem caps */
body.cu-page [style*="max-width:min(52rem"],
body.cu-page [style*="max-width: min(52rem"] {
  max-width: var(--cu-vp-max) !important;
}

footer.cu-foot {
  max-width: var(--cu-vp-max);
  margin: 1.5rem auto;
  padding: 0 clamp(0.65rem, 2vw, 1.25rem) 2rem;
  font-size: 0.78rem;
  text-align: center;
}

@media (min-width: 900px) {
  :root {
    --cu-vp-max: min(100vw - 1.5rem, 110rem);
  }
}