/**
 * Partner Portal + Apply page (spec 2026-08-18).
 *
 * App-like portal: dark olive sidebar (the PDF mock's rail) beside a sand
 * content plane of paper KPI tiles and hairline panels. The apply page reuses
 * the editorial split (aside + paper form card) from the contact design.
 * Tokens only — see design.md. Class prefix: .rn-pp-*.
 */

/* ─── Shared page plane ─────────────────────────────────────────────────── */

body.rn-pp-page {
  margin: 0;
  background: var(--renera-sand-300);
  font-family: var(--renera-font-sans);
  color: var(--renera-ink);
  -webkit-font-smoothing: antialiased;
}
body.rn-pp-page * { box-sizing: border-box; }
body.rn-pp-page img { max-width: 100%; display: block; }
body.rn-pp-page button { font-family: inherit; }

.rn-pp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--renera-sp-6) var(--renera-sp-5) var(--renera-sp-9);
}

/* Mono eyebrow label — brand signature */
.rn-pp-eyebrow {
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renera-mute);
}

.rn-pp-h {
  font-family: var(--renera-font-serif);
  font-weight: 500;
  color: var(--renera-olive-700);
  margin: 0;
}

/* Primary + ghost buttons per design.md.
 * Scoped under `body.rn-pp-page` (not just `.rn-pp-btn`) so specificity is
 * (0,1,1) instead of (0,1,0) — a bare class alone ties with brand-base.css's
 * `[type="submit"] { color: var(--renera-olive-700); }` reset, also (0,1,0).
 * brand-base loads later (priority 20 vs this sheet's priority 10) and used
 * to win that tie, repainting this button's text to match its own
 * background — invisible "Submit application" text on /apply/, caught by the
 * 2026-08-21 visual-baseline review. `body.rn-pp-page .rn-pp-btn` outweighs
 * the bare attribute selector regardless of load order. Same pattern already
 * used for `body.rn-pp-page button { font-family: inherit; }` above and by
 * `.rn-account .rn-btn` elsewhere in the codebase for this identical problem. */
body.rn-pp-page .rn-pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  border: 1px solid var(--renera-olive-700);
  border-radius: var(--renera-r-sm);
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--renera-dur-fast) var(--renera-ease), color var(--renera-dur-fast) var(--renera-ease);
}
body.rn-pp-page .rn-pp-btn:hover { background: var(--renera-olive-900); color: var(--renera-sand-200); }
body.rn-pp-page .rn-pp-btn--ghost { background: transparent; color: var(--renera-olive-700); }
body.rn-pp-page .rn-pp-btn--ghost:hover { background: var(--renera-olive-700); color: var(--renera-sand-200); }

/* ─── Portal layout: sidebar + plane ────────────────────────────────────── */

.rn-pp-app {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--renera-sp-5);
  align-items: start;
}

.rn-pp-side {
  position: sticky;
  top: var(--renera-sp-5);
  display: flex;
  flex-direction: column;
  min-height: 560px;
  background: var(--renera-olive-700);
  color: var(--renera-sand-200);
  border-radius: var(--renera-r-lg);
  padding: var(--renera-sp-5) var(--renera-sp-4);
}
.rn-pp-side__brand {
  padding: 0 var(--renera-sp-2) var(--renera-sp-5);
  border-bottom: 1px solid rgba(246, 238, 232, 0.16);
  color: var(--renera-sand-200); /* wordmark SVG inherits via currentColor */
}
.rn-pp-side__brand svg { width: 96px; height: auto; }
.rn-pp-side__tag {
  display: block;
  margin-top: 6px;
  font-family: var(--renera-font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--renera-olive-300);
}
.rn-pp-nav { display: flex; flex-direction: column; gap: 4px; padding-top: var(--renera-sp-5); }
.rn-pp-nav a {
  display: block;
  padding: 11px var(--renera-sp-3);
  border-radius: var(--renera-r-sm);
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--renera-sand-200);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity var(--renera-dur-fast) var(--renera-ease), background var(--renera-dur-fast) var(--renera-ease);
}
.rn-pp-nav a:hover { opacity: 1; }
.rn-pp-nav a.is-active {
  opacity: 1;
  background: rgba(246, 238, 232, 0.12);
}
.rn-pp-side__foot {
  margin-top: auto;
  padding-top: var(--renera-sp-5);
  border-top: 1px solid rgba(246, 238, 232, 0.16);
  font-size: var(--renera-fs-sm);
}
.rn-pp-side__user { display: block; font-weight: 600; color: var(--renera-sand-100); }
.rn-pp-side__foot a {
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--renera-olive-300);
  text-decoration: none;
}
.rn-pp-side__foot a:hover { color: var(--renera-sand-100); }

/* ─── Portal plane: head, tiles, panels ─────────────────────────────────── */

.rn-pp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--renera-sp-4);
  margin-bottom: var(--renera-sp-5);
  flex-wrap: wrap;
}
.rn-pp-head h1 { font-size: var(--renera-fs-3xl); line-height: var(--renera-lh-tight); }

.rn-pp-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--renera-sp-4);
  margin-bottom: var(--renera-sp-5);
}
.rn-pp-tile {
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  padding: var(--renera-sp-4) var(--renera-sp-4) var(--renera-sp-3);
}
.rn-pp-tile__label {
  margin: 0 0 10px;
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-pp-tile__value {
  font-family: var(--renera-font-serif);
  font-size: var(--renera-fs-2xl);
  color: var(--renera-olive-700);
  line-height: 1.1;
}
.rn-pp-tile__sub { margin: 8px 0 0; font-size: var(--renera-fs-xs); color: var(--renera-mute); }
.rn-pp-tile__sub .up { color: var(--renera-olive-500); }
.rn-pp-tile__sub .down { color: var(--renera-clay-700); }

/* The payout tile inverts (the mock's dark card) */
.rn-pp-tile--payout { background: var(--renera-olive-700); border-color: var(--renera-olive-700); }
.rn-pp-tile--payout .rn-pp-tile__label { color: var(--renera-olive-300); }
.rn-pp-tile--payout .rn-pp-tile__value { color: var(--renera-sand-100); }
.rn-pp-tile--payout .rn-pp-tile__sub { color: var(--renera-sand-200); opacity: 0.75; }

.rn-pp-panel {
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  padding: var(--renera-sp-5);
  margin-bottom: var(--renera-sp-5);
}
.rn-pp-panel__title {
  margin: 0 0 4px;
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renera-olive-700);
}
.rn-pp-panel__sub { margin: 0 0 var(--renera-sp-4); font-size: var(--renera-fs-sm); color: var(--renera-mute); }

.rn-pp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--renera-sp-5);
  align-items: start;
}

/* Chart */
.rn-pp-chart svg { width: 100%; height: auto; display: block; }
.rn-pp-chart .rn-grid { stroke: var(--renera-clay-300); stroke-width: 1; }
.rn-pp-chart .rn-bar { fill: var(--renera-olive-500); }
.rn-pp-chart .rn-bar:hover { fill: var(--renera-olive-700); }
.rn-pp-chart .rn-line { fill: none; stroke: var(--renera-clay-700); stroke-width: 2; stroke-linejoin: round; }
.rn-pp-chart text { font-family: var(--renera-font-mono); font-size: 10px; fill: var(--renera-mute); }
.rn-pp-legend { display: flex; gap: var(--renera-sp-5); margin-top: var(--renera-sp-3); font-size: var(--renera-fs-xs); color: var(--renera-mute); }
.rn-pp-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--renera-olive-500); margin-right: 6px; vertical-align: -1px; }
.rn-pp-legend i.line { height: 2px; border-radius: 0; background: var(--renera-clay-700); vertical-align: 3px; }

/* Codes card */
.rn-pp-code {
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-md);
  padding: var(--renera-sp-3) var(--renera-sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--renera-sp-3);
  margin-bottom: var(--renera-sp-3);
  background: var(--renera-sand-100);
}
.rn-pp-code__code { font-family: var(--renera-font-mono); font-size: var(--renera-fs-md); letter-spacing: 0.08em; color: var(--renera-olive-700); font-weight: 600; word-break: break-all; }
.rn-pp-code__meta { display: block; margin-top: 2px; font-size: var(--renera-fs-xs); color: var(--renera-mute); font-family: var(--renera-font-sans); letter-spacing: 0; font-weight: 400; }
/* Scoped to body.rn-pp-page for the same reason as .rn-pp-btn above (0,1,1
 * beats brand-base's bare [type="button"] reset) AND to stay above it here:
 * "Copy my link" carries BOTH `.rn-pp-btn.rn-pp-copy`, so this ghost look
 * only wins over .rn-pp-btn's solid fill because it is declared later in
 * this file at equal specificity — keep both scoped identically so that
 * tie-break-by-source-order still applies instead of one out-specifying
 * the other. */
body.rn-pp-page .rn-pp-copy {
  flex: none;
  background: transparent;
  border: 1px solid var(--renera-olive-700);
  color: var(--renera-olive-700);
  border-radius: var(--renera-r-sm);
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--renera-dur-fast) var(--renera-ease), color var(--renera-dur-fast) var(--renera-ease);
}
body.rn-pp-page .rn-pp-copy:hover, body.rn-pp-page .rn-pp-copy.is-copied { background: var(--renera-olive-700); color: var(--renera-sand-200); }

/* Tables (PII-free order rows) */
.rn-pp-tablewrap { overflow-x: auto; }
.rn-pp-table { width: 100%; border-collapse: collapse; font-size: var(--renera-fs-sm); }
.rn-pp-table th {
  text-align: left;
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--renera-mute);
  font-weight: 500;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-pp-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--renera-clay-300); vertical-align: middle; }
.rn-pp-table tr:last-child td { border-bottom: 0; }
.rn-pp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rn-pp-table th.num { text-align: right; }

.rn-pp-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--renera-r-pill);
  font-family: var(--renera-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rn-pp-pill--paid, .rn-pp-pill--completed { background: var(--renera-olive-100); color: var(--renera-olive-700); }
.rn-pp-pill--pending, .rn-pp-pill--processing { background: var(--renera-clay-200); color: var(--renera-clay-700); }
.rn-pp-pill--source { background: var(--renera-sand-400); color: var(--renera-olive-600); }

/* Commissions ledger */
.rn-pp-month { margin-bottom: var(--renera-sp-5); }
.rn-pp-month__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--renera-sp-3);
  padding-bottom: var(--renera-sp-2);
  border-bottom: 1px solid var(--renera-clay-300);
  margin-bottom: var(--renera-sp-2);
}
.rn-pp-month__name { font-family: var(--renera-font-serif); font-size: var(--renera-fs-lg); color: var(--renera-olive-700); }

/* Guidelines */
.rn-pp-rules { margin: 0; padding: 0; list-style: none; }
.rn-pp-rules li { padding: var(--renera-sp-3) 0; border-bottom: 1px solid var(--renera-clay-300); font-size: var(--renera-fs-sm); line-height: var(--renera-lh-normal); }
.rn-pp-rules li:last-child { border-bottom: 0; }
.rn-pp-rules strong { color: var(--renera-olive-700); }

/* Empty states */
.rn-pp-empty {
  padding: var(--renera-sp-6);
  text-align: center;
  color: var(--renera-mute);
  font-size: var(--renera-fs-sm);
  border: 1px dashed var(--renera-clay-300);
  border-radius: var(--renera-r-md);
}

/* ─── Invite / status cards (non-partner states) ────────────────────────── */

.rn-pp-invite {
  max-width: 640px;
  margin: var(--renera-sp-8) auto;
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-xl);
  padding: var(--renera-sp-7) var(--renera-sp-6);
  text-align: center;
}
.rn-pp-invite h1 { font-size: var(--renera-fs-3xl); margin: var(--renera-sp-3) 0; }
.rn-pp-invite p { color: var(--renera-mute); line-height: var(--renera-lh-normal); margin: 0 0 var(--renera-sp-5); }

/* ─── Apply page ────────────────────────────────────────────────────────── */

.rn-pp-apply {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--renera-sp-7);
  align-items: start;
  padding-top: var(--renera-sp-7);
}
.rn-pp-apply__aside h1 { font-size: var(--renera-fs-4xl); line-height: var(--renera-lh-tight); margin: var(--renera-sp-4) 0; }
.rn-pp-apply__lead { font-family: var(--renera-font-serif); font-style: italic; font-size: var(--renera-fs-lg); color: var(--renera-olive-600); line-height: var(--renera-lh-normal); max-width: 400px; }
.rn-pp-apply__phases { margin: var(--renera-sp-6) 0 0; padding: 0; list-style: none; }
.rn-pp-apply__phases li { display: flex; gap: var(--renera-sp-3); padding: var(--renera-sp-3) 0; border-top: 1px solid var(--renera-clay-300); font-size: var(--renera-fs-sm); color: var(--renera-mute); }
.rn-pp-apply__phases b { font-family: var(--renera-font-mono); font-weight: 500; color: var(--renera-olive-700); letter-spacing: 0.1em; }

.rn-pp-form {
  background: var(--renera-paper);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-xl);
  padding: var(--renera-sp-6);
  box-shadow: var(--renera-shadow-card);
}
.rn-pp-form .rn-pp-field { margin-bottom: var(--renera-sp-4); }
.rn-pp-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--renera-olive-700);
}
.rn-pp-form input[type="text"],
.rn-pp-form input[type="email"],
.rn-pp-form input[type="url"],
.rn-pp-form textarea {
  width: 100%;
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-md);
  background: var(--renera-sand-100);
  padding: 13px 14px;
  font-family: var(--renera-font-sans);
  font-size: var(--renera-fs-base);
  color: var(--renera-ink);
  transition: border-color var(--renera-dur-fast) var(--renera-ease);
}
.rn-pp-form input:focus, .rn-pp-form textarea:focus { outline: none; border-color: var(--renera-olive-500); }
.rn-pp-form textarea { min-height: 96px; resize: vertical; }
.rn-pp-form .rn-pp-btn { width: 100%; height: 52px; margin-top: var(--renera-sp-2); }

.rn-pp-notice {
  border-radius: var(--renera-r-md);
  padding: var(--renera-sp-3) var(--renera-sp-4);
  margin-bottom: var(--renera-sp-4);
  font-size: var(--renera-fs-sm);
  line-height: var(--renera-lh-normal);
}
.rn-pp-notice--ok { background: var(--renera-olive-100); color: var(--renera-olive-700); border: 1px solid var(--renera-olive-200); }
.rn-pp-notice--err { background: var(--renera-clay-200); color: var(--renera-clay-700); border: 1px solid var(--renera-clay-300); }

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .rn-pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-pp-cols { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .rn-pp-app { grid-template-columns: 1fr; }
  .rn-pp-side { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--renera-sp-3); padding: var(--renera-sp-3) var(--renera-sp-4); }
  .rn-pp-side__brand { padding: 0; border-bottom: 0; }
  .rn-pp-side__brand svg { width: 72px; }
  .rn-pp-side__tag { display: none; }
  .rn-pp-nav { flex-direction: row; padding-top: 0; flex-wrap: wrap; }
  .rn-pp-nav a { padding: 8px 10px; }
  .rn-pp-side__foot { margin: 0 0 0 auto; padding-top: 0; border-top: 0; }
  .rn-pp-side__user { display: none; }
  .rn-pp-apply { grid-template-columns: 1fr; gap: var(--renera-sp-5); padding-top: var(--renera-sp-5); }
}

@media (max-width: 560px) {
  .rn-pp-tiles { grid-template-columns: 1fr; }
  .rn-pp-wrap { padding-left: var(--renera-sp-4); padding-right: var(--renera-sp-4); }
  .rn-pp-form { padding: var(--renera-sp-5); }
}