/* ===== 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: 0.75rem 1rem;
}

.nav-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
}

.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::marker { content: ""; }

.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-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-muted);
  transition: color 0.3s ease-in-out;
}

.nav-summary:hover .nav-toggle,
.nav-summary:focus-visible .nav-toggle {
  color: var(--color-text);
}

.nav-toggle-close { display: none; }
.nav-inner[open] .nav-toggle-open { display: none; }
.nav-inner[open] .nav-toggle-close { display: inline-flex; }

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0 0.25rem;
}

.nav-inner[open] > .nav-links {
  animation: fadeIn 0.3s ease-in-out;
}

.nav-link {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease-in-out;
}

.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);
}

@media (min-width: 640px) {
  .main-nav { padding: 1rem; }

  .nav-inner,
  .nav-inner[open] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  /* Modern browsers hide details content via content-visibility on ::details-content;
     unhide it so links show regardless of [open] state. */
  .nav-inner::details-content {
    content-visibility: visible;
    display: contents;
  }

  .nav-summary {
    flex: 0 0 auto;
    gap: 0;
    cursor: default;
  }

  .nav-toggle { display: none; }

  .nav-inner > .nav-links {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    padding: 0;
    animation: none;
  }

  .nav-link {
    justify-content: center;
    font-size: 0.9rem;
  }
}

/* ===== 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::placeholder,
.field textarea::placeholder {
  color: #42425a;
}

.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-wordmark {
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--color-accent);
  letter-spacing: 0.01em;
  text-align: center;
  margin-bottom: 1.25rem;
}

.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: 1rem 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-birth-summary {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

.profile-birth-edit {
  margin-left: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.profile-birth-edit:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

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

/* ===== 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 .natal-reading-divider {
  margin: 2rem auto;
  width: 4rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  opacity: 0.7;
}

.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-wordmark {
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--color-accent);
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}

.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);
}

.welcome-back {
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: 0.9rem;
}

.welcome-back-link {
  color: var(--color-text-muted);
  text-decoration: none;
}

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

.learn-cards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2.5rem auto 1.5rem;
  max-width: 42rem;
  padding: 0;
}

.learn-card {
  display: block;
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  transition: background var(--transition);
}

.learn-card:hover,
.learn-card:focus-visible {
  background: var(--color-surface-hover);
  outline: none;
}

.learn-card__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.learn-card__desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 1.1rem;
}

.learn-card__cta {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-highlight);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition);
}

.learn-card__cta::after {
  content: " →";
  display: inline-block;
  transition: transform var(--transition);
}

.learn-card:hover .learn-card__cta,
.learn-card:focus-visible .learn-card__cta {
  text-decoration-color: var(--color-highlight);
}

.learn-card:hover .learn-card__cta::after,
.learn-card:focus-visible .learn-card__cta::after {
  transform: translateX(3px);
}

/* ===== ASCII animation vocabulary =====
   Catalog + usage guide: docs/ascii-animations.md
   Delivery: drop <span class="asc-*">…</span> into ERB. No helpers.
   Pacing: slow, ease-in-out, meditative. Motion is honored only when
   the user hasn't requested reduced motion.                           */

.asc-slot {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-text-muted);
  opacity: 0.6;
  margin: 0 auto 1.5rem;
  min-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) {

  /* 1. Pulsar — softly breathing star. Idle "alive" indicator. */
  .asc-pulsar {
    display: inline-block;
    font-family: var(--font-mono);
    animation: asc-pulse 2.4s ease-in-out infinite;
  }
  @keyframes asc-pulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%      { opacity: 0.06; transform: scale(0.68); }
  }

  /* 2. Orbit — lunar orbit around a central body. Generation in progress. */
  .asc-orbit {
    position: relative;
    display: inline-block;
    width: 2.8em; height: 2.8em;
    font-family: var(--font-mono);
    vertical-align: middle;
  }
  .asc-orbit__c {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
  }
  .asc-orbit__m {
    position: absolute; top: 50%; left: 50%;
    margin: -0.35em 0 0 -0.25em;
    line-height: 1;
    animation: asc-orbit 3s linear infinite;
  }
  @keyframes asc-orbit {
    from { transform: rotate(0deg)   translateX(14px) rotate(0deg);    }
    to   { transform: rotate(360deg) translateX(14px) rotate(-360deg); }
  }

  /* 3. Comet — streaking tail. Arrival / fresh delivery. */
  .asc-comet {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    display: inline-flex;
  }
  .asc-comet span {
    display: inline-block;
    opacity: 0;
    animation: asc-comet 2.8s ease-in-out infinite;
  }
  @keyframes asc-comet {
    0%   { opacity: 0; transform: translateX(-5px); }
    25%  { opacity: 1; transform: translateX(0);    }
    75%  { opacity: 1; transform: translateX(0);    }
    100% { opacity: 0; transform: translateX(3px);  }
  }

  /* 4. Phase — moon phase cycle. Cyclical time passage. */
  .asc-phase {
    position: relative;
    display: inline-block;
    width: 1.3em; height: 1.4em;
    font-family: var(--font-mono);
  }
  .asc-phase span {
    position: absolute; top: 0; left: 0;
    opacity: 0; line-height: 1.1;
    animation: asc-phase 3.2s linear infinite;
  }
  @keyframes asc-phase {
    0%, 24.9%  { opacity: 1; }
    25%, 100%  { opacity: 0; }
  }

  /* 5. Shimmer — twinkling starfield. Ambient backdrop. */
  .asc-shimmer {
    font-family: var(--font-mono);
    letter-spacing: 0.22em;
    display: inline-flex;
  }
  .asc-shimmer span {
    display: inline-block;
    animation: asc-twinkle 2s ease-in-out infinite;
  }
  @keyframes asc-twinkle {
    0%, 100% { opacity: 0.05; transform: scale(0.8);  }
    50%      { opacity: 1;    transform: scale(1.12); }
  }

  /* 6. Drift — ascending star. Aspiration / upward movement. */
  .asc-drift {
    display: inline-block;
    font-family: var(--font-mono);
    animation: asc-drift 3.4s ease-in-out infinite;
  }
  @keyframes asc-drift {
    0%, 100% { transform: translateY(0);     opacity: 0.85; }
    50%      { transform: translateY(-11px); opacity: 0.08; }
  }

  /* 7. Nova — expanding ring pulse. Attention / emphasis. */
  .asc-nova {
    position: relative;
    display: inline-block;
    width: 2em; height: 2em;
    font-family: var(--font-mono);
  }
  .asc-nova span {
    position: absolute; top: 50%; left: 50%;
    line-height: 1; opacity: 0;
    animation: asc-nova 2.4s ease-out infinite;
    animation-fill-mode: backwards;
  }
  .asc-nova span:nth-child(2) { animation-delay: 1.2s; }
  @keyframes asc-nova {
    0%   { opacity: 0;   transform: translate(-50%,-50%) scale(0.35); }
    7%   { opacity: 0.8;                                              }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.7);  }
  }

  /* 8. Orrery — mini solar system. "The product" mark. */
  .asc-orrery {
    position: relative;
    display: inline-block;
    width: 3.6em; height: 3.6em;
    font-family: var(--font-mono);
    vertical-align: middle;
  }
  .asc-orrery__sun {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); line-height: 1;
  }
  .asc-orrery__p1, .asc-orrery__p2 {
    position: absolute; top: 50%; left: 50%;
    line-height: 1;
  }
  .asc-orrery__p1 {
    margin: -0.35em 0 0 -0.25em;
    animation: asc-oi 2.2s linear infinite;
  }
  .asc-orrery__p2 {
    margin: -0.3em 0 0 -0.2em;
    animation: asc-oo 5s linear infinite;
  }
  @keyframes asc-oi {
    from { transform: rotate(0deg)   translateX(11px) rotate(0deg);    }
    to   { transform: rotate(360deg) translateX(11px) rotate(-360deg); }
  }
  @keyframes asc-oo {
    from { transform: rotate(120deg) translateX(22px) rotate(-120deg); }
    to   { transform: rotate(480deg) translateX(22px) rotate(-480deg); }
  }

  /* 9. Zodiac — sign cycle through all 12. Vedic-forward accent. */
  .asc-zodiac {
    position: relative;
    display: inline-block;
    width: 1.4em; height: 1.5em;
    font-family: var(--font-mono);
  }
  .asc-zodiac span {
    position: absolute; top: 0; left: 0;
    opacity: 0; line-height: 1.1;
    animation: asc-zodiac 7.2s linear infinite;
  }
  @keyframes asc-zodiac {
    0%, 8.25%   { opacity: 1; }
    8.5%, 100%  { opacity: 0; }
  }

  /* 10. Binary — two bodies in mutual orbit. Comparison / duality. */
  .asc-binary {
    position: relative;
    display: inline-block;
    width: 2.8em; height: 2.8em;
    font-family: var(--font-mono);
    vertical-align: middle;
  }
  .asc-binary span {
    position: absolute; top: 50%; left: 50%;
    margin: -0.35em 0 0 -0.25em;
    line-height: 1;
  }
  .asc-binary span:nth-child(1) { animation: asc-bi1 3s linear infinite; }
  .asc-binary span:nth-child(2) { animation: asc-bi2 3s linear infinite; }
  @keyframes asc-bi1 {
    from { transform: rotate(0deg)   translateX(12px) rotate(0deg);    }
    to   { transform: rotate(360deg) translateX(12px) rotate(-360deg); }
  }
  @keyframes asc-bi2 {
    from { transform: rotate(180deg) translateX(12px) rotate(-180deg); }
    to   { transform: rotate(540deg) translateX(12px) rotate(-540deg); }
  }

  /* 11. Saturn — planet with dimming rings. Planetary accent. */
  .asc-saturn {
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 0.03em;
  }
  .asc-saturn__ring-l { animation: asc-ring 4s ease-in-out infinite; }
  .asc-saturn__ring-r { animation: asc-ring 4s ease-in-out infinite; animation-delay: 2s; }
  @keyframes asc-ring {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.1; }
  }

  /* 12. Warp — hyperspace lines. Loading / transitioning. */
  .asc-warp {
    font-family: var(--font-mono);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .asc-warp span {
    display: block; opacity: 0;
    animation: asc-warp 2.4s ease-in-out infinite;
  }
  .asc-warp span:nth-child(2) { animation-delay: 0.1s; }
  .asc-warp span:nth-child(3) { animation-delay: 0.2s; }
  .asc-warp span:nth-child(4) { animation-delay: 0.3s; }
  .asc-warp span:nth-child(5) { animation-delay: 0.4s; }
  @keyframes asc-warp {
    0%, 100% { opacity: 0; transform: translateX(-6px); }
    35%, 65% { opacity: 1; transform: translateX(0);    }
  }

  /* 13. Signal — beacon pulse. Three-dot typing / processing indicator. */
  .asc-signal {
    font-family: var(--font-mono);
    display: inline-flex;
    gap: 0.18em;
  }
  .asc-signal span {
    display: inline-block;
    animation: asc-signal 2.4s ease-in-out infinite;
  }
  .asc-signal span:nth-child(2) { animation-delay: 0.2s; }
  .asc-signal span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes asc-signal {
    0%, 12%   { opacity: 1;    }
    13%, 100% { opacity: 0.05; }
  }

  /* 14. Veil — nebula density wave. Atmospheric / mystical. */
  .asc-veil {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    display: inline-flex;
  }
  .asc-veil span {
    display: inline-block;
    animation: asc-veil 3s ease-in-out infinite;
  }
  .asc-veil span:nth-child(2) { animation-delay: 0.3s; }
  .asc-veil span:nth-child(3) { animation-delay: 0.6s; }
  .asc-veil span:nth-child(4) { animation-delay: 0.9s; }
  .asc-veil span:nth-child(5) { animation-delay: 1.2s; }
  @keyframes asc-veil {
    0%, 100% { opacity: 0.1; }
    50%      { opacity: 1;   }
  }

  /* 15. Crescent — swaying moon. Calm / gentle. */
  .asc-crescent {
    display: inline-block;
    font-family: var(--font-mono);
    animation: asc-crescent 4s ease-in-out infinite;
  }
  @keyframes asc-crescent {
    0%, 100% { transform: rotate(-12deg); opacity: 0.45; }
    50%      { transform: rotate(12deg);  opacity: 1;    }
  }

  /* 16. Constellation — stars forming in sequence. Connections. */
  .asc-constellation {
    position: relative;
    display: inline-block;
    width: 3em; height: 2.6em;
    font-family: var(--font-mono);
  }
  .asc-constellation__a {
    position: absolute; top: 0; left: 50%;
    margin-left: -0.4em; line-height: 1; opacity: 0;
    animation: asc-constellation 3.6s ease-in-out infinite;
  }
  .asc-constellation__b {
    position: absolute; bottom: 0; left: 0;
    line-height: 1; opacity: 0;
    animation: asc-constellation 3.6s ease-in-out infinite;
    animation-delay: 0.6s;
  }
  .asc-constellation__c {
    position: absolute; bottom: 0; right: 0;
    line-height: 1; opacity: 0;
    animation: asc-constellation 3.6s ease-in-out infinite;
    animation-delay: 1.2s;
  }
  @keyframes asc-constellation {
    0%, 15%   { opacity: 0; }
    30%, 80%  { opacity: 1; }
    90%, 100% { opacity: 0; }
  }

  /* 17. Radial — starburst dots from center. Discovery burst. */
  .asc-radial {
    position: relative;
    display: inline-block;
    width: 3em; height: 3em;
    font-family: var(--font-mono);
    vertical-align: middle;
  }
  .asc-radial__c {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); line-height: 1;
  }
  .asc-radial span:not(.asc-radial__c) {
    position: absolute; top: 50%; left: 50%;
    margin: -0.3em 0 0 -0.2em; line-height: 1; opacity: 0;
    animation: asc-radial 2.4s ease-out infinite;
  }
  /* --rx, --ry set per-span via inline style */
  @keyframes asc-radial {
    0%        { opacity: 1; transform: translate(0, 0); }
    65%, 100% { opacity: 0; transform: translate(var(--rx, 14px), var(--ry, 0px)); }
  }

  /* 18. Quasar — rapid strobe. High-energy alert — use sparingly. */
  .asc-quasar {
    display: inline-block;
    font-family: var(--font-mono);
    animation: asc-quasar 1.5s linear infinite;
  }
  @keyframes asc-quasar {
    0%, 100% { opacity: 0.05; transform: scale(1);    }
    4%,  8%  { opacity: 1;    transform: scale(1.12); }
    11%      { opacity: 0.05; transform: scale(1);    }
    16%, 18% { opacity: 0.85; transform: scale(1.06); }
    20%      { opacity: 0.05; transform: scale(1);    }
  }

  /* 19. Tide — wave undulation. Rhythm / flow. */
  .asc-tide {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
  }
  .asc-tide span {
    display: inline-block;
    animation: asc-tide 2s ease-in-out infinite;
  }
  .asc-tide span:nth-child(2) { animation-delay: 0.2s; }
  .asc-tide span:nth-child(3) { animation-delay: 0.4s; }
  .asc-tide span:nth-child(4) { animation-delay: 0.6s; }
  .asc-tide span:nth-child(5) { animation-delay: 0.8s; }
  @keyframes asc-tide {
    0%, 100% { transform: translateY(0);    opacity: 0.22; }
    50%      { transform: translateY(-7px); opacity: 1;    }
  }

  /* 20. Eclipse — moon transits sun. Literal transit metaphor. */
  .asc-eclipse {
    position: relative;
    display: inline-block;
    width: 1.3em; height: 1.4em;
    font-family: var(--font-mono);
  }
  .asc-eclipse__sun {
    position: absolute; top: 0; left: 0; line-height: 1.1;
  }
  .asc-eclipse__moon {
    position: absolute; top: 0; left: 0;
    line-height: 1.1; opacity: 0;
    animation: asc-eclipse 5s ease-in-out infinite;
  }
  @keyframes asc-eclipse {
    0%, 15%   { transform: translateX(-120%); opacity: 0; }
    30%, 70%  { transform: translateX(0);     opacity: 1; }
    85%, 100% { transform: translateX(120%);  opacity: 0; }
  }

}
/* ===== end ASCII animation vocabulary ===== */

/* ===== 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);
}

/* ===== OAuth consent screen (Doorkeeper authorizations/new + error) ===== */
.doorkeeper-shell {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  margin: 0;
}

.oauth-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.oauth-consent-card {
  max-width: 32rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2rem;
}

.oauth-consent-card h1 {
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
}

.oauth-consent-subtitle {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

.oauth-consent-scopes {
  list-style: none;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  background: rgba(167, 139, 250, 0.06);
  border-left: 2px solid var(--color-accent-dim);
  border-radius: 0.25rem;
}

.oauth-consent-scopes li {
  padding: 0.25rem 0;
}

.oauth-consent-fineprint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 1.5rem 0;
}

.oauth-consent-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

.oauth-consent-form {
  flex: 1;
}

.oauth-consent-form button {
  width: 100%;
}

.oauth-consent-error {
  background: rgba(255, 100, 100, 0.08);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.85rem;
}

/* ===== Settings > Connected apps ===== */
.settings-connected-apps {
  margin-top: 2rem;
}

.connected-apps-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.connected-apps-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
}

.connected-apps-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.connected-apps-since {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.mcp-steps {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  color: var(--color-text);
}

.mcp-steps li {
  padding: 0.3rem 0;
  line-height: 1.5;
}

.mcp-connections-heading {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}