/* ==========================================================================
   partners.crewbyte.io
   Loaded after base.css and site.css, which supply the shell, nav, footer,
   .section, .ix, .plans, .panel and the form controls. Only what is unique to
   the partner portal lives here.
   ========================================================================== */

/* ------------------------------------------------------------ dashboard nav */
.pnav a.is-active { color: #F8F7F4; }
.pnav a.is-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: var(--accent-on-dark);
  border-radius: 2px;
}

/* Second row on phones, where the header links are hidden. Scrolls sideways
   rather than wrapping — six items wrapping to two lines eats the screen. */
.ptabs {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--s3) var(--s5);
  background: var(--ink-800);
  border-bottom: 1px solid var(--line-dark);
}
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: .8125rem;
  font-weight: 560;
  color: rgba(248, 247, 244, .62);
  text-decoration: none;
  white-space: nowrap;
}
.ptabs a.is-active { background: rgba(18, 135, 111, .22); color: #F8F7F4; }

/* ------------------------------------------------------------------- tier */
.ptier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 660;
  letter-spacing: .04em;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink-600);
  white-space: nowrap;
}
.ptier::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* Metal-ish without being literal about it — a flat tint each, no gradients. */
.ptier--bronze { border-color: #C9A227; color: #8A6D1F; background: #FBF4E2; }
.ptier--silver { border-color: #9AA1AC; color: #5A626E; background: #F1F3F5; }
.ptier--gold   { border-color: #C79A2E; color: #7A5C12; background: #FBF1DA; }
.ptier--elite  { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }

/* ------------------------------------------------------------------ stats */
.pstats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 560px)  { .pstats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .pstats { grid-template-columns: repeat(4, 1fr); } }

.pstat { background: var(--paper-raised); padding: var(--s5); }
.pstat__label {
  display: block;
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: var(--s2);
}
.pstat__value {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: 640;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--ink-900);
}
.pstat__value.is-accent { color: var(--accent-deep); }
.pstat__note { display: block; font-size: .75rem; color: var(--ink-300); margin-top: 4px; }

/* ----------------------------------------------------------------- funnel */
.pfunnel {
  display: grid;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 640px)  { .pfunnel { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pfunnel { grid-template-columns: repeat(5, 1fr); } }

.pfunnel__step { background: var(--paper-raised); padding: var(--s5); text-align: center; }
.pfunnel__n {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 640;
  letter-spacing: -.04em;
  color: var(--ink-900);
  line-height: 1.05;
}
.pfunnel__label {
  display: block;
  margin-top: var(--s2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-600);
}
.pfunnel__note { display: block; font-size: .75rem; color: var(--ink-300); margin-top: 2px; }

/* Each step is narrower than the last so the shape reads as a funnel without
   drawing one. Off on small screens, where they stack. */
@media (min-width: 1000px) {
  .pfunnel__step:nth-child(2) .pfunnel__n { font-size: 1.625rem; }
  .pfunnel__step:nth-child(3) .pfunnel__n { font-size: 1.5rem; }
  .pfunnel__step:nth-child(4) .pfunnel__n { font-size: 1.5rem; }
  .pfunnel__step:nth-child(5) .pfunnel__n { color: var(--accent-deep); }
}

/* ------------------------------------------------------------------ links */
.plink {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.plink__url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--ink-700);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.plink__url::-webkit-scrollbar { display: none; }
.plink .btn { flex: 0 0 auto; }

/* Set by partners.js after a successful copy. */
.plink .btn.is-copied {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.plinks { display: grid; gap: var(--s4); }
.plinkcard {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
@media (min-width: 720px) { .plinkcard { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.plinkcard__main { min-width: 0; }
.plinkcard__title { font-size: 1rem; margin: 0 0 var(--s3); }
.plinkcard__meta { margin: var(--s3) 0 0; font-size: .8125rem; color: var(--ink-300); }

/* ------------------------------------------------------------------ chart */
.pchart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
}
.pchart i {
  flex: 1;
  background: var(--accent-tint-strong);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
.pchart i:last-child { background: var(--accent); }

/* -------------------------------------------------------------- resources */
.presources { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .presources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.presource {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .14s ease;
}
.presource:hover { border-color: var(--accent); }
.presource__kind {
  flex: 0 0 auto;
  width: 46px;
  padding: 4px 0;
  text-align: center;
  border-radius: var(--r-xs);
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.presource__body { flex: 1 1 auto; min-width: 0; }
.presource__title { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink-900); }
.presource__desc {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-300);
}
.presource__meta { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); }

/* -------------------------------------------------------------- agreement */
.pagreement {
  max-width: 70ch;
  padding: var(--s6);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: 60vh;
  overflow-y: auto;
}
/* On the public terms page there is nothing to scroll past — it is the page. */
.pagreement--flat { max-height: none; overflow: visible; border: 0; padding: 0; background: none; }

.pagreement h3 { font-size: 1rem; margin: var(--s6) 0 var(--s3); }
.pagreement h3:first-child { margin-top: 0; }
.pagreement p, .pagreement li { font-size: .9375rem; line-height: 1.7; color: var(--ink-500); }
.pagreement ul { padding-left: 1.25em; margin-bottom: var(--s5); }

/* ------------------------------------------------------------ terms table */
.pterms { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .pterms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pterms__label {
  display: block;
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 3px;
}
.pterms__value { display: block; font-size: .9375rem; font-weight: 590; color: var(--ink-900); }