/* PLANDRM Client Portal — layout only. All color/type/spacing tokens, buttons,
   inputs, cards, and the login gate come from ../styles.css (shared design tokens);
   this file just lays out the four screens differently from the advisor app's
   sidebar-nav shell, since this portal is deliberately low-density. */

/* the shared stylesheet sets body{overflow:hidden} because the advisor app manages
   its own internal scroll region under a fixed header — this portal has no such
   region, so it needs the page itself to scroll normally. */
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); overflow-y: auto; min-height: auto; }
/* same reasoning as the advisor app's nav/.page rule in ../styles.css — body already
   scrolls (overflow-y:auto above), this just keeps the scrollbar visible instead of
   relying on macOS/Chrome's hidden-until-scrolling default. */
body { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
body::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

.cp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.cp-header-right { display: flex; align-items: center; gap: 14px; }

/* Grouped into "Your Plan" / "Your Money" / "Resources" — each group is its own
   flex column (small uppercase label above a row of tabs) so the 11 items read as
   three related clusters instead of one flat undifferentiated row. Groups wrap
   independently on narrow viewports rather than breaking mid-group. */
.cp-nav {
  display: flex; align-items: flex-end; gap: 22px; row-gap: 12px; flex-wrap: wrap;
  padding: 10px 24px 0; border-bottom: 1px solid var(--border);
}
.cp-nav-group { display: flex; flex-direction: column; gap: 5px; }
.cp-nav-group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); opacity: 0.75; padding: 0 4px;
}
.cp-nav-group-items { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-nav-divider { width: 1px; align-self: stretch; margin-bottom: 10px; background: var(--border); }
.cp-nav-item {
  padding: 10px 16px; font-size: var(--fs-base); font-weight: 600; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; user-select: none;
}
.cp-nav-item:hover { color: var(--text); }
.cp-nav-item.active { color: var(--accent); border-bottom-color: var(--accent); }

.cp-main { max-width: 760px; margin: 0 auto; padding: 24px 24px var(--space-10); }

.cp-readiness { font-size: var(--fs-lg); }
.cp-readiness-good { color: var(--green); }
.cp-readiness-warn { color: var(--yellow); }
.cp-readiness-bad  { color: var(--red); }

.cp-bs-card { margin-bottom: 12px; }
.cp-bs-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--border);
  font-size: var(--fs-base);
}
.cp-bs-row:first-of-type { border-top: none; }

.cp-progress-track {
  height: 8px; border-radius: var(--radius-pill); background: var(--surface-lift);
  overflow: hidden; margin-top: 8px;
}
.cp-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }