/* ═══════════════════════════════════════════════════════════════════════════
 * ArrParty.WebApp — public marketing surface (static SSR)
 * ═══════════════════════════════════════════════════════════════════════════
 * App-specific layout for the anonymous public pages (header, hero, value
 * props, footer). Visual vocabulary + colours + fonts all resolve through the
 * design-system tokens (brand-tokens.css). No raw hex, no hardcoded font —
 * indigo (--ac-primary) = actions/links · oxblood (--ac-accent) = brand mark
 * only · Geist sans for words · Geist Mono for uppercase micro-labels.
 * ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--brand-canvas);
  color: var(--brand-text);
  font-family: var(--aspire-font-family-sans);
  font-size: var(--aspire-font-size-base);
  font-weight: var(--aspire-font-weight-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
.pub-shell { display: flex; flex-direction: column; min-height: 100vh; }
.pub-main { flex: 1 0 auto; }
.pub-container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--aspire-spacing-6);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--brand-chrome) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-border-soft);
}
.pub-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aspire-spacing-4);
  min-height: 64px;
}
.pub-header__nav {
  display: flex;
  align-items: center;
  gap: var(--aspire-spacing-6);
}
.pub-header__nav-link {
  font-size: var(--aspire-font-size-sm);
  font-weight: var(--aspire-font-weight-medium);
  color: var(--brand-text-idle);
  transition: color var(--aspire-transition-fast);
}
.pub-header__nav-link:hover { color: var(--brand-text); }
.pub-header__actions { display: flex; align-items: center; gap: var(--aspire-spacing-3); }

/* ── Brand mark (oxblood — rationed brand identity, the only accent use) ─── */
.pub-brand { display: inline-flex; align-items: center; gap: var(--aspire-spacing-3); }
.pub-brand__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--aspire-border-radius-md);
  background: var(--ac-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--aspire-font-family-mono);
  font-weight: var(--aspire-font-weight-medium);
  font-size: var(--aspire-font-size-sm);
  letter-spacing: .02em;
}
.pub-brand__name {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-lg);
  color: var(--brand-text);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pub-hero { padding-block: var(--aspire-spacing-16) var(--aspire-spacing-12); }
.pub-hero__inner { max-width: 44rem; }

/* Split hero: marketing copy (left) + login island (right). Login is the primary element. */
.pub-hero--split { padding-block: var(--aspire-spacing-16) var(--aspire-spacing-12); }
.pub-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--aspire-spacing-16);
  align-items: center;
}
.pub-hero__copy { max-width: 34rem; }
.pub-hero__login { display: flex; justify-content: flex-end; }

/* Experimental AI build flag — informational (indigo), mono uppercase pill. */
.pub-flag {
  display: inline-block;
  font-family: var(--aspire-font-family-mono);
  font-size: var(--aspire-font-size-xs);
  font-weight: var(--aspire-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ac-primary-tint);
  background: var(--ac-primary-soft);
  border: 1px solid var(--ac-primary-line);
  border-radius: var(--aspire-border-radius-full);
  padding: var(--aspire-spacing-1) var(--aspire-spacing-3);
  margin: 0 0 var(--aspire-spacing-5);
}

/* Login card — surface frame around the shared AuthCore.UI NativeEmailLogin (.ac-login), which
   brings its own internal title/help/field styling. */
.pub-login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--aspire-border-radius-lg);
  padding: var(--aspire-spacing-8);
  box-shadow: var(--aspire-shadow-lg);
}
.pub-login-card__signedin { display: flex; flex-direction: column; gap: var(--aspire-spacing-3); }
.pub-login-card__signedin-title {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-xl);
  color: var(--brand-text);
  margin: var(--aspire-spacing-2) 0 0;
}
.pub-login-card__signedin-sub {
  font-size: var(--aspire-font-size-sm);
  color: var(--brand-text-idle);
  line-height: 1.55;
  margin: 0 0 var(--aspire-spacing-3);
}
.pub-hero__eyebrow {
  font-family: var(--aspire-font-family-mono);
  font-size: var(--aspire-font-size-xs);
  font-weight: var(--aspire-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ac-primary-tint);
  margin: 0 0 var(--aspire-spacing-5);
}
.pub-hero__title {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-4xl);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--brand-text);
  margin: 0 0 var(--aspire-spacing-5);
}
.pub-hero__tagline {
  font-size: var(--aspire-font-size-xl);
  font-weight: var(--aspire-font-weight-normal);
  color: var(--brand-text-idle);
  line-height: 1.5;
  margin: 0 0 var(--aspire-spacing-8);
}
.pub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--aspire-spacing-4); align-items: center; }
.pub-hero__note { font-size: var(--aspire-font-size-sm); color: var(--brand-text-muted); }

/* ── Value props ────────────────────────────────────────────────────────── */
.pub-values { padding-block: var(--aspire-spacing-12) var(--aspire-spacing-16); }
.pub-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--aspire-spacing-6);
}
.pub-value {
  padding: var(--aspire-spacing-6);
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--aspire-border-radius-lg);
}
.pub-value__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--aspire-border-radius-md);
  background: var(--ac-primary-soft);
  color: var(--ac-primary-tint);
  margin-bottom: var(--aspire-spacing-4);
}
.pub-value__icon svg { width: 1.25rem; height: 1.25rem; }
.pub-value__title {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-lg);
  color: var(--brand-text);
  margin: 0 0 var(--aspire-spacing-2);
}
.pub-value__text {
  font-size: var(--aspire-font-size-sm);
  color: var(--brand-text-idle);
  line-height: 1.55;
  margin: 0;
}

/* ── Footer (columned: Product / Company / Social + bottom legal row) ───── */
.site-footer {
  flex-shrink: 0;
  background: var(--brand-chrome);
  border-top: 1px solid var(--brand-border-soft);
  padding-block: var(--aspire-spacing-12) var(--aspire-spacing-8);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--aspire-spacing-8);
}
.site-footer__brand-name {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-lg);
  color: var(--brand-text);
  margin: 0 0 var(--aspire-spacing-3);
}
.site-footer__tagline {
  font-size: var(--aspire-font-size-sm);
  color: var(--brand-text-muted);
  max-width: 22rem;
  line-height: 1.55;
  margin: 0;
}
.site-footer__heading {
  font-family: var(--aspire-font-family-mono);
  font-size: var(--aspire-font-size-xs);
  font-weight: var(--aspire-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-text-muted);
  margin: 0 0 var(--aspire-spacing-4);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aspire-spacing-3); }
.site-footer__link {
  font-size: var(--aspire-font-size-sm);
  font-weight: var(--aspire-font-weight-normal);
  color: var(--brand-text-idle);
  transition: color var(--aspire-transition-fast);
}
.site-footer__link:hover { color: var(--brand-text); }
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--aspire-border-radius-md);
  border: 1px solid var(--brand-border-soft);
  color: var(--brand-text-muted);
}
.site-footer__social svg { width: 1.1rem; height: 1.1rem; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aspire-spacing-4);
  margin-top: var(--aspire-spacing-10);
  padding-top: var(--aspire-spacing-6);
  border-top: 1px solid var(--brand-border-soft);
}
.site-footer__copyright { font-size: var(--aspire-font-size-xs); color: var(--brand-text-dim); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--aspire-spacing-5); }
.site-footer__legal a {
  font-size: var(--aspire-font-size-xs);
  color: var(--brand-text-muted);
  transition: color var(--aspire-transition-fast);
}
.site-footer__legal a:hover { color: var(--brand-text); }

/* ── Generic public prose (e.g. /login stub) ────────────────────────────── */
.pub-prose { padding-block: var(--aspire-spacing-16); max-width: 38rem; }
.pub-prose__title {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-3xl);
  color: var(--brand-text);
  margin: 0 0 var(--aspire-spacing-4);
}
.pub-prose__text { font-size: var(--aspire-font-size-base); color: var(--brand-text-idle); line-height: 1.6; }

/* ── Public content pages (About / Features / legal / etc.) ──────────────── */
.pub-prose__lede {
  font-size: var(--aspire-font-size-lg);
  color: var(--brand-text-idle);
  line-height: 1.6;
  margin: 0 0 var(--aspire-spacing-8);
}
.pub-prose__body { color: var(--brand-text-idle); font-size: var(--aspire-font-size-base); line-height: 1.7; }
.pub-prose__body > * + * { margin-top: var(--aspire-spacing-5); }
.pub-prose__body h2 {
  font-family: var(--aspire-font-family-sans);
  font-weight: var(--aspire-font-weight-semibold);
  font-size: var(--aspire-font-size-xl);
  color: var(--brand-text);
  margin: var(--aspire-spacing-10) 0 0;
}
.pub-prose__body ul { margin: 0; padding-left: var(--aspire-spacing-6); display: grid; gap: var(--aspire-spacing-2); }
.pub-prose__body a { color: var(--ac-primary-tint); text-decoration: underline; }
.pub-prose__note {
  margin-top: var(--aspire-spacing-8);
  padding-left: var(--aspire-spacing-4);
  border-left: 2px solid var(--ac-primary);
  color: var(--brand-text-muted);
  font-size: var(--aspire-font-size-sm);
}

/* ── Blazor framework error boundary (tokenized) ────────────────────────── */
.blazor-error-boundary {
  background: var(--ac-danger);
  padding: var(--aspire-spacing-4) var(--aspire-spacing-6);
  color: var(--ac-danger-fg);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .pub-values__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .pub-header__nav { display: none; }
  .pub-hero__title { font-size: var(--aspire-font-size-3xl); }
  .pub-hero__grid { grid-template-columns: 1fr; gap: var(--aspire-spacing-10); }
  .pub-hero__copy { max-width: none; }
  .pub-hero__login { justify-content: stretch; }
  .pub-login-card { max-width: none; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .pub-container { padding-inline: var(--aspire-spacing-4); }
}