/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #0d0d1a;
  --color-surface: #161625;
  --color-surface-hover: #1e1e30;
  --color-border: #2a2a40;
  --color-text: #e0dfe6;
  --color-text-muted: #8a89a0;
  --color-accent: #a78bfa;
  --color-accent-dim: #7c5cbf;
  --color-highlight: #e8c794;
  --color-success: #6ee7b7;
  --color-error: #f87171;
  --color-danger: #dc2626;
  --font-body: "Georgia", "Times New Roman", serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
  --radius: 8px;
  --transition: 0.4s ease-in-out;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover,
a:focus {
  color: var(--color-text);
}

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

h1 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h2 { font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--color-text-muted); }
h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

img { max-width: 100%; height: auto; }

/* ===== Navigation ===== */
.main-nav {
  border-bottom: 1px solid var(--color-border);
  padding: 1rem;
}

.nav-inner {
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}

.nav-brand:hover,
.nav-brand:focus {
  opacity: 0.75;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-text);
}

.nav-logout-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.nav-logout {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.3s ease-in-out;
}

.nav-logout:hover,
.nav-logout:focus {
  color: var(--color-text);
}

/* ===== Main ===== */
main {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ===== Flash Messages ===== */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: fadeIn 0.4s ease-in-out;
}

.flash p { margin: 0; }

.flash-notice {
  background: rgba(110, 231, 183, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.25);
  color: var(--color-success);
}

.flash-alert {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: var(--color-error);
}

.flash-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash-dismissing {
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  min-height: 44px;
  min-width: 44px;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-danger:hover,
.btn-danger:focus {
  background: #b91c1c;
  color: white;
}

/* ===== Forms ===== */
.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition);
  min-height: 44px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.field textarea {
  resize: vertical;
  min-height: 200px;
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-checkbox label {
  margin-bottom: 0;
}

.field-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-error {
  display: block;
  color: var(--color-error);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.field-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

/* ===== City Autocomplete ===== */
.field-autocomplete {
  position: relative;
}

.city-autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  list-style: none;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
}

.city-autocomplete-results[hidden] {
  display: none;
}

.city-autocomplete-results li {
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--transition);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.city-autocomplete-results li:hover,
.city-autocomplete-results .city-autocomplete-active {
  background: var(--color-surface-hover);
  color: var(--color-accent);
}

.form-errors {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  color: var(--color-error);
}

.form-errors p { margin: 0; }

.form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

.form-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* ===== Auth Forms ===== */
.auth-form {
  max-width: 28rem;
  margin: 2rem auto;
}

.auth-alt {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* ===== Marketing Page ===== */
.marketing-hero {
  text-align: center;
  padding: 3rem 0;
}

.marketing-hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.marketing-subhead {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 32rem;
  margin: 0 auto 2rem;
}

.marketing-chart-preview {
  margin: 2rem auto;
  max-width: 20rem;
}

.marketing-features {
  display: grid;
  gap: 1.5rem;
  margin: 3rem 0;
  text-align: left;
}

.feature h3 {
  color: var(--color-accent);
}

.feature p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.marketing-transparency {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 2rem 0;
}

.marketing-cta {
  margin-top: 2rem;
}

.marketing-login {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* ===== Onboarding ===== */
.onboarding {
  max-width: 32rem;
  margin: 0 auto;
}

.onboarding-note {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* ===== ASCII Charts ===== */
.chart-ascii {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-accent);
  background: var(--color-surface);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  white-space: pre;
}

.chart-small {
  font-size: 0.65rem;
  padding: 0.75rem;
  max-height: 12rem;
  overflow: hidden;
}

.chart-animated {
  animation: chartGlow 8s ease-in-out infinite;
}

@keyframes chartGlow {
  0%, 100% { border-color: var(--color-border); box-shadow: none; }
  50% { border-color: var(--color-accent-dim); box-shadow: 0 0 20px rgba(167, 139, 250, 0.08); }
}

/* ===== Briefs Index ===== */
.briefs-index { }

.brief-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition);
}

.brief-card:hover {
  border-color: var(--color-accent-dim);
}

.brief-card-today {
  border-color: var(--color-accent-dim);
}

.brief-card h2 a,
.brief-card h4 a {
  color: var(--color-text);
}

.brief-card h2 a:hover,
.brief-card h4 a:hover {
  color: var(--color-accent);
}

.brief-card time {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.brief-teaser {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.brief-empty-today,
.briefs-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}

.brief-today {
  margin-bottom: 2.5rem;
}

.brief-today-header {
  margin-bottom: 1.5rem;
}

.brief-today-header h1 {
  margin: 0.25rem 0 0.5rem;
}

.brief-today-header h1 a {
  color: var(--color-text);
}

.brief-today-header h1 a:hover {
  color: var(--color-accent);
}

.brief-today-header time {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.today-badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid var(--color-accent-dim);
  border-radius: var(--radius);
  padding: 0.2rem 0.6rem;
}

.past-briefs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.past-briefs li a {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition);
}

.past-briefs li a:hover {
  border-color: var(--color-accent-dim);
  color: var(--color-accent);
}

.past-briefs time {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.section-heading {
  color: var(--color-text-muted);
  margin: 2rem 0 1rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== Feed Subscribe ===== */
.feed-subscribe {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.feed-subscribe h3 {
  margin-bottom: 0.75rem;
}

.feed-url-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

/* ===== Upgrade Prompt ===== */
.upgrade-prompt {
  text-align: center;
  padding: 4rem 1rem;
}

.upgrade-prompt h1 {
  margin-bottom: 1rem;
}

.upgrade-prompt p {
  color: var(--color-text-muted);
}

.upgrade-note {
  font-size: 0.85rem;
  font-style: italic;
}

.upgrade-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

/* ===== Brief Detail ===== */
.brief-detail {
  max-width: 42rem;
}

.brief-header {
  margin-bottom: 2rem;
}

.brief-header time {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.brief-share {
  margin-top: 1rem;
}

.brief-audio {
  margin-bottom: 2rem;
}

.brief-audio audio {
  width: 100%;
  margin-bottom: 0.5rem;
}

.playback-speeds {
  display: flex;
  gap: 0.5rem;
}

.speed-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: all var(--transition);
}

.speed-btn.active,
.speed-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.audio-generating {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.brief-transcript {
  margin-bottom: 2rem;
}

.transcript-text {
  max-height: 20rem;
  overflow-y: auto;
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.brief-chart {
  margin-bottom: 2rem;
}

.brief-summary {
  margin-bottom: 2rem;
}

.brief-prompts {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  color: var(--color-text-muted);
}

.brief-journal-action {
  margin: 2rem 0;
  text-align: center;
}

/* ===== Journal ===== */
.journal-form {
  max-width: 36rem;
  margin: 0 auto;
}

.journal-prompts {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.journal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.journal-card time {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.journal-card h3 a {
  color: var(--color-text);
}

.journal-card h3 a:hover {
  color: var(--color-accent);
}

.journal-preview {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.journals-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}

/* ===== Shared chart layout (used by profile + briefs) ===== */
.chart-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .chart-container {
    grid-template-columns: auto 1fr;
  }
}

.profile-chart-pending,
.brief-pending {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
  animation: pulse 3s ease-in-out infinite;
}

.brief-pending h1 {
  margin-bottom: 0.5rem;
}

.chart-breakdown {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.chart-breakdown dt {
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chart-breakdown dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  color: var(--color-text);
}

.chart-breakdown-sign {
  font-weight: 500;
}

.chart-breakdown-house {
  color: var(--color-text-muted);
}

.chart-breakdown-house::before {
  content: "·";
  margin-right: 0.75rem;
  opacity: 0.5;
}

.chart-breakdown-degree {
  color: var(--color-text-muted);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.profile-details {
  margin-bottom: 2rem;
}

.profile-details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
}

.profile-details dt {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.profile-details dd {
  color: var(--color-text);
}

.approximate-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.profile-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ===== Natal Reading ===== */
.natal-reading {
  margin: 2rem 0;
  padding: 2rem 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  animation: natalReadingFadeIn 1.2s ease-in-out;
}

.natal-reading > h2 {
  margin: 0 0 1.5rem;
  font-size: 1.35rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.natal-reading-body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.75;
}

.natal-reading-body p {
  margin: 0 0 1.1rem;
}

.natal-reading-body .natal-reading-heading {
  margin: 2rem 0 0.85rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.01em;
}

.natal-reading-body .natal-reading-heading:first-child {
  margin-top: 0;
}

.natal-reading-body strong {
  color: var(--color-text);
  font-weight: 600;
}

.natal-reading-body em {
  color: var(--color-text);
  font-style: italic;
}

.natal-reading-pending {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

@keyframes natalReadingFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Daily Brief Reading Sections ===== */
.reading-summary {
  margin-top: 2.5rem;
}

.reading-prompts {
  margin: 2rem 0 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  animation: natalReadingFadeIn 1.2s ease-in-out;
}

.reading-prompts h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.reading-prompts ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: prompt-counter;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reading-prompts li {
  counter-increment: prompt-counter;
  padding: 0.85rem 0 0.85rem 2.25rem;
  position: relative;
  color: var(--color-text);
  line-height: 1.65;
  font-family: var(--font-body);
  border-top: 1px solid var(--color-border);
}

.reading-prompts li:first-child {
  border-top: none;
  padding-top: 0.25rem;
}

.reading-prompts li::before {
  content: counter(prompt-counter);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reading-prompts li:first-child::before {
  top: 0.25rem;
}

.profile-edit {
  max-width: 28rem;
  margin: 0 auto;
}

/* ===== Birth Profile Edit ===== */
.birth-profile-edit {
  max-width: 32rem;
  margin: 0 auto;
}

/* ===== Settings ===== */
.settings {
  max-width: 32rem;
  margin: 0 auto;
}

.settings section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.settings-notifications { }

.placeholder-note {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.settings-danger p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ===== Shared Brief ===== */
.shared-brief {
  max-width: 42rem;
  margin: 0 auto;
}

.shared-label {
  display: block;
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.shared-brief-cta {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.shared-brief-cta p {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* ===== Responsive ===== */
@media (min-width: 640px) {
  .marketing-hero h1 {
    font-size: 2.75rem;
  }

  .marketing-features {
    grid-template-columns: 1fr 1fr 1fr;
  }

  h1 { font-size: 2rem; }
}

@media (min-width: 768px) {
  main {
    padding: 3rem 2rem;
  }
}

/* ===== Guided onboarding walkthrough ===== */
.onboarding-progress {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-align: center;
  color: var(--color-accent-dim);
  margin: 0 0 2.5rem;
  user-select: none;
}

.onboarding-form {
  margin: 0;
}

.onboarding-step {
  animation: stepFadeIn 0.5s ease-in-out;
}

.onboarding-step[hidden] {
  display: none;
}

.onboarding-step h1 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}

.onboarding-step p {
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.onboarding-step .onboarding-lede {
  font-size: 1.05rem;
  color: var(--color-text);
}

.onboarding-step .field {
  margin-top: 1.5rem;
}

.onboarding-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.onboarding-actions .btn-secondary {
  margin-right: auto;
}

.btn-large {
  font-size: 1.05rem;
  padding: 0.95rem 2rem;
  letter-spacing: 0.02em;
}

.onboarding-step .ascii-art {
  display: block;
}

/* Confirm-step summary */
.onboarding-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
}

.onboarding-summary dt {
  color: var(--color-text-muted);
  font-weight: 400;
}

.onboarding-summary dd {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mono);
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Generating modal ===== */
.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(13, 13, 26, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  animation: modalFadeIn 0.6s ease-in-out;
}

.onboarding-modal-content {
  max-width: 32rem;
  width: 100%;
  text-align: center;
  color: var(--color-text);
}

.onboarding-modal-content .ascii-art--sun-large {
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.onboarding-modal-title {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.onboarding-modal-subtitle {
  color: var(--color-text-muted);
  margin: 0 0 2rem;
  line-height: 1.7;
}

.onboarding-modal-ticker {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  position: relative;
  height: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-style: italic;
}

.onboarding-modal-ticker li {
  position: absolute;
  inset: 0;
  opacity: 0;
  text-align: center;
}

.onboarding-modal-teaser {
  text-align: left;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0 auto;
}

.onboarding-modal-teaser h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin: 0 0 0.85rem;
  font-weight: 500;
}

.onboarding-modal-teaser p {
  margin: 0 0 0.85rem;
  color: var(--color-text);
  line-height: 1.65;
  font-size: 0.95rem;
}

.onboarding-modal-teaser p:last-child {
  margin-bottom: 0;
}

.onboarding-modal-teaser p.onboarding-modal-teaser-note {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.onboarding-modal-actions {
  margin-top: 2rem;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Onboarding modal + profile reveal animations ===== */
@media (prefers-reduced-motion: no-preference) {
  .onboarding-modal-ticker li {
    animation: tickerFade 12s ease-in-out infinite;
  }

  .onboarding-modal-ticker li:nth-child(1) { animation-delay: 0s; }
  .onboarding-modal-ticker li:nth-child(2) { animation-delay: 4s; }
  .onboarding-modal-ticker li:nth-child(3) { animation-delay: 8s; }

  .btn-large.btn-reveal {
    animation: revealEnter 0.9s ease-out;
  }

  .profile-first-reveal {
    animation: profileReveal 1.4s ease-out;
  }

  .profile-first-reveal > * {
    animation: profileRevealChild 1.4s ease-out backwards;
  }

  .profile-first-reveal > *:nth-child(1) { animation-delay: 0.1s; }
  .profile-first-reveal > *:nth-child(2) { animation-delay: 0.5s; }
  .profile-first-reveal > *:nth-child(3) { animation-delay: 1.0s; }
  .profile-first-reveal > *:nth-child(4) { animation-delay: 1.4s; }
  .profile-first-reveal > *:nth-child(5) { animation-delay: 1.8s; }
}

/* When motion is reduced, surface the first ticker line statically */
@media (prefers-reduced-motion: reduce) {
  .onboarding-modal-ticker {
    height: auto;
  }
  .onboarding-modal-ticker li {
    position: static;
    opacity: 1;
  }
  .onboarding-modal-ticker li + li {
    display: none;
  }
}

@keyframes tickerFade {
  0%, 100%       { opacity: 0; }
  6%, 27%        { opacity: 1; }
  33%            { opacity: 0; }
}

@keyframes revealEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes profileReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes profileRevealChild {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== ASCII art system =====
 *
 * Decorative motifs loaded via the ascii_art() helper. Base class handles
 * the monospace/whitespace/centering rules every motif needs; per-motif
 * modifier classes handle sizing and color tuning; animation classes are
 * gated on prefers-reduced-motion below.
 */
.ascii-art {
  font-family: var(--font-mono);
  white-space: pre;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-accent);
  line-height: 1.25;
  display: inline-block;
  transform-origin: center center;
  pointer-events: none;
}

/* Motif-specific sizing */
.ascii-art--sun-large {
  font-size: 0.72rem;
  line-height: 1.2;
  margin: 0 auto 3rem;
  color: var(--color-accent);
}

.ascii-art--sun-small {
  font-size: 0.78rem;
  color: var(--color-accent);
}

.ascii-art--moon-crescent {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.9;
}

.ascii-art--orbit-rings {
  font-size: 0.85rem;
  color: var(--color-accent-dim);
}

.ascii-art--vedic-primer {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-accent-dim);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin: 0 0 1.5rem;
  display: block;
  overflow-x: auto;
}

.ascii-art--star-field-lg,
.ascii-art--star-field-sm {
  font-size: 0.85rem;
  color: var(--color-accent);
}

/* Fixed-position background layer — extremely subtle atmosphere. */
.ascii-background-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0.07;
}

.ascii-background-layer .ascii-art {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-text);
  padding-top: 2rem;
}

body > main,
body > nav {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .ascii-rotating     { animation: asciiRotate 28s linear infinite; }
  .ascii-pulse        { animation: asciiPulse 4s ease-in-out infinite; }
  .ascii-orbit-spin   { animation: asciiRotate 60s linear infinite; }
  .ascii-drift        { animation: asciiDrift 90s ease-in-out infinite; }
  .ascii-twinkle      { animation: asciiTwinkle 6s ease-in-out infinite; }
}

@keyframes asciiRotate {
  to { transform: rotate(360deg); }
}

@keyframes asciiPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes asciiDrift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-6px, 4px); }
  50%      { transform: translate(4px, -3px); }
  75%      { transform: translate(-3px, -5px); }
}

@keyframes asciiTwinkle {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* ===== Welcome (marketing) page ===== */

.welcome {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.welcome-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.welcome-section:last-child {
  border-bottom: none;
}

.welcome-hero {
  padding-top: 1rem;
}

.welcome-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.welcome-h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.welcome-h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 auto 1.5rem;
  max-width: 34rem;
}

.welcome-lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 34rem;
  margin: 0 auto 2rem;
}

.welcome-prose {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
  color: var(--color-text);
}

.welcome-prose p {
  margin-bottom: 1.25rem;
}

.welcome-prose em {
  color: var(--color-text-muted);
  font-style: italic;
}

.welcome-prose strong {
  color: var(--color-highlight);
  font-weight: 400;
}

.welcome-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.welcome-cta .btn-primary {
  min-height: 44px;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
}

.welcome-signin {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.welcome-features {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem auto 1.5rem;
  max-width: 38rem;
  text-align: left;
}

.welcome-features li {
  padding: 1.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: background var(--transition);
}

.welcome-feature-glyph {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.75;
  margin-bottom: 0.85rem;
  user-select: none;
}

.welcome-features li:hover {
  background: var(--color-surface-hover);
}

.welcome-features h3 {
  font-size: 1rem;
  color: var(--color-highlight);
  margin-bottom: 0.35rem;
}

.welcome-features p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .welcome-features--three {
    grid-template-columns: repeat(3, 1fr);
  }
  .welcome-features--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.welcome-fine-print {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 32rem;
  margin: 1.5rem auto 0;
}

.welcome-price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-highlight);
  margin: 2rem 0 0.5rem;
  letter-spacing: 0.02em;
}

.welcome-anti-list,
.welcome-roadmap-list {
  list-style: none;
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.welcome-anti-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1rem;
}

.welcome-anti-list li:last-child {
  border-bottom: none;
}

.welcome-roadmap-list li {
  padding: 1rem 0;
  color: var(--color-text);
}

.welcome-roadmap-list strong {
  display: block;
  color: var(--color-accent);
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.welcome-transparency {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 32rem;
  margin: 2rem auto 0;
  line-height: 1.5;
}

.welcome-pullquote {
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  max-width: 32rem;
}

.welcome-pullquote--example {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .welcome-pullquote {
    font-size: 1.5rem;
  }

  .welcome-pullquote--example {
    font-size: 1.1rem;
  }
}

.welcome-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.welcome-footer p {
  margin: 0.35rem 0;
}

.welcome-footer-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.welcome-footer-link:hover,
.welcome-footer-link:focus {
  color: var(--color-highlight);
  text-decoration-color: var(--color-highlight);
}

/* ASCII animation slot system */
.asc-slot {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  opacity: 0.6;
  margin: 0 auto 1.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  user-select: none;
}

.asc-slot--pulsar { font-size: 1.75rem; }

@media (prefers-reduced-motion: no-preference) {
  .asc-pulsar       { display: inline-block; animation: asciiPulse 4s ease-in-out infinite; }
  .asc-orrery       { display: inline-block; animation: ascOrbit 18s ease-in-out infinite; }
  .asc-constellation { display: inline-block; animation: ascConstellation 15s ease-in-out infinite; }
  .asc-shimmer      { display: inline-block; animation: asciiTwinkle 6s ease-in-out infinite; }
  .asc-phase        { display: inline-block; animation: ascPhase 12s steps(1, end) infinite; }
}

@keyframes ascOrbit {
  0%, 100% { letter-spacing: 0.05em; opacity: 0.6; }
  50%      { letter-spacing: 0.5em;  opacity: 1; }
}

@keyframes ascConstellation {
  0%, 100% { transform: translate(0, 0);       opacity: 0.55; }
  25%      { transform: translate(-1px, 1px);  opacity: 0.8;  }
  50%      { transform: translate(1px, -1px);  opacity: 1;    }
  75%      { transform: translate(-1px, -1px); opacity: 0.7;  }
}

@keyframes ascComet {
  0%       { transform: translateX(-1.5rem); opacity: 0;   }
  10%      { opacity: 0.85; }
  85%      { opacity: 0.85; }
  100%     { transform: translateX(1.5rem);  opacity: 0;   }
}

@keyframes ascPhase {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* ===== Site footer ===== */
.site-footer {
  max-width: 48rem;
  margin: 3rem auto 1.5rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.site-footer .footer-link {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
  color: var(--color-accent);
}

.site-footer .footer-sep {
  margin: 0 0.5rem;
  color: var(--color-border);
}