/* ==========================================================================
   Resident portal (foundry.today/dashboard)

   The portal's own stylesheet. It is linked by
   views/partials/dashboard-head.ejs when the page is a resident portal page
   (res.locals.residentPortal, set for /dashboard in server.js, and never on a
   page that wears the staff chrome), and by views/partials/_auth-head.ejs for
   the sign-in pages that lead into the portal. The marketing website and the
   internal platform never load it.

   Every selector starts with `.rpx` — the class the portal puts on <body> —
   and every token is a `--rpx-*` custom property set on `.rpx`, never on
   :root. So even a page that loaded this file by mistake would not change:
   nothing here can match an element outside an `.rpx` ancestor.
   tests/portal-css-is-scoped.test.js holds both rules.

   The design: one quiet surface, white cards on a warm grey ground, one
   accent (the brand orange) kept for the main action and the current page.
   Satoshi for headings and Inter for text, the brand pair the portal already
   loads (views/partials/fonts.ejs).
   ========================================================================== */

.rpx {
  --rpx-ink: #16181D;
  --rpx-ink-2: #3A3F48;
  --rpx-muted: #5E636E;
  --rpx-faint: #6B7079;
  --rpx-line: #E6E4DF;
  --rpx-line-soft: #EFEDE8;
  --rpx-bg: #F4F3F0;
  --rpx-surface: #FFFFFF;
  --rpx-surface-2: #FAFAF8;
  --rpx-neutral: #F1F0EC;
  --rpx-accent: #C43E15;
  --rpx-accent-hover: #A8320E;
  --rpx-accent-soft: #FDF1EC;
  --rpx-accent-ink: #7A2A0F;
  --rpx-danger: #B42318;
  --rpx-danger-ink: #8A1C12;
  --rpx-danger-soft: #FEF0EE;
  --rpx-info: #2F4A8A;
  --rpx-info-soft: #EEF2FB;
  --rpx-success: #1F7A45;
  --rpx-success-ink: #1F5135;
  --rpx-success-soft: #EAF5EE;
  --rpx-warn-ink: #7A4B00;
  --rpx-warn-soft: #FDF5E6;

  --rpx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rpx-font-display: 'Satoshi', 'Inter', system-ui, sans-serif;

  --rpx-r-card: 20px;
  --rpx-r-item: 16px;
  --rpx-r-control: 12px;
  --rpx-shadow-pop: 0 12px 32px rgba(22, 24, 29, 0.12);

  --rpx-sidebar-w: 248px;
  --rpx-tabbar-h: 64px;
  --rpx-gutter: 40px;

  background: var(--rpx-bg);
  color: var(--rpx-ink);
  font-family: var(--rpx-font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shell: header ----------
   A slim app bar: the name on the left, lined up with the menu, linking to
   the portal home, and the account on the right. The two height tokens
   are re-declared here (styles.css explains them) so everything that sits
   under the header — the sticky sidebar, the preview strip — follows. */

.rpx {
  --header-height-base: 64px;
  --header-height: calc(var(--header-height-base) + var(--top-banner-height, 0px) + var(--preview-strip-height, 0px));
}
.rpx .header {
  --header-pad-x: 24px;
  padding: 0 var(--header-pad-x);
  background: var(--rpx-surface);
  border-bottom: 1px solid var(--rpx-line);
  box-shadow: none;
}
.rpx .header .header-inner { height: var(--header-height-base); max-width: none; }
.rpx .header .logo { flex-direction: row; align-items: center; gap: 10px; text-decoration: none; }
.rpx .header .logo-title {
  font-family: var(--rpx-font-display);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rpx-ink);
}
.rpx .header .logo-tagline { display: none; }
.rpx .header .header-actions { gap: 12px; }
.rpx .header .nav-profile-btn { width: 36px; height: 36px; border: none; box-shadow: none; }
.rpx .header .nav-profile-btn span { font-family: var(--rpx-font); font-size: 15px; font-weight: 600; }

/* The hidden attribute always hides, even on an element the portal draws as
   flex or grid (a card, a row). */
.rpx [hidden] { display: none !important; }

/* ---------- Shell: layout, sidebar ---------- */

.rpx .dashboard-layout { background: var(--rpx-bg); }

.rpx .dashboard-sidebar {
  width: var(--rpx-sidebar-w);
  background: var(--rpx-surface);
  border-right: 1px solid var(--rpx-line);
  padding: 20px 12px 12px;
}
.rpx .dashboard-sidebar nav { gap: 2px; }
.rpx .dashboard-sidebar nav a,
.rpx .dashboard-sidebar .sidebar-foot-item {
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--rpx-ink-2);
  font-family: var(--rpx-font);
  font-size: 15px;
  font-weight: 500;
  gap: 12px;
  border-right: none;
}
.rpx .dashboard-sidebar nav a svg,
.rpx .dashboard-sidebar .sidebar-foot-item svg { width: 20px; height: 20px; stroke-width: 1.8; }
.rpx .dashboard-sidebar nav a:hover,
.rpx .dashboard-sidebar .sidebar-foot-item:hover { background: var(--rpx-neutral); color: var(--rpx-ink); }
.rpx .dashboard-sidebar nav a.active,
.rpx .dashboard-sidebar .sidebar-foot-item.active {
  background: var(--rpx-accent-soft);
  color: var(--rpx-accent);
  border-right: none;
  font-weight: 600;
}
.rpx .dashboard-sidebar .sidebar-section-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rpx-faint); padding: 18px 12px 6px;
}
.rpx .dashboard-sidebar nav a .sidebar-chip {
  flex: 0 0 auto !important; overflow: visible !important;
  margin-left: auto; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 999px; background: var(--rpx-neutral); color: var(--rpx-ink-2);
}
.rpx .dashboard-sidebar__foot {
  border-top: 1px solid var(--rpx-line-soft);
  margin-top: 8px; padding-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.rpx .dashboard-sidebar .sidebar-collapse-btn { color: var(--rpx-faint); }
.rpx .dashboard-sidebar.collapsed { width: 72px; }

/* The count on a nav link (bills to pay). */
.rpx .rpx-nav-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  border-radius: 11px; background: var(--rpx-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  flex: 0 0 auto !important; overflow: visible !important;
}

/* ---------- Shell: main column ---------- */

.rpx .dashboard-main {
  background: var(--rpx-bg);
  padding: 40px var(--rpx-gutter) 72px;
  min-width: 0;
}
.rpx .dashboard-main h1 {
  font-family: var(--rpx-font-display);
  font-size: 36px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rpx-ink);
  margin: 0 0 8px;
}
.rpx .dashboard-main > h2,
.rpx .dashboard-main h2 { font-family: var(--rpx-font-display); color: var(--rpx-ink); letter-spacing: -0.01em; }
.rpx .dashboard-main a { text-underline-offset: 3px; }

/* The page column. Pages that use the portal's own markup wrap their content
   in .rpx-page; the max width keeps lines readable on a wide screen. */
.rpx .rpx-page {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rpx .rpx-page--narrow { max-width: 820px; }
.rpx .rpx-page-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.rpx .rpx-page-head__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 320px; }
.rpx .rpx-page-head h1 { margin: 0; }
.rpx .rpx-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--rpx-muted); max-width: 680px; }

/* ---------- Text ---------- */

.rpx .rpx-h2 {
  margin: 0;
  font-family: var(--rpx-font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rpx-ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rpx .rpx-h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--rpx-ink); }
.rpx .rpx-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rpx-faint); }
.rpx .rpx-eyebrow--accent { color: var(--rpx-accent); }
.rpx .rpx-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rpx-ink-2); }
.rpx .rpx-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--rpx-muted); }
.rpx .rpx-small { font-size: 14px; line-height: 1.5; color: var(--rpx-muted); }
.rpx .rpx-amount {
  font-family: var(--rpx-font-display);
  font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rpx-ink);
}
.rpx .rpx-count {
  min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 14px;
  background: var(--rpx-ink); color: #fff; font-family: var(--rpx-font);
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Links and buttons ---------- */

.rpx .rpx-link {
  color: var(--rpx-accent); font-weight: 600; font-size: 15px; text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.rpx .rpx-link:hover { color: var(--rpx-accent-hover); text-decoration: underline; }

/* One rule for buttons across the portal:
   - orange, filled (.rpx-btn): the one main action on a screen — Pay, Submit,
     Book. The same orange as the CTAs on foundry.today.
   - white with a grey border (.rpx-btn--secondary, .rpx-round): every other
     action — Extend stay, See details, Cancel, Copy, the slider arrows.
   - black is for emphasis that is not clickable (counts, step numbers, a
     total), with one exception: the team slider's "next" arrow. */
.rpx .rpx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; box-sizing: border-box;
  padding: 11px 22px;
  border-radius: var(--rpx-r-control);
  border: 1px solid var(--rpx-accent);
  background: var(--rpx-accent);
  color: #fff;
  font-family: var(--rpx-font);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rpx .rpx-btn:hover { background: var(--rpx-accent-hover); border-color: var(--rpx-accent-hover); color: #fff; text-decoration: none; }
.rpx .rpx-btn:focus-visible,
.rpx .rpx-link:focus-visible,
.rpx .rpx-tile:focus-visible,
.rpx .rpx-item--link:focus-visible { outline: 3px solid rgba(196, 62, 21, .35); outline-offset: 2px; }
.rpx .rpx-btn--secondary { background: var(--rpx-surface); color: var(--rpx-ink); border-color: #D9D6CF; }
.rpx .rpx-btn--secondary:hover { background: var(--rpx-surface-2); color: var(--rpx-ink); border-color: #C9C5BC; }
.rpx .rpx-btn--block { width: 100%; }
.rpx .rpx-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.rpx .rpx-btn:disabled,
.rpx .rpx-btn[aria-disabled="true"] {
  background: #EFEEE8; border-color: #EFEEE8; color: #8A8980; cursor: not-allowed; pointer-events: none;
}
/* The reason a button is disabled, shown next to it. */
.rpx .rpx-why { font-size: 14px; color: var(--rpx-muted); }
.rpx .rpx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Badges ---------- */

.rpx .rpx-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; line-height: 1.4;
  background: var(--rpx-neutral); color: var(--rpx-ink-2);
}
.rpx .rpx-badge--danger { background: var(--rpx-danger-soft); color: var(--rpx-danger-ink); }
.rpx .rpx-badge--success { background: var(--rpx-success-soft); color: var(--rpx-success-ink); }
.rpx .rpx-badge--info { background: var(--rpx-info-soft); color: var(--rpx-info); }
.rpx .rpx-badge--warn { background: var(--rpx-warn-soft); color: var(--rpx-warn-ink); }
.rpx .rpx-badge--accent { background: var(--rpx-accent-soft); color: var(--rpx-accent-ink); }

/* ---------- Cards ---------- */

.rpx .rpx-card {
  background: var(--rpx-surface);
  border: 1px solid var(--rpx-line);
  border-radius: var(--rpx-r-card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
  min-width: 0;
  box-sizing: border-box;
}
.rpx .rpx-card--flush { padding: 0; gap: 0; overflow: clip; }
.rpx .rpx-card--dark { background: var(--rpx-ink); border-color: var(--rpx-ink); color: #fff; }
.rpx .rpx-card--dark .rpx-h2,
.rpx .rpx-card--dark .rpx-h3 { color: #fff; }
.rpx .rpx-card--dark .rpx-sub,
.rpx .rpx-card--dark .rpx-small { color: #C9CBD0; }
.rpx .rpx-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rpx .rpx-card__foot {
  border-top: 1px solid var(--rpx-line-soft); padding-top: 18px;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.rpx .rpx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.rpx .rpx-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.rpx .rpx-stack { display: flex; flex-direction: column; gap: 12px; }
.rpx .rpx-section { display: flex; flex-direction: column; gap: 16px; }

/* A row in a list of things to do: icon, text, one action. */
.rpx .rpx-item {
  background: var(--rpx-surface);
  border: 1px solid var(--rpx-line);
  border-radius: var(--rpx-r-item);
  padding: 20px 24px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  color: var(--rpx-ink);
  text-decoration: none;
}
.rpx a.rpx-item--link:hover { border-color: #D9D6CF; background: var(--rpx-surface-2); text-decoration: none; color: var(--rpx-ink); }
.rpx .rpx-item__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rpx .rpx-item__title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--rpx-ink); }
.rpx .rpx-item__sub { font-size: 15px; line-height: 1.45; color: var(--rpx-muted); }
.rpx .rpx-item__chev { color: var(--rpx-faint); flex: none; }

.rpx .rpx-icon {
  width: 44px; height: 44px; border-radius: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rpx-neutral); color: var(--rpx-ink-2);
}
.rpx .rpx-icon--square { border-radius: 12px; }
.rpx .rpx-icon--danger { background: var(--rpx-danger-soft); color: var(--rpx-danger); }
.rpx .rpx-icon--info { background: var(--rpx-info-soft); color: var(--rpx-info); }
.rpx .rpx-icon--accent { background: var(--rpx-accent-soft); color: var(--rpx-accent); }
.rpx .rpx-icon--success { background: var(--rpx-success-soft); color: var(--rpx-success); }
.rpx .rpx-icon svg { width: 20px; height: 20px; }

/* A soft box inside a card for one short message. */
.rpx .rpx-note {
  border-radius: 12px; padding: 14px 16px;
  background: var(--rpx-surface-2); border: 1px solid var(--rpx-line-soft);
  font-size: 15px; line-height: 1.5; color: var(--rpx-ink-2);
  display: flex; flex-direction: column; gap: 4px;
}
.rpx .rpx-note strong { color: var(--rpx-ink); font-weight: 600; }
.rpx .rpx-note--accent { background: var(--rpx-accent-soft); border-color: #F6DACE; color: var(--rpx-accent-ink); }
.rpx .rpx-note--accent strong { color: var(--rpx-accent-ink); }
.rpx .rpx-note--danger { background: var(--rpx-danger-soft); border-color: #F7D4CF; color: var(--rpx-danger-ink); }
.rpx .rpx-note--danger strong { color: var(--rpx-danger-ink); }
.rpx .rpx-note--info { background: var(--rpx-info-soft); border-color: #D9E1F3; color: var(--rpx-info); }
.rpx .rpx-note--row { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Facts shown as small tiles: label above, value below. */
.rpx .rpx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.rpx .rpx-tile {
  background: var(--rpx-surface-2); border: 1px solid var(--rpx-line-soft); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.rpx .rpx-tile__label { font-size: 13px; font-weight: 500; color: var(--rpx-muted); }
.rpx .rpx-tile__value { font-size: 17px; font-weight: 600; color: var(--rpx-ink); line-height: 1.35; overflow-wrap: anywhere; }
.rpx .rpx-tile__value--code { font-size: 20px; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.rpx .rpx-tile__value--code .rpx-small { letter-spacing: 0; font-weight: 500; }

/* A definition list: label, value. */
.rpx .rpx-dl { margin: 0; display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 0 20px; }
.rpx .rpx-dl dt, .rpx .rpx-dl dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--rpx-line-soft); font-size: 15px; line-height: 1.5; }
.rpx .rpx-dl dt { color: var(--rpx-muted); font-weight: 500; }
.rpx .rpx-dl dd { color: var(--rpx-ink); overflow-wrap: anywhere; }
.rpx .rpx-dl dt:first-of-type, .rpx .rpx-dl dt:first-of-type + dd { border-top: none; padding-top: 0; }

/* Progress bar. */
.rpx .rpx-progress { display: block; height: 6px; border-radius: 3px; background: #EFEDE8; max-width: 320px; overflow: hidden; }
.rpx .rpx-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--rpx-ink); }

/* An address or place, as one pill that links somewhere. */
.rpx .rpx-pill {
  align-self: flex-start; max-width: 100%; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: 999px;
  padding: 12px 18px; color: var(--rpx-ink); font-size: 15px; text-decoration: none;
}
.rpx a.rpx-pill:hover { border-color: #D9D6CF; color: var(--rpx-ink); text-decoration: none; }
.rpx .rpx-pill__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpx .rpx-pill svg { flex: none; }

/* ---------- Team slider ---------- */

.rpx .rpx-team { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rpx .rpx-team__track { position: relative; }
.rpx .rpx-team__card {
  background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card);
  padding: 20px; display: flex; gap: 20px; align-items: center;
}
/* With JavaScript the cards share one grid cell: the box takes the tallest
   card's height and keeps it, so moving between people does not jump. */
.rpx .rpx-team.is-sliding .rpx-team__track { display: grid; }
.rpx .rpx-team.is-sliding .rpx-team__card { grid-area: 1 / 1; transition: opacity .2s ease; }
.rpx .rpx-team.is-sliding .rpx-team__card.is-off { visibility: hidden; opacity: 0; }
.rpx .rpx-team:not(.is-sliding) .rpx-team__track { display: flex; flex-direction: column; gap: 12px; }

/* "Meet the team": the slider as its own section, on phones and tablets. */
.rpx .rpx-meet { display: none; }

/* Below this width the greeting and the slider no longer fit side by side,
   so the team moves under "Needs your attention" as its own section. */
@media (max-width: 1199px) {
  .rpx .rpx-hello .rpx-team { display: none; }
  .rpx .rpx-meet { display: flex; }
}
.rpx .rpx-team__photo { width: 104px; height: 104px; border-radius: 52px; object-fit: cover; flex: none; background: var(--rpx-neutral); }
.rpx .rpx-team__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rpx .rpx-team__who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rpx .rpx-team__name { font-size: 17px; font-weight: 700; color: var(--rpx-ink); }
.rpx .rpx-team__role { font-size: 14px; font-weight: 500; color: var(--rpx-muted); }
.rpx .rpx-team__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--rpx-ink-2); }
.rpx .rpx-team__nav { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.rpx .rpx-team__dots { display: flex; gap: 8px; }
.rpx .rpx-team__dot { width: 8px; height: 8px; border-radius: 4px; background: #CFCCC4; transition: width .2s, background .2s; }
.rpx .rpx-team__dot.is-on { width: 24px; background: var(--rpx-ink); }
.rpx .rpx-team__arrows { display: flex; gap: 8px; }
.rpx .rpx-round {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--rpx-line);
  background: var(--rpx-surface); color: var(--rpx-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
/* The slider's "next" arrow is filled black: it is the one arrow people need
   to see is clickable. The only black button in the portal. */
.rpx .rpx-round--dark { background: var(--rpx-ink); border-color: var(--rpx-ink); color: #fff; }
.rpx .rpx-round:hover { background: var(--rpx-surface-2); }
.rpx .rpx-round--dark:hover { background: #2B2E35; border-color: #2B2E35; color: #fff; }
.rpx .rpx-whatsapp { display: inline-flex; align-items: center; gap: 8px; }

/* The team as a grid of cards (the house guide). */
.rpx .rpx-person { display: flex; gap: 14px; align-items: center; }
.rpx .rpx-person__photo { width: 56px; height: 56px; border-radius: 28px; object-fit: cover; flex: none; background: var(--rpx-neutral); }
.rpx .rpx-person__initial {
  width: 56px; height: 56px; border-radius: 28px; flex: none; background: var(--rpx-neutral); color: var(--rpx-ink);
  font-weight: 700; font-size: 20px; display: inline-flex; align-items: center; justify-content: center;
}
.rpx .rpx-person__name { font-size: 16px; font-weight: 700; color: var(--rpx-ink); }
.rpx .rpx-person__role { font-size: 14px; color: var(--rpx-muted); }

/* ---------- Home ---------- */

.rpx .rpx-hello { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.rpx .rpx-hello__main { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rpx .rpx-hello__title { display: flex; flex-direction: column; gap: 6px; }
.rpx .rpx-hello .rpx-team { flex: 1 1 440px; max-width: 560px; }
.rpx .rpx-hello h1 { font-size: 40px; }

/* ---------- Stay ---------- */

.rpx .rpx-timeline { display: flex; flex-direction: column; }
.rpx .rpx-timeline__step { display: flex; gap: 16px; }
.rpx .rpx-timeline__rail { display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.rpx .rpx-timeline__dot { width: 12px; height: 12px; border-radius: 6px; background: var(--rpx-accent); flex: none; }
.rpx .rpx-timeline__dot--next { background: transparent; border: 2px solid #9A9EA6; box-sizing: border-box; }
.rpx .rpx-timeline__line { width: 2px; flex: 1; background: var(--rpx-line); margin: 6px 0; }
.rpx .rpx-timeline__body { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; min-width: 0; }
.rpx .rpx-timeline__step:last-child .rpx-timeline__body { padding-bottom: 0; }
.rpx .rpx-big { font-family: var(--rpx-font-display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--rpx-ink); }

/* ---------- Lists inside a card ---------- */

.rpx .rpx-rows { list-style: none; margin: 0; padding: 0; }
.rpx .rpx-row {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px 24px;
  border-top: 1px solid var(--rpx-line-soft);
}
.rpx .rpx-rows > .rpx-row:first-child { border-top: none; }
.rpx .rpx-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rpx .rpx-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 600; color: var(--rpx-ink); }
.rpx .rpx-row__sub { font-size: 14px; line-height: 1.45; color: var(--rpx-muted); }
.rpx .rpx-row__amount { font-size: 17px; font-weight: 700; color: var(--rpx-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpx .rpx-row__aside { font-size: 14px; font-weight: 600; color: var(--rpx-ink-2); white-space: nowrap; }

/* ---------- Home: in the house ---------- */

.rpx .rpx-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.rpx .rpx-details > summary::-webkit-details-marker { display: none; }
.rpx .rpx-details > summary::after {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s; opacity: .7;
}
.rpx .rpx-details[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.rpx .rpx-checklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rpx .rpx-checklist label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--rpx-ink-2); cursor: pointer; }
.rpx .rpx-checklist input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rpx-accent); flex: none; }
.rpx .rpx-checklist .dl-week__step--done span { color: var(--rpx-faint); text-decoration: line-through; }
.rpx .rpx-event { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rpx-line-soft); }
.rpx .rpx-rows > .rpx-event:first-child { border-top: none; padding-top: 0; }

/* The startups card (views/dashboard/_startups-list.ejs) keeps its markup and
   wears the portal's card. */
.rpx .dl-startups { background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card); padding: 28px; }
.rpx .dl-startups__head { border-bottom: none; padding-bottom: 0; margin-bottom: 8px; align-items: center; gap: 10px; }
.rpx .dl-startups__title { font-family: var(--rpx-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--rpx-ink); }
.rpx .dl-startups__count { background: var(--rpx-neutral); color: var(--rpx-ink-2); font-size: 13px; font-weight: 600; padding: 2px 9px; }
.rpx .dl-startups__card { border-bottom: 1px solid var(--rpx-line-soft); padding: 16px 0; gap: 14px; }
.rpx .dl-startups__logo { width: 48px; height: 48px; border-radius: 12px; background: var(--rpx-neutral); }
.rpx .dl-startups__name { font-size: 16px; color: var(--rpx-ink); }
.rpx .dl-startups__empty-line { font-size: 15px; color: var(--rpx-muted); margin: 0 0 14px; }
.rpx .dl-startups__foot { border-top: 1px solid var(--rpx-line-soft); padding-top: 14px; margin-top: 4px; font-size: 15px; }
.rpx .dl-startups__link { color: var(--rpx-accent); font-weight: 600; }
.rpx .dl-startups .btn--small { min-height: 40px; padding: 9px 16px; }

/* ---------- Payments (views/dashboard/rent.ejs) ----------
   The class names the page script reads (public/js/dashboard-rent.js) stay:
   hub-row, hub-check, hub-row--checked, hub-foot, hub-error, hub-nudge. */

.rpx .hub-row--selectable { cursor: pointer; }
.rpx .hub-row--selectable:hover { background: var(--rpx-surface-2); }
.rpx .hub-row--checked,
.rpx .hub-row--checked:hover { background: var(--rpx-accent-soft); }
.rpx .hub-row--inflight { background: #F7F9FD; }
.rpx .hub-check { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rpx-accent); flex: none; cursor: pointer; }
.rpx .hub-check:disabled { visibility: hidden; }
.rpx .hub-card--nopick .hub-check { display: none; }
.rpx .hub-nudge { align-self: flex-start; margin-top: 6px; }
.rpx .hub-asked { font-size: 14px; font-weight: 600; color: var(--rpx-success-ink); margin-top: 4px; }
.rpx .hub-nudge-error { font-size: 14px; color: var(--rpx-danger); }
.rpx .hub-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--rpx-line-soft); background: var(--rpx-surface-2);
}
.rpx .hub-count { font-size: 15px; color: var(--rpx-ink-2); }
.rpx .hub-error { color: var(--rpx-danger); font-size: 14px; margin: 0; padding: 0 24px 16px; background: var(--rpx-surface-2); }
.rpx .hub-calc { margin-top: 4px; font-size: 14px; color: var(--rpx-ink-2); }
.rpx .hub-calc summary { cursor: pointer; color: var(--rpx-accent); font-weight: 600; width: max-content; max-width: 100%; }
.rpx .hub-calc-lines { margin: 8px 0 2px; padding: 12px 14px; background: var(--rpx-surface-2); border: 1px solid var(--rpx-line-soft); border-radius: 12px; }
.rpx .hub-calc-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.rpx .hub-calc-lines dt, .rpx .hub-calc-lines dd { margin: 0; }
.rpx .hub-calc-lines dt { display: flex; flex-direction: column; }
.rpx .hub-calc-how { color: var(--rpx-muted); }
.rpx .hub-calc-lines dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpx .hub-calc-total { border-top: 1px solid var(--rpx-line-soft); margin-top: 4px; padding-top: 6px !important; font-weight: 600; }
.rpx .rpx-history > summary.rpx-history__summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px 24px; cursor: pointer;
}
.rpx .rpx-history[open] > summary { border-bottom: 1px solid var(--rpx-line-soft); }
.rpx .rpx-history > summary::after { margin-left: auto; }
.rpx .report-door { min-height: 44px; }

/* ---------- House guide ---------- */

.rpx .rpx-guide { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; max-width: none; margin: 0; padding: 0; }
.rpx .rpx-toc {
  flex: 1 1 200px; max-width: 220px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: calc(var(--header-height, 96px) + 24px);
}
.rpx .rpx-toc a { padding: 9px 12px; border-radius: 8px; font-size: 15px; color: var(--rpx-ink-2); text-decoration: none; }
.rpx .rpx-toc a:hover { background: var(--rpx-neutral); color: var(--rpx-ink); }
.rpx .rpx-toc .rpx-eyebrow { padding: 0 12px 8px; }
.rpx .rpx-guide__body { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rpx .rpx-guide__body > section { scroll-margin-top: calc(var(--header-height, 96px) + 16px); }
.rpx .rpx-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.rpx .rpx-steps li { display: flex; gap: 16px; align-items: flex-start; }
.rpx .rpx-steps__n {
  width: 32px; height: 32px; border-radius: 16px; background: var(--rpx-ink); color: #fff;
  font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rpx .rpx-steps__body { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; min-width: 0; }
.rpx .rpx-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 28px; margin: 0; padding: 0; list-style: none; }
.rpx .rpx-rules li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--rpx-ink-2); }
.rpx .rpx-rules li svg { flex: none; color: var(--rpx-accent); margin-top: 1px; }
.rpx .rpx-bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--rpx-ink-2); }
.rpx .rpx-bullets a { color: var(--rpx-accent); font-weight: 600; }
.rpx .rpx-code-hidden { letter-spacing: 0.2em; }

/* The guide's shared pieces (the chat link partial, the community and help
   partials the guide editor previews too) keep their markup and wear the
   portal's type here. */
.rpx .rpx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rpx .rpx-leader dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rpx .rpx-chat { margin: 0; }
.rpx .rpx-chat dt { font-size: 16px; font-weight: 600; color: var(--rpx-ink); }
.rpx .rpx-chat dd { margin: 2px 0 0; }
.rpx .rpx-leader dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rpx-muted); overflow-wrap: anywhere; }
.rpx .rpx-leader a { color: var(--rpx-accent); font-weight: 600; }
.rpx .wg-chat-link { display: inline-block; margin-top: 6px; color: var(--rpx-accent); font-weight: 600; font-size: 15px; text-decoration: none; }
.rpx .wg-chat-link:hover { text-decoration: underline; }
/* "Link not opening?" opens as a popup over the page rather than inside the
   chat card. The help stays the same <details> (views/partials/
   _guide-chat-link.ejs, which also opens it by itself when a tap goes
   nowhere); open, its body is drawn as a centred card over a dimmed page.
   The guide's script adds the title and the close button, and closes it on a
   click outside or Escape. */
.rpx .wg-chat-fallback { margin-top: 4px; font-size: 14px; color: var(--rpx-muted); }
.rpx .wg-chat-fallback__summary { color: var(--rpx-faint); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.rpx .wg-chat-fallback__summary::-webkit-details-marker { display: none; }
.rpx .wg-chat-fallback__summary .disclosure-caret { display: none; }
.rpx .wg-chat-fallback__summary-label { text-decoration: underline; text-underline-offset: 3px; }
.rpx .wg-chat-fallback[open]::before {
  content: ''; position: fixed; inset: 0; z-index: 1090; background: rgba(22, 24, 29, 0.45);
}
.rpx .wg-chat-fallback[open] > .wg-chat-fallback__body {
  position: fixed; z-index: 1091; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; box-sizing: border-box;
  margin: 0; padding: 24px; border: none; border-radius: var(--rpx-r-card);
  background: var(--rpx-surface); box-shadow: var(--rpx-shadow-pop);
  font-size: 15px; line-height: 1.55; color: var(--rpx-ink-2);
}
.rpx .wg-chat-fallback__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rpx .wg-chat-fallback__title { margin: 0; font-family: var(--rpx-font-display); font-size: 20px; font-weight: 700; color: var(--rpx-ink); }
.rpx .wg-chat-fallback__close {
  width: 40px; height: 40px; border-radius: 20px; border: none; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--rpx-muted);
}
.rpx .wg-chat-fallback__close:hover { background: var(--rpx-neutral); color: var(--rpx-ink); }
.rpx .wg-chat-fallback__steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rpx .wg-chat-fallback__row { display: flex; gap: 8px; margin-bottom: 14px; }
.rpx .wg-chat-fallback__url { flex: 1; min-width: 0; min-height: 44px !important; font-size: 14px !important; }
.rpx .wg-chat-fallback__copy {
  min-height: 44px; padding: 0 18px; border-radius: var(--rpx-r-control); border: 1px solid #D9D6CF;
  background: var(--rpx-surface); color: var(--rpx-ink); font-family: var(--rpx-font); font-weight: 600; font-size: 15px; cursor: pointer;
}
.rpx .wg-chat-fallback__copy:hover { background: var(--rpx-surface-2); }
.rpx .wg-chat-fallback__last { margin: 0; font-size: 14px; color: var(--rpx-muted); }
.rpx .wg-chat-fallback__body li,
.rpx .wg-chat-fallback__lead { font-size: 15px; color: var(--rpx-ink-2); }
.rpx .wg-chat-fallback__body strong { color: var(--rpx-ink); }
.rpx .wg-chat-fallback__last a { font-size: 14px; font-weight: 600; color: var(--rpx-accent); }
/* While it is open, the header and the tab bar sit under the dimmed layer too. */
.rpx.rpx-fallback-open .header,
.rpx.rpx-fallback-open .rpx-tabbar { z-index: 0; }
.rpx .wg-community h3 {
  font-family: var(--rpx-font); font-size: 16px; font-weight: 600; color: var(--rpx-ink);
  margin: 0; padding-top: 16px; border-top: 1px solid var(--rpx-line-soft);
}
.rpx .wg-community .rpx-h2 + h3 { border-top: none; padding-top: 0; }
.rpx .wg-community .wg-body,
.rpx .wg-community p { margin: -12px 0 0; font-size: 15px; line-height: 1.55; color: var(--rpx-ink-2); }
.rpx .wg-community a { color: var(--rpx-accent); font-weight: 600; }
.rpx .wg-community .wg-callout {
  margin: -12px 0 0; background: var(--rpx-surface-2); border: 1px solid var(--rpx-line-soft); border-radius: 12px;
  padding: 12px 14px; font-size: 15px; color: var(--rpx-ink-2);
}
.rpx .wg-page a { text-decoration: none; text-underline-offset: 3px; }
.rpx .wg-page a:hover { text-decoration: underline; }
.rpx .wg-page .rpx-btn:hover { text-decoration: none; }
.rpx .wg-list { list-style: none; padding: 0; margin: 0; }
.rpx .wg-list li { padding: 10px 0; border-top: 1px solid var(--rpx-line-soft); font-size: 15px; color: var(--rpx-ink-2); }
.rpx .wg-list li::before { content: none; }
.rpx .wg-channels { color: var(--rpx-faint); font-size: 13px; }
.rpx .wg-community .wg-callout { border-left: 1px solid var(--rpx-line-soft); }
.rpx .wg-list li:first-child { border-top: none; padding-top: 0; }
.rpx .wg-ack-card { gap: 14px; scroll-margin-top: calc(var(--header-height, 96px) + 16px); }
.rpx .wg-ack-card.is-done { border-color: #CFE6D7; }
.rpx .wg-ack-status { margin: 0; font-size: 15px; color: var(--rpx-muted); }

/* The three acknowledgement steps (house rules, cleaning and trash, the
   guide). A step is a big tappable row with a box that fills in green; the
   step to do next carries the accent ring, a locked step is greyed with its
   reason underneath. */
.rpx .wg-step { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--rpx-line); border-radius: 0; scroll-margin: 120px; }
.rpx .wg-step--final { margin-top: 0; padding-top: 0; border-top: none; }
.rpx .wg-step__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
  min-height: 64px; padding: 12px 18px; text-align: left; cursor: pointer;
  background: var(--rpx-surface); border: 1.5px solid #D9D6CF; border-radius: 14px;
  font-family: var(--rpx-font); color: var(--rpx-ink);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.rpx .wg-step.is-next .wg-step__btn { border-color: var(--rpx-accent); box-shadow: 0 0 0 4px var(--rpx-accent-soft); }
.rpx .wg-step.is-next .wg-step__btn:hover { background: var(--rpx-accent-soft); }
.rpx .wg-step__btn:disabled { cursor: default; }
.rpx .wg-step:not(.is-done):not(.is-next) .wg-step__btn { opacity: 0.55; }
.rpx .wg-step__box {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  border: 2px solid #C9C5BC; background: var(--rpx-surface); color: transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 200ms cubic-bezier(.2,.9,.3,1.4);
}
.rpx .wg-step.is-next .wg-step__box { border-color: var(--rpx-accent); }
.rpx .wg-step.is-done .wg-step__btn { border-color: #CFE6D7; background: var(--rpx-success-soft); opacity: 1; }
.rpx .wg-step.is-done .wg-step__box { background: var(--rpx-success); border-color: var(--rpx-success); color: #fff; transform: scale(1.08); }
.rpx .wg-step__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpx .wg-step__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.rpx .wg-step__sub { font-size: 13px; color: var(--rpx-muted); }
.rpx .wg-step__why { font-size: 14px; color: var(--rpx-muted); padding-left: 4px; }
.rpx .wg-step.is-flash .wg-step__btn { animation: rpx-wg-flash 900ms ease 1; }
@keyframes rpx-wg-flash { 0%, 100% { box-shadow: 0 0 0 4px var(--rpx-accent-soft); } 40% { box-shadow: 0 0 0 10px rgba(196, 62, 21, 0.25); } }

/* The codes, before the guide is acknowledged. */
.rpx .wg-lock {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px; border-radius: 14px; background: var(--rpx-accent-soft); border: 1px solid #F6DACE;
}
.rpx .wg-lock .rpx-item__body { flex: 1 1 220px; }
.rpx .wg-locked { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rpx-font); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--rpx-muted); }
.rpx #guide-getting-in.is-unlocked .rpx-tile__value--code { animation: rpx-wg-reveal 700ms ease 1; }
@keyframes rpx-wg-reveal { from { background: var(--rpx-success-soft); } to { background: transparent; } }

/* Follows the resident down the guide until it is acknowledged. Fixed to the
   window, not sticky: on a wide screen the main column is an overflow box
   that the window scrolls, so a sticky bar there never sticks. It sits over
   the main column, beside the menu, and the page keeps room for it at the
   end so it never covers the last step. */
.rpx .rpx-guide:has(.wg-progress:not([hidden])) { padding-bottom: 96px; }
.rpx .wg-progress {
  position: fixed; bottom: 20px; left: calc(var(--rpx-sidebar-w) + 32px); right: 32px; z-index: 900;
  display: flex; align-items: center; gap: 14px;
  max-width: 640px; margin: 0 auto; box-sizing: border-box; padding: 10px 10px 10px 18px;
  background: var(--rpx-ink); color: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(22, 24, 29, 0.25);
}
.rpx .wg-progress[hidden] { display: none !important; }
.rpx .wg-progress__dots { display: inline-flex; gap: 6px; }
.rpx .wg-progress__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.rpx .wg-progress__dots span.is-on { background: #6FCF97; }
.rpx .wg-progress__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rpx .wg-progress__next { font-size: 15px; font-weight: 600; }
.rpx .wg-progress__count { font-size: 13px; color: rgba(255,255,255,0.7); }
.rpx .wg-progress .rpx-btn { flex: none; }
.rpx .wg-progress .rpx-btn--secondary { border-color: rgba(255,255,255,0.35); }
.rpx .wg-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 3000; }
@media (max-width: 900px) {
  .rpx .wg-progress { bottom: calc(var(--rpx-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rpx .wg-step.is-flash .wg-step__btn, .rpx #guide-getting-in.is-unlocked .rpx-tile__value--code { animation: none; }
}
/* Under each contact line staff see which apps a number takes; for a
   resident the link already says WhatsApp, so that note is left out, in the
   contact list and on the House Leader's card alike. */
.rpx .wg-channels { display: none; }
.rpx .wg-ack-status:empty { display: none; }
/* Codes are covered until the resident asks to see them (the script adds
   is-masked; without JavaScript they simply show). */
.rpx [data-rpx-codes].is-masked [data-rpx-code] { filter: blur(6px); user-select: none; }

/* ---------- Forms (portal pages' own inputs) ---------- */

.rpx .modal input[type="text"],
.rpx .modal input[type="email"],
.rpx .modal input[type="number"],
.rpx .modal input[type="date"],
.rpx .modal input[type="tel"],
.rpx .modal select,
.rpx .modal textarea,
.rpx .pricing-modal-content input[type="text"],
.rpx .pricing-modal-content input[type="email"],
.rpx .pricing-modal-content input[type="tel"],
.rpx .pricing-modal-content select,
.rpx .pricing-modal-content textarea,
.rpx .dashboard-main input[type="text"],
.rpx .dashboard-main input[type="email"],
.rpx .dashboard-main input[type="password"],
.rpx .dashboard-main input[type="url"],
.rpx .dashboard-main input[type="tel"],
.rpx .dashboard-main input[type="number"],
.rpx .dashboard-main input[type="date"],
.rpx .dashboard-main input[type="search"],
.rpx .dashboard-main select,
.rpx .dashboard-main textarea {
  font-family: var(--rpx-font);
  font-size: 15px;
  color: var(--rpx-ink);
  background-color: var(--rpx-surface);
  border: 1px solid #D9D6CF;
  border-radius: var(--rpx-r-control);
  min-height: 44px;
  box-sizing: border-box;
}
.rpx .dashboard-main textarea, .rpx .modal textarea { min-height: 96px; line-height: 1.5; }
.rpx .modal select, .rpx .dashboard-main select, .rpx .pricing-modal-content select {
  padding: 0 40px 0 14px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E636E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.rpx .modal input[type="text"], .rpx .modal input[type="email"], .rpx .modal input[type="number"], .rpx .modal input[type="tel"], .rpx .modal textarea { padding: 10px 14px; }
.rpx .modal input:focus,
.rpx .modal select:focus,
.rpx .modal textarea:focus,
.rpx .pricing-modal-content input:focus,
.rpx .pricing-modal-content select:focus,
.rpx .pricing-modal-content textarea:focus,
.rpx .dashboard-main input:focus,
.rpx .dashboard-main select:focus,
.rpx .dashboard-main textarea:focus {
  outline: none;
  border-color: var(--rpx-accent);
  box-shadow: 0 0 0 3px rgba(196, 62, 21, .15);
}
.rpx .dashboard-main label { color: var(--rpx-ink); }
/* The shared dropdown (views/partials/_stage-dropdown.ejs) drawn as a field. */
.rpx .dashboard-main .stage-dropdown-trigger {
  min-height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid #D9D6CF; border-radius: var(--rpx-r-control); background-color: var(--rpx-surface);
  font-family: var(--rpx-font); font-size: 15px; color: var(--rpx-ink);
}

/* The shared buttons the older portal pages use (styles.css .btn family),
   drawn as the portal's buttons. */
.rpx .modal .btn,
.rpx .dashboard-main .btn,
.rpx .dashboard-main .btn-primary,
.rpx .dashboard-main .btn--primary {
  font-family: var(--rpx-font);
  border-radius: var(--rpx-r-control);
  font-weight: 600;
  font-size: 15px;
  min-height: 44px;
}
.rpx .modal .btn--primary,
.rpx .dashboard-main .btn-primary,
.rpx .dashboard-main .btn--primary {
  background: var(--rpx-accent); border-color: var(--rpx-accent); color: #fff;
}
.rpx .modal .btn--primary:hover,
.rpx .dashboard-main .btn-primary:hover,
.rpx .dashboard-main .btn--primary:hover { background: var(--rpx-accent-hover); border-color: var(--rpx-accent-hover); }
.rpx .modal .btn--outline,
.rpx .modal .btn--ghost,
.rpx .dashboard-main .btn--outline,
.rpx .dashboard-main .btn-outline,
.rpx .dashboard-main .btn-secondary {
  background: var(--rpx-surface); color: var(--rpx-ink); border: 1px solid #D9D6CF; border-radius: var(--rpx-r-control);
}
.rpx .modal .btn--outline:hover,
.rpx .modal .btn--ghost:hover,
.rpx .dashboard-main .btn--outline:hover,
.rpx .dashboard-main .btn-outline:hover,
.rpx .dashboard-main .btn-secondary:hover { background: var(--rpx-surface-2); color: var(--rpx-ink); }

/* ---------- Popups ----------
   The shared popup card (views/partials/_popup-card.ejs: extend stay, report
   a problem, the tour menu, confirmations) and the booking form
   (views/partials/tour-modal.ejs) keep their markup and scripts, and wear the
   portal's frame here. */
.rpx .modal-backdrop,
.rpx .pricing-modal-backdrop { background: rgba(22, 24, 29, 0.45); }
.rpx .modal,
.rpx .pricing-modal-content {
  border-radius: var(--rpx-r-card);
  box-shadow: var(--rpx-shadow-pop);
  font-family: var(--rpx-font);
  color: var(--rpx-ink);
}
.rpx .modal-header { padding: 22px 24px; border-bottom: 1px solid var(--rpx-line-soft); }
.rpx .modal-header h2,
.rpx .pricing-modal-title {
  font-family: var(--rpx-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--rpx-ink);
}
.rpx .modal-close,
.rpx .pricing-modal-close {
  width: 40px; height: 40px; border-radius: 20px; color: var(--rpx-muted);
}
.rpx .modal-close:hover,
.rpx .pricing-modal-close:hover { background: var(--rpx-neutral); color: var(--rpx-ink); }
.rpx .modal-body { padding: 24px; font-size: 15px; line-height: 1.55; color: var(--rpx-ink-2); }
.rpx .modal-footer { padding: 16px 24px; gap: 12px; border-top: 1px solid var(--rpx-line-soft); background: var(--rpx-surface-2); }
.rpx .modal label,
.rpx .pricing-modal-content label { color: var(--rpx-ink); font-weight: 600; font-size: 14px; }
.rpx .pricing-modal-subtitle { color: var(--rpx-muted); font-size: 15px; }
/* Extend stay */
.rpx #ms-extend-modal .msx__sub { font-size: 15px; color: var(--rpx-muted); }
.rpx #ms-extend-modal .msx__summary {
  background: var(--rpx-surface-2); border: 1px solid var(--rpx-line-soft); border-radius: 14px;
}
.rpx #ms-extend-modal .msx__summary-label { color: var(--rpx-muted); }
.rpx #ms-extend-modal .msx__hint { color: var(--rpx-muted); font-size: 14px; }
.rpx #ms-extend-modal .msx__label { font-size: 14px; font-weight: 600; color: var(--rpx-ink); }
.rpx #ms-extend-modal .msx__summary-value--preview { color: var(--rpx-accent); }
/* The day the picker was asked to point out (data-dtp-mark): the current
   check-out, ringed, readable even though it cannot be picked. */
.rpx .dtp-cell.is-marked { box-shadow: inset 0 0 0 2px var(--rpx-ink); color: var(--rpx-ink); opacity: 1; font-weight: 700; border-radius: 10px; }

/* Flash messages. */
.rpx .flash-message { border-radius: 12px; font-size: 15px; }

/* ---------- The other portal pages ----------
   Calendar, Community, Change password, Report a problem, My blog posts, Edit
   startup and the profile form keep their own markup and scripts; here they
   take the portal's page head, cards, type and controls. */

.rpx .page-head,
.rpx .cs-page-header,
.rpx .cp,
.rpx .npa { margin: 0; }
.rpx .page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rpx .page-head h1, .rpx .cs-page-header h1, .rpx .cp__title, .rpx .npa__title, .rpx .dashboard-header-row h1 { margin: 0; }
.rpx .dashboard-sub,
.rpx .cs-page-subtitle,
.rpx .cp__sub,
.rpx .npa__lead { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--rpx-muted); max-width: 680px; }
.rpx .page-head .dashboard-sub { margin-top: 0; }

/* Calendar (public/assets/dashboard-calendar.css) */
.rpx .calendar-filters { border: none; padding: 0; margin: 0; gap: 8px; flex-wrap: wrap; }
.rpx .cal-filter { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; background: var(--rpx-surface); }
.rpx .calendar-monthnav { margin: 0; gap: 12px; }
.rpx .calendar-monthnav strong { font-family: var(--rpx-font-display); font-size: 22px; letter-spacing: -0.01em; min-width: 150px; }
.rpx .calendar-monthnav .btn-icon {
  width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--rpx-line); background: var(--rpx-surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--rpx-ink); text-decoration: none;
}
.rpx .calendar-grid { border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card); overflow: clip; background: var(--rpx-surface); }
.rpx .cal-dow { background: var(--rpx-surface-2); color: var(--rpx-muted); font-size: 13px; font-weight: 600; }
.rpx .cal-cell { border-color: var(--rpx-line-soft); }
.rpx .cal-cell-outmonth { background: var(--rpx-surface-2); color: var(--rpx-faint); }
.rpx .cal-cell-today { outline-color: var(--rpx-accent); }
.rpx .cal-event { border-radius: 6px; font-size: 13px; }
.rpx .calendar-list { margin: 0; }
.rpx .calendar-list h2 { font-family: var(--rpx-font-display); font-size: 22px; font-weight: 700; color: var(--rpx-ink); }
.rpx .cal-day-header { font-size: 14px; color: var(--rpx-muted); }
.rpx .cal-day-events .cal-list-item { border-color: var(--rpx-line); border-radius: 12px; padding: 12px 16px; background: var(--rpx-surface); font-size: 15px; }

/* Community (startups) */
.rpx .cs-table { border-color: var(--rpx-line) !important; border-radius: var(--rpx-r-card) !important; overflow: clip; margin-top: 0 !important; }
.rpx .cs-table th { background: var(--rpx-surface-2); color: var(--rpx-muted); font-size: 12px; letter-spacing: 0.06em; }
.rpx .cs-table td { font-size: 15px; }
.rpx .cs-table tbody tr:hover { background: var(--rpx-surface-2); }

/* Community, when there is nothing to list yet. */
.rpx .cs-empty { padding: 48px 24px !important; background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card); text-align: center; }
.rpx .cs-empty__icon { width: 56px !important; height: 56px !important; margin: 0 auto 16px !important; background: var(--rpx-neutral) !important; color: var(--rpx-ink-2); font-size: 0 !important; }
.rpx .cs-empty__headline { font-family: var(--rpx-font-display); font-size: 22px !important; color: var(--rpx-ink) !important; }
.rpx .cs-empty__body { font-size: 15px !important; color: var(--rpx-muted) !important; }

/* Change password, Report a problem, the no-account page, Edit startup */
.rpx .cp__card,
.rpx .br-card,
.rpx .npa__card {
  background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card);
  padding: 28px; box-shadow: none;
}
.rpx .cp__card .dashboard-form { border: none; padding: 0; background: none; box-shadow: none; margin: 0; max-width: none; }
.rpx .dashboard-form,
.rpx .edit-startup-form { border-radius: var(--rpx-r-card); border-color: var(--rpx-line); }
.rpx .form-section-title { font-family: var(--rpx-font-display); font-size: 20px; color: var(--rpx-ink); }
.rpx .dashboard-main .form-group label { font-size: 14px; font-weight: 600; color: var(--rpx-ink); }
.rpx .br-actions { gap: 12px; }
/* The file picker (views/partials/_file-pick.ejs) clips its real input to
   1px; anchored to the picker, it no longer reaches past the page's right
   edge and scrolls the whole page sideways. */
.rpx .fp { position: relative; border-radius: 12px; }
.rpx .fp__btn { border-radius: 10px; min-height: 36px; }

/* My blog posts */
.rpx .dashboard-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.rpx .dashboard-table { background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card); overflow: clip; border-collapse: separate; border-spacing: 0; }
.rpx .dashboard-table th { background: var(--rpx-surface-2); color: var(--rpx-muted); font-size: 12px; letter-spacing: 0.06em; }
.rpx .dashboard-table td { font-size: 14px; border-color: var(--rpx-line-soft); }

/* Profile form (views/dashboard/profile-new.ejs and its startup tabs). It is
   built from the Mastermind form kit (mm-i__*, mastermind-field); here it
   takes the portal's page head, step chips, cards, fields and buttons. */
.rpx .mm-i { max-width: 1100px; padding: 0 0 40px; }
.rpx .mm-i__ptitle.mm-i__ptitle {
  font-family: var(--rpx-font-display); font-size: 36px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.02em; color: var(--rpx-ink); margin: 0 0 8px;
}
.rpx .mm-i__psub { font-size: 17px; line-height: 1.5; color: var(--rpx-muted); max-width: 680px; }
.rpx .mm-i__head { margin-bottom: 28px; }
.rpx .mm-i__steps-meta { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rpx-faint); margin-bottom: 10px; }
.rpx .mm-i__steps { gap: 8px; margin-bottom: 28px; }
.rpx .mm-i__step {
  min-height: 44px; box-sizing: border-box; padding: 0 16px 0 10px; gap: 10px;
  border: 1px solid var(--rpx-line); border-radius: 999px; background: var(--rpx-surface);
  font-family: var(--rpx-font); font-size: 15px; font-weight: 500; color: var(--rpx-ink-2);
}
.rpx .mm-i__step:hover { border-color: #D9D6CF; color: var(--rpx-ink); }
.rpx .mm-i__step.is-on { border-color: var(--rpx-accent); background: var(--rpx-accent-soft); color: var(--rpx-ink); font-weight: 600; }
.rpx .mm-i__step-n { width: 24px; height: 24px; font-size: 12px; background: var(--rpx-neutral); color: var(--rpx-ink-2); }
.rpx .mm-i__step.is-on .mm-i__step-n { background: var(--rpx-accent); color: #fff; }
.rpx .mm-i__step.is-done .mm-i__step-n { background: var(--rpx-success); color: #fff; }
.rpx .mm-i__step--virtual { border-style: dashed; border-color: #D9D6CF; background: transparent; color: var(--rpx-ink-2); opacity: 1; padding: 0 16px; }
.rpx .mm-i__flash { border-radius: 12px; padding: 14px 16px; font-size: 15px; margin-bottom: 24px; }
.rpx .mm-i__flash--ok { background: var(--rpx-success-soft); color: var(--rpx-success-ink); border-color: #CFE6D7; }
.rpx .mm-i__card,
.rpx .mastermind-section {
  background: var(--rpx-surface); border: 1px solid var(--rpx-line); border-radius: var(--rpx-r-card);
  padding: 28px; margin-bottom: 24px;
}
.rpx .mm-i__card--accent { background: var(--rpx-accent-soft); border-color: #F6DACE; }
.rpx .mm-i__card-h,
.rpx .mastermind-section h2 {
  font-family: var(--rpx-font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  text-transform: none; color: var(--rpx-ink); margin: 0 0 6px;
}
.rpx .mm-i__card-sub,
.rpx .mastermind-section__sub { font-size: 15px; line-height: 1.5; color: var(--rpx-muted); margin: 0 0 24px; }
/* Space between one field (or row of fields) and the next, at any depth in
   a card — but not between two fields side by side in the same row. */
.rpx .mm-i__card :not(.mm-i__row2):not(.mm-i__row3) > :is(.mm-i__row2, .mm-i__row3, .mastermind-field) + :is(.mm-i__row2, .mm-i__row3, .mastermind-field),
.rpx .mm-i__card > :is(.mm-i__row2, .mm-i__row3, .mastermind-field) + :is(.mm-i__row2, .mm-i__row3, .mastermind-field) { margin-top: 24px; }
.rpx .mm-i__row2, .rpx .mm-i__row3 { gap: 24px; }
.rpx .mm-i__logo { margin-bottom: 24px; }
.rpx .mastermind-field { gap: 8px; }
.rpx .mastermind-field__label { font-size: 14px; font-weight: 600; color: var(--rpx-ink); }
.rpx .mastermind-field__optional { font-size: 13px; font-weight: 400; color: var(--rpx-faint); }
.rpx .mm-i__req { color: var(--rpx-accent); }
/* Space between one block of the form and the next, wherever it sits: the
   form groups its fields in unnamed wrappers (tour targets), and fields side
   by side in one row keep their own row gap. */
.rpx .mm-i__card :is(.mm-i__row2, .mm-i__row3, .mastermind-field, [data-dt-target]):not(.mm-i__row2 > *):not(.mm-i__row3 > *):not(:first-child) { margin-top: 24px; }
/* A section inside a card (Traction, Fundraising on a startup tab) is part
   of that card: no second box, a line above its heading instead. */
.rpx .mm-i__card .mastermind-section {
  border: none; padding: 0; margin: 0; background: none; border-radius: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.rpx .mm-i__card .mastermind-section > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.rpx .mm-i__card .mm-i__card-h:has(+ .mastermind-section) { margin-top: 32px !important; padding-top: 28px; border-top: 1px solid var(--rpx-line); }
/* The first field under a card's or a section's short intro line: the line
   already carries the space. */
.rpx .mm-i__card :is(.mm-i__card-sub, .mastermind-section__sub) + * { margin-top: 0 !important; }
/* The date picker and the multi-select look like the other fields. */
.rpx .dashboard-main .dtp-trigger,
.rpx .dashboard-main .mm-dd-ms__btn {
  min-height: 44px; box-sizing: border-box; padding: 0 14px;
  font-family: var(--rpx-font); font-size: 15px; color: var(--rpx-ink);
  background: var(--rpx-surface); border: 1px solid #D9D6CF; border-radius: var(--rpx-r-control);
}
.rpx .dashboard-main .dtp-trigger .dtp-label,
.rpx .dashboard-main .mm-dd-ms__btn-label { font-size: 15px; }
/* Community & privacy: the choices sit in the card itself, not in a second
   box, each as one tappable row. Saving them is not the page's main action,
   so its button is the secondary one. */
.rpx .mm-i__card #mm-privacy-form { border: none; padding: 0; margin: 0; background: none; box-shadow: none; max-width: none; }
.rpx #mm-privacy-form label {
  display: inline-flex; align-items: center; gap: 12px; min-height: 40px;
  font-size: 15px; font-weight: 500; color: var(--rpx-ink); cursor: pointer;
}
.rpx #mm-privacy-form input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--rpx-ink); flex: none; }
.rpx #mm-privacy-form .mm-i__card-sub { margin: 0 0 8px 32px !important; font-size: 14px; }
.rpx .dashboard-main #mm-privacy-form .btn--primary {
  margin-top: 12px; background: var(--rpx-surface); color: var(--rpx-ink); border: 1px solid #D9D6CF;
}
.rpx .dashboard-main #mm-privacy-form .btn--primary:hover { background: var(--rpx-surface-2); }

/* Buttons of the form, by the portal's rule. */
.rpx .dashboard-main .btn--outline-accent { background: var(--rpx-surface); color: var(--rpx-ink); border: 1px solid #D9D6CF; }
.rpx .dashboard-main .btn--outline-accent:hover { background: var(--rpx-surface-2); color: var(--rpx-ink); border-color: #C9C5BC; }
.rpx .dashboard-main .btn--ghost { background: transparent; color: var(--rpx-ink-2); border: 1px solid transparent; }
.rpx .dashboard-main .btn--ghost:hover { background: var(--rpx-neutral); color: var(--rpx-ink); }
.rpx .dashboard-main .btn--danger,
.rpx .modal .btn--danger { background: var(--rpx-surface); color: var(--rpx-danger); border: 1px solid #F2C4BE; }
.rpx .dashboard-main .btn--danger:hover,
.rpx .modal .btn--danger:hover { background: var(--rpx-danger-soft); color: var(--rpx-danger-ink); border-color: var(--rpx-danger); }
.rpx .dashboard-main .btn--small,
.rpx .dashboard-main .btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
/* Its Save / Continue bar is fixed to the bottom of the main column. */
.rpx .actionbar { left: var(--rpx-sidebar-w); border-top-color: var(--rpx-line); }
.rpx:has(.dashboard-sidebar.collapsed) .actionbar { left: 72px; }
.rpx .dashboard-main:has(.actionbar) { padding-bottom: 120px; }

/* ---------- Phone and tablet ---------- */

/* The bottom tab bar. Hidden on wide screens, where the sidebar shows. */
.rpx .rpx-tabbar { display: none; }
.rpx .rpx-sheet-backdrop { display: none; }

@media (max-width: 1100px) {
  .rpx { --rpx-gutter: 28px; }
}

@media (max-width: 900px) {
  .rpx { --rpx-gutter: 16px; --header-height-base: 56px; }
  .rpx .header { --header-pad-x: 16px; }
  .rpx .header .logo-title { font-size: 18px; }
  .rpx .dashboard-main {
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(var(--rpx-tabbar-h) + 40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .rpx .dashboard-main h1 { font-size: 30px; }
  .rpx .rpx-hello h1 { font-size: 30px; }
  .rpx .rpx-toc { display: none; }
  /* No left column to contain here: the window scrolls, so sticky bars work. */
  .rpx .dashboard-main { overflow: visible; }

  /* The sidebar becomes a sheet that the tab bar's "More" opens. Its own
     "Menu" bar is not needed: the tab bar does that job. */
  .rpx .dashboard-sidebar {
    position: fixed !important;
    left: 0; right: 0; top: auto !important;
    bottom: calc(var(--rpx-tabbar-h) + env(safe-area-inset-bottom, 0px));
    width: 100% !important;
    height: auto !important;
    max-height: min(75vh, 75dvh);
    overflow-y: auto;
    z-index: 60;
    border: none;
    border-top: 1px solid var(--rpx-line);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--rpx-shadow-pop);
    padding: 12px 12px 8px;
    transform: translateY(calc(100% + var(--rpx-tabbar-h) + 40px));
    transition: transform .22s ease;
    visibility: hidden;
  }
  .rpx .dashboard-sidebar.mobile-open { transform: none; visibility: visible; }
  .rpx .dashboard-sidebar .sidebar-mobile-toggle { display: none !important; }
  .rpx .dashboard-sidebar nav { display: flex !important; max-height: none; overflow: visible; padding: 4px 0; }
  .rpx .dashboard-sidebar__foot { display: flex !important; }
  .rpx .dashboard-sidebar nav a,
  .rpx .dashboard-sidebar .sidebar-foot-item { padding: 12px; min-height: 44px; box-sizing: border-box; }
  .rpx .rpx-sheet-backdrop {
    position: fixed; inset: 0; z-index: 55; background: rgba(22, 24, 29, .32);
    border: none; padding: 0; margin: 0; width: 100%; height: 100%;
  }
  .rpx .rpx-sheet-backdrop.is-open { display: block; }

  .rpx .rpx-tabbar {
    display: grid;
    grid-template-columns: repeat(var(--rpx-tabs, 5), minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--rpx-surface);
    border-top: 1px solid var(--rpx-line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: var(--rpx-tabbar-h);
    box-sizing: border-box;
  }
  .rpx .rpx-tabbar a,
  .rpx .rpx-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; padding: 4px 0; background: none; border: none; cursor: pointer;
    color: var(--rpx-muted); font-family: var(--rpx-font); font-size: 12px; font-weight: 500;
    text-decoration: none; position: relative;
  }
  .rpx .rpx-tabbar .is-active { color: var(--rpx-accent); font-weight: 600; }
  .rpx .rpx-tabbar svg { width: 22px; height: 22px; }
  .rpx .rpx-tabbar .rpx-tab-dot {
    position: absolute; top: 6px; left: calc(50% + 8px);
    min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; box-sizing: border-box;
    background: var(--rpx-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }

  /* The Pay bar stays on screen while a long list scrolls, above the tab bar. */
  .rpx .hub-foot {
    position: sticky; z-index: 5;
    bottom: calc(var(--rpx-tabbar-h) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 16px rgba(22, 24, 29, 0.07);
  }
  .rpx .hub-foot .rpx-btn { flex: 1 1 160px; }

  /* The profile form's bar sits on top of the tab bar, not under it. */
  .rpx .actionbar { left: 0 !important; bottom: calc(var(--rpx-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 65; }
  .rpx .dashboard-main:has(.actionbar) { padding-bottom: calc(var(--rpx-tabbar-h) + 150px + env(safe-area-inset-bottom, 0px)); }

  /* Anything fixed to the bottom of a page sits above the tab bar. */
  .rpx .rpx-sticky-foot { bottom: calc(var(--rpx-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 640px) {
  .rpx .dashboard-main h1 { font-size: 28px; }
  .rpx .rpx-hello h1 { font-size: 28px; }
  .rpx .mm-i__ptitle.mm-i__ptitle { font-size: 28px; }
  .rpx .mm-i__card, .rpx .mastermind-section:not(.mm-i__card .mastermind-section) { padding: 20px !important; }
  .rpx .mm-i__row2, .rpx .mm-i__row3 { grid-template-columns: 1fr; gap: 20px; }
  .rpx .rpx-page { gap: 28px; }
  .rpx .rpx-card { padding: 20px !important; gap: 18px; border-radius: 18px; }
  .rpx .rpx-card--flush { padding: 0 !important; }
  .rpx .dl-startups { padding: 20px; border-radius: 18px; }
  .rpx .rpx-item { padding: 18px; gap: 14px; align-items: flex-start; }
  .rpx .rpx-item .rpx-btn { width: 100%; }
  .rpx .rpx-item--link { align-items: center; flex-wrap: nowrap; }
  .rpx .rpx-row { padding: 16px; gap: 12px; }
  .rpx .rpx-amount { font-size: 34px; }
  .rpx .rpx-team__card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .rpx .rpx-team__photo { width: 64px; height: 64px; border-radius: 32px; }
  .rpx .rpx-dl { grid-template-columns: 1fr; }
  .rpx .rpx-dl dt { padding-bottom: 0; }
  .rpx .rpx-dl dd { border-top: none; padding-top: 2px; }
  .rpx .rpx-pill { width: 100%; }
  .rpx .rpx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Community: each startup becomes a small card — a four-column table does
     not fit a phone, and a cut-off column is worse than a scroll. */
  .rpx .cs-table thead { display: none; }
  .rpx .cs-table, .rpx .cs-table tbody { display: block; }
  .rpx .cs-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; }
  .rpx .cs-table tbody td { display: block; padding: 0 !important; border: none !important; font-size: 14px; }
  .rpx .cs-table tbody td.cs-table__startup { flex: 1 0 100%; }
  .rpx .cs-table tbody td:empty { display: none; }
  .rpx .rpx-tile { padding: 14px; }
}
.rpx details.rpx-card:not([open]) { gap: 0; }
.rpx .cp__card { margin-top: 24px; }

/* ---------- Sign-in pages ----------
   /login, /forgot-password, /reset-password, the first-password page
   (/change-password) and the /welcome link pages. They come before the
   portal, so they have no menu: the portal's header bar, the warm grey
   ground, a title on the ground and the form in one plain card. Linked by
   views/partials/_auth-head.ejs, which puts `rpx rpx-auth` on <body>.

   styles.min.css is loaded first (the bug-report and access-removed popups
   and the toast need it), so form controls here are set in full rather than
   trusted to inherit. */

.rpx.rpx-auth { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
.rpx .rpx-auth-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 24px; box-sizing: border-box;
  background: var(--rpx-surface); border-bottom: 1px solid var(--rpx-line);
}
.rpx .rpx-auth-bar__logo {
  font-family: var(--rpx-font-display); font-size: 20px; line-height: 1; font-weight: 700;
  letter-spacing: -0.01em; color: var(--rpx-ink); text-decoration: none;
}
.rpx .rpx-auth-bar__side { display: flex; align-items: center; gap: 12px; }
.rpx .rpx-auth-bar__link {
  font-family: var(--rpx-font); font-size: 14px; font-weight: 500; color: var(--rpx-muted);
  text-decoration: none; background: none; border: none; padding: 0; cursor: pointer;
}
.rpx .rpx-auth-bar__link:hover { color: var(--rpx-ink); text-decoration: underline; text-underline-offset: 3px; }
.rpx .rpx-auth-bar form { margin: 0; }

.rpx .rpx-auth-main {
  flex: 1 0 auto;
  display: flex; justify-content: center;
  padding: 56px 16px 72px;
  background: var(--rpx-bg);
}
.rpx .rpx-auth-col { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.rpx .rpx-auth-head { display: flex; flex-direction: column; gap: 8px; }
.rpx .rpx-auth-title {
  margin: 0;
  font-family: var(--rpx-font-display); font-size: 36px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.02em; color: var(--rpx-ink); text-wrap: balance;
}
.rpx .rpx-auth-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rpx-muted); }
.rpx .rpx-auth-col > .rpx-card { gap: 18px; }

/* A fact shown as a small grey label over a dark value, the way Payments
   shows "To pay now". */
.rpx .rpx-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rpx .rpx-kv__k { font-size: 14px; color: var(--rpx-muted); }
.rpx .rpx-kv__v { font-size: 17px; font-weight: 600; color: var(--rpx-ink); overflow-wrap: anywhere; }
.rpx .rpx-rule { height: 1px; background: var(--rpx-line-soft); border: 0; margin: 0; }

.rpx .rpx-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.rpx .rpx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rpx .rpx-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rpx .rpx-field label,
.rpx .rpx-field__label { font-family: var(--rpx-font); font-size: 14px; font-weight: 600; color: var(--rpx-ink); margin: 0; }
.rpx .rpx-field__hint { font-size: 13.5px; color: var(--rpx-muted); }
.rpx .rpx-field .rpx-link { font-size: 14px; }
/* A finger-sized target without moving the text: padding out, margin back. */
.rpx .rpx-field__top .rpx-link { padding: 12px 0 12px 12px; margin: -12px 0 -12px -12px; }
.rpx .rpx-auth-small .rpx-link { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.rpx .rpx-input-wrap { position: relative; }
.rpx .rpx-field input[type="email"],
.rpx .rpx-field input[type="password"],
.rpx .rpx-field input[type="text"] {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 46px; margin: 0; padding: 0 14px;
  font-family: var(--rpx-font); font-size: 16px; color: var(--rpx-ink);
  background: var(--rpx-surface);
  border: 1px solid #D9D6CF; border-radius: var(--rpx-r-control);
  box-shadow: none; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.rpx .rpx-input-wrap input { padding-right: 46px; }
.rpx .rpx-field input::placeholder { color: var(--rpx-faint); opacity: 1; }
.rpx .rpx-field input:focus {
  border-color: var(--rpx-accent);
  box-shadow: 0 0 0 3px rgba(196, 62, 21, .15);
}
.rpx .rpx-pw-toggle {
  position: absolute; top: 50%; right: 1px; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 10px; padding: 0; cursor: pointer; color: var(--rpx-faint);
}
.rpx .rpx-pw-toggle:hover { color: var(--rpx-ink); background: var(--rpx-neutral); }
.rpx .rpx-pw-toggle svg { width: 18px; height: 18px; }

/* Notes above the card use the portal's .rpx-note (and --danger for a
   refusal). Only the green one is new, and links inside a sign-in note. */
.rpx .rpx-note--success { background: var(--rpx-success-soft); border-color: #CFE6D7; color: var(--rpx-success-ink); }
.rpx .rpx-note--success strong { color: var(--rpx-success-ink); }
.rpx .rpx-auth-col .rpx-note a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }

.rpx .rpx-auth-below { display: flex; flex-direction: column; gap: 10px; }
.rpx .rpx-auth-small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rpx-muted); }
.rpx .rpx-auth-small b { color: var(--rpx-ink-2); font-weight: 600; }
.rpx .rpx-btn svg { flex: none; }

/* Rows you tap, like "House guide" on Home. */
.rpx .rpx-choices { display: flex; flex-direction: column; }
.rpx .rpx-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--rpx-line-soft);
  text-decoration: none; color: inherit;
}
.rpx .rpx-choice:first-child { padding-top: 0; }
.rpx .rpx-choice:last-child { border-bottom: none; padding-bottom: 0; }
.rpx .rpx-choice__t { display: block; font-size: 16px; font-weight: 600; color: var(--rpx-ink); }
.rpx .rpx-choice__s { display: block; font-size: 14px; color: var(--rpx-muted); margin-top: 2px; }
.rpx .rpx-choice svg { width: 18px; height: 18px; color: var(--rpx-faint); flex: none; }
.rpx .rpx-choice:hover .rpx-choice__t { text-decoration: underline; text-underline-offset: 3px; }
.rpx .rpx-choice:focus-visible { outline: 3px solid rgba(196, 62, 21, .35); outline-offset: 4px; border-radius: 8px; }

@media (max-width: 600px) {
  .rpx .rpx-auth-bar { height: 56px; padding: 0 16px; }
  .rpx .rpx-auth-main { padding: 28px 12px 48px; }
  .rpx .rpx-auth-col { gap: 16px; }
  .rpx .rpx-auth-title { font-size: 30px; }
  .rpx .rpx-auth-col > .rpx-card { padding: 22px; }
}