/* Partnership Portal, partner pages and the Partner API admin. */
.portal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.portal-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.portal-chip {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .25rem .75rem;
  font-size: .85rem;
  background: var(--color-white);
  color: var(--color-text-secondary);
}

.portal-chip strong { color: var(--ares-navy-900); font-weight: 600; }
.portal-chip.is-warning { background: var(--ares-sand-bg); border-color: var(--ares-sand-border); color: var(--ares-sand-text); }

.kpi {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  background: var(--color-white);
  height: 100%;
}

.kpi-label { font-size: .8rem; color: var(--color-text-tertiary); margin-bottom: .15rem; }
.kpi-value { font-size: 1.45rem; font-weight: 600; color: var(--ares-navy-900); line-height: 1.2; }
.kpi-sub { font-size: .8rem; color: var(--color-text-tertiary); }

.chart-box { position: relative; height: 240px; }

.code-block {
  background: var(--ares-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--ares-navy-900);
  padding: .9rem 1rem;
  font-size: .82rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

.secret-box {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--ares-mint-300);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .85rem;
  word-break: break-all;
}

.secret-box code { flex: 1; color: var(--ares-navy-900); background: none; padding: 0; }

.plan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  background: var(--color-white);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.plan-card.is-current { border-color: var(--ares-mint-500); box-shadow: inset 0 3px 0 var(--ares-mint-300); }
.plan-card.is-unavailable { background: var(--ares-gray-50); border-style: dashed; border-color: var(--ares-gray-300); }
.plan-card.is-unavailable .plan-price,
.plan-card.is-unavailable h2, .plan-card.is-unavailable h3 { color: var(--ares-gray-500); }
.plan-price { font-size: 1.35rem; font-weight: 600; color: var(--ares-navy-900); }
.plan-price-note { font-size: .8rem; color: var(--color-text-secondary); }
.plan-card ul { padding-left: 1.1rem; margin: .75rem 0 1rem; color: var(--color-text-secondary); font-size: .9rem; }
.plan-action { margin-top: auto; }
.plan-unavailable-note { font-size: .8rem; color: var(--ares-gray-600); margin: 0 0 .75rem; }
.onboarding-steps .list-group-item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.onboarding-steps .step-state {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600;
  background: var(--ares-navy-50); color: var(--ares-navy-700);
}
.onboarding-steps .is-done .step-state { background: var(--ares-mint-100); color: var(--ares-mint-800); }
.onboarding-steps .is-done > span:not(.step-state) { color: var(--color-text-secondary); }
.plan-badge {
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  padding: .15rem .5rem; border-radius: 999px;
  background: var(--ares-navy-50); color: var(--ares-navy-700);
}
.plan-badge.is-current { background: var(--ares-mint-100); color: var(--ares-mint-800); }
.plan-badge.is-soon { background: var(--ares-gray-150); color: var(--ares-gray-700); }
.plan-card .btn:disabled, .plan-card .btn.disabled { opacity: 1; background: var(--ares-gray-100); border-color: var(--ares-gray-300); color: var(--ares-gray-600); }

.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.status-dot.ok { background: var(--ares-mint-500); }
.status-dot.off { background: var(--ares-gray-300); }
.status-dot.bad { background: var(--color-danger); }

.table-api td, .table-api th { font-size: .88rem; vertical-align: middle; }
@media (max-width: 767.98px) {
  /* Docs tables sit directly in the text column; let them scroll in place. */
  .docs-section .table-api { display: block; overflow-x: auto; }
}
.table-api code { font-size: .82rem; }

.docs-toc { position: sticky; top: 90px; font-size: .9rem; }
.docs-toc a { display: block; padding: .2rem 0; color: var(--color-text-secondary); }
.docs-toc a:hover { color: var(--ares-navy-900); }
.docs-section { scroll-margin-top: 90px; margin-bottom: 2.5rem; }
.docs-section h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.docs-section h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.method-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: var(--radius-sm); background: var(--ares-mint-100); color: var(--ares-mint-800); margin-right: .4rem; }

.partner-hero { padding: 3.5rem 0 3rem; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); }
.partner-hero h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--ares-navy-900); }
.partner-hero .lead { color: var(--color-text-secondary); max-width: 640px; }
.step-num { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ares-mint-100); color: var(--ares-mint-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; flex-shrink: 0; }

.admin-subnav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.admin-subnav a { padding: .5rem .85rem; color: var(--color-text-secondary); border-bottom: 2px solid transparent; font-size: .92rem; }
.admin-subnav a.active { color: var(--ares-navy-900); border-bottom-color: var(--ares-mint-500); font-weight: 600; }

/* Links inside running text must not rely on colour alone (WCAG 1.4.1). */
.partner-area :where(p, li, td, label, span, div, .form-text, .kpi-sub) > a:where(:not(.btn, .nav-link, .dropdown-item)) {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.partner-area .docs-toc a,
.partner-area .admin-subnav a { text-decoration: none; }