/* ============================================================
   BYLD Wealth — Prototype base chrome (shared by 10 pivot screens)
   Imports tokens.css via the page, extends with phone-frame + common components.
   Authored 2026-04-08.
   ============================================================ */

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

/* ---------- Phone frame ---------- */
.screen {
  width: 100%;
  max-width: 390px;
  min-height: 844px;
  background: var(--surface-page-gradient);
  border-radius: var(--radius-3xl);
  border: var(--border-width-hair) solid var(--border-default);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Status bar ---------- */
.proto-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-24) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ---------- App bar ---------- */
.proto-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-24) var(--space-16);
}
.proto-app-bar__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proto-app-bar__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.proto-app-bar__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
}
.proto-app-bar__back {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  color: var(--text-default);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proto-app-bar__action-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* State badges */
.proto-state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}
.proto-state-badge--trial {
  background: var(--color-gold-12);
  border: var(--border-width-hair) solid var(--color-gold-24);
  color: var(--brand-primary);
}
.proto-state-badge--wealth-paid {
  background: var(--color-gold-24);
  border: var(--border-width-hair) solid var(--color-gold-40);
  color: var(--color-gold-300);
}
.proto-state-badge--free-markets {
  background: var(--color-neutral-700);
  border: var(--border-width-hair) solid var(--border-default);
  color: var(--color-state-free-markets);
}
.proto-state-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  animation: proto-pulse 2s ease-in-out infinite;
}
@keyframes proto-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------- Scroll region ---------- */
.proto-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: 0 0 120px;
}
.proto-scroll--tight { gap: var(--space-16); }

/* ---------- Section header ---------- */
.proto-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--space-24);
}
.proto-section-header__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.proto-section-header__action {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-link);
  text-decoration: none;
}

/* ---------- Content row ---------- */
.proto-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-16);
}

/* ---------- Generic row card ---------- */
.proto-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card);
  backdrop-filter: var(--blur-md);
}
.proto-row__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.proto-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.proto-row__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.proto-row__subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.proto-row__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.proto-row__amount {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
}
.proto-row__delta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}
.proto-row__delta--gain { color: var(--finance-gain); }
.proto-row__delta--loss { color: var(--finance-loss); }

/* ---------- Hero card ---------- */
.proto-hero {
  margin: 0 var(--space-16);
  padding: var(--space-24);
  background: var(--surface-glass-raised);
  border: var(--border-width-hair) solid var(--border-default);
  border-radius: var(--radius-card-lg);
  backdrop-filter: var(--blur-md);
  box-shadow: var(--elevation-card), var(--shadow-inset-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.proto-hero__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}
.proto-hero__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}
.proto-hero__delta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  color: var(--finance-gain);
}

/* ---------- CTA button (full-width) ---------- */
.proto-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}
.proto-cta .byld-button {
  width: 100%;
}

/* ---------- Notice card ---------- */
.notice-card {
  margin: 0 var(--space-16);
  padding: var(--space-20);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.notice-card--warning {
  background: color-mix(in srgb, var(--feedback-warning) 10%, var(--surface-glass));
  border: var(--border-width-hair) solid var(--feedback-warning);
}
.notice-card--error {
  background: color-mix(in srgb, var(--feedback-error) 10%, var(--surface-glass));
  border: var(--border-width-hair) solid var(--feedback-error);
}
.notice-card--success {
  background: color-mix(in srgb, var(--feedback-success) 10%, var(--surface-glass));
  border: var(--border-width-hair) solid var(--feedback-success);
}
.notice-card--info {
  background: var(--surface-glass);
  border: var(--border-width-hair) solid var(--border-default);
}
.notice-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.notice-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.notice-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.notice-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}
.notice-card__copy {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}
.notice-card__actions {
  display: flex;
  gap: var(--space-8);
}

/* ---------- MIA bubble row (for embedded conversational UI) ---------- */
.proto-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-16);
}
.proto-chat__bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  max-width: 88%;
}
.proto-chat__bubble--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.proto-chat__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 30% 30%, var(--color-gold-200), var(--color-gold-500) 55%, var(--color-gold-900));
  box-shadow: 0 0 10px var(--color-gold-24);
  flex-shrink: 0;
}
.proto-chat__text {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-card-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
.proto-chat__bubble--mia .proto-chat__text {
  background: var(--surface-glass-raised);
  border: var(--border-width-hair) solid var(--border-default);
  color: var(--text-default);
  border-bottom-left-radius: var(--radius-sm);
}
.proto-chat__bubble--user .proto-chat__text {
  background: linear-gradient(135deg, var(--color-gold-300), var(--color-gold-600));
  color: var(--text-inverse);
  border-bottom-right-radius: var(--radius-sm);
}

/* ---------- Trial banner (for Day 5/6/7) ---------- */
.proto-trial-banner {
  margin: 0 var(--space-16);
  padding: var(--space-20);
  background: var(--color-gold-12);
  border: var(--border-width-hair) solid var(--color-gold-24);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  box-shadow: 0 0 40px rgba(196,154,60,0.1);
}
.proto-trial-banner__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.proto-trial-banner__days {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--elevation-cta);
}
.proto-trial-banner__days-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.proto-trial-banner__days-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}
.proto-trial-banner__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.proto-trial-banner__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary);
}
.proto-trial-banner__subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.proto-trial-banner__body {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}
.proto-trial-banner__actions {
  display: flex;
  gap: var(--space-8);
}

/* ---------- Taxonomy group header ---------- */
.tax-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.tax-group__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-24);
}
.tax-group__eyebrow-line {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}
.tax-group__eyebrow-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Tax total row ---------- */
.tax-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-16) var(--space-24) 0;
}
.tax-total__label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}
.tax-total__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-default);
}

/* ---------- Progress bar ---------- */
.proto-bar {
  width: 100%;
  height: 6px;
  background: var(--color-white-06);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.proto-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300));
  border-radius: var(--radius-full);
}

/* ---------- Upload area ---------- */
.upload-zone {
  margin: 0 var(--space-16);
  padding: var(--space-32);
  border: 2px dashed var(--border-raised);
  border-radius: var(--radius-card-lg);
  background: var(--surface-glass);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}
.upload-zone__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-gold-12);
  border: var(--border-width-hair) solid var(--color-gold-24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-size: 24px;
}
.upload-zone__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.upload-zone__sub {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}