/* ============================================================================
   LunaVero — design system (tokens + contract components)
   Source values translated from "LunaVero Daily.dc.html" (screens: Web Today,
   Web Patterns, Return, Today, Tarot, Journal, Patterns, Focus, Today RTL,
   Ahead, Practice). Inline design styles were mapped onto the shared classes;
   no design inline styles belong in JS.
   Fonts expected via the shell's <link> (Google Fonts, CSP-allowed):
   Spectral 300/400/500/600 + italics, IBM Plex Sans 300–600, Vazirmatn 300–600.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* palette (contract — exact) */
  --lv-bg: #0d1117;
  --lv-canvas: #08090d;
  --lv-card: #141922;
  --lv-deep: #0f1420;
  --lv-tile: #111623;
  --lv-copper: #c98a6b;
  --lv-lav: #b6b3e0;
  --lv-ink: #e8e6ef;
  --lv-body: #c9cbd8;
  --lv-muted: #8b93a7;
  --lv-faint: #5f6779;
  --lv-faintest: #4a5163;
  --lv-moon: #dcd8ea;
  --lv-tarot-ink: #f3e2cd;

  /* lines & fills */
  --lv-line: rgba(182, 179, 224, 0.14);        /* standard border */
  --lv-line-soft: rgba(182, 179, 224, 0.1);    /* rail/hairline/timeline */
  --lv-line-strong: rgba(182, 179, 224, 0.28); /* eclipse banner */
  --lv-line-copper: rgba(201, 138, 107, 0.32); /* copper border */
  --lv-copper-hover: #e0a888;

  /* hero gradient (contract — exact) */
  --lv-hero-grad: linear-gradient(180deg, rgba(201, 138, 107, 0.09), rgba(201, 138, 107, 0.02));

  /* radii: 2 / 3 (chips) / 4 (buttons) / 6 (cards) / 7 (hero, tarot) */
  --lv-r-2: 2px;
  --lv-r-chip: 3px;
  --lv-r-btn: 4px;
  --lv-r-card: 6px;
  --lv-r-hero: 7px;

  /* type stacks */
  --lv-font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --lv-font-display: Spectral, Georgia, serif;
  --lv-font-glyph: Spectral, 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
  --lv-font-fa: Vazirmatn, 'IBM Plex Sans', sans-serif;

  /* geometry */
  --lv-rail-w: 232px;
  --lv-rrail-w: 372px;
  --lv-mobile-bar-h: 56px;
}

/* ---------- 2. Base ---------- */

/* The hidden attribute must always win over component display rules below
   (.lv-app, #lv-return, #lv-loading set display unconditionally). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--lv-canvas);
}

.lv-app,
.lv-app *,
#lv-return,
#lv-return * {
  box-sizing: border-box;
}

.lv-app,
#lv-return {
  background: var(--lv-bg);
  color: var(--lv-body);
  font-family: var(--lv-font-ui);
  font-size: 14.5px;
  line-height: 1.5;
}

.lv-app p, .lv-app h1, .lv-app h2, .lv-app h3,
#lv-return p, #lv-return h1, #lv-return h2 {
  margin: 0;
}

.lv-app :focus-visible,
#lv-return :focus-visible {
  outline: 1px solid var(--lv-lav);
  outline-offset: 2px;
}

/* ---------- 3. Layout: app grid, rails, views ---------- */
.lv-app {
  display: grid;
  grid-template-columns: var(--lv-rail-w) minmax(0, 1fr) var(--lv-rrail-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.lv-rail {
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  border-right: 1px solid var(--lv-line-soft);
  overflow-y: auto;
  min-height: 0;
}

.lv-rail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 38px;
  padding-left: 10px;
  color: var(--lv-copper);
}

.lv-rail-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* nav.lv-rail > button.lv-rail-item — button reset included */
.lv-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--lv-r-btn);
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--lv-muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lv-rail-item:hover {
  background: rgba(182, 179, 224, 0.05);
}

.lv-rail-item.is-active,
.lv-rail-item.is-active:hover {
  background: rgba(201, 138, 107, 0.11);
  border-left-color: var(--lv-copper);
  color: var(--lv-ink);
}

.lv-rail-glyph {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  font-variant-emoji: text;
}

.lv-rail-item.is-active .lv-rail-glyph {
  color: var(--lv-copper);
}

.lv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 9px;
  background: rgba(201, 138, 107, 0.2);
  font-size: 10.5px;
  line-height: 1;
  color: var(--lv-copper);
}

.lv-rail-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 2px;
  margin-top: 18px;
  min-width: 0;
}

.lv-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 34px;
}

.lv-view {
  display: none;
}

.lv-view.is-active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lv-right-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 28px;
  border-left: 1px solid var(--lv-line-soft);
  overflow-y: auto;
  min-height: 0;
}

.lv-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--lv-line-soft);
  text-align: center;
}

.lv-user-count {
  font-size: 12px;
  color: var(--lv-faint);
  letter-spacing: 0.4px;
}

/* rail "Focus" card (Web Today left rail) */
.lv-focus-card {
  padding: 15px 14px;
  border: 1px solid var(--lv-line);
  border-radius: 5px;
  background: var(--lv-card);
}

/* ---------- 4. Common components ---------- */
.lv-card {
  padding: 18px 20px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-card);
  background: var(--lv-card);
}

.lv-card-title {
  font-family: var(--lv-font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: var(--lv-ink);
}

/* micro-label: 9.5–11.5px uppercase, tracked out */
.lv-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv-faint);
}

.lv-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(182, 179, 224, 0.15);
  border-radius: var(--lv-r-chip);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--lv-muted);
  white-space: nowrap;
  cursor: pointer;
}

.lv-chip:hover {
  border-color: rgba(182, 179, 224, 0.3);
}

.lv-chip.is-active,
.lv-chip.is-active:hover {
  border-color: rgba(201, 138, 107, 0.45);
  color: var(--lv-copper);
}

/* sticky sub-nav: grouped destinations (Sky, and later Journal, Practice).
   Sections stay in the DOM; the bar pins to the top of .lv-main while
   scrolling. */
.lv-subnav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 6px;
  background: var(--lv-bg);
  border-bottom: 1px solid var(--lv-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.lv-subnav::-webkit-scrollbar {
  display: none;
}

.lv-subnav-item {
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  /* overlap the bar's bottom rule so the active border replaces it */
  margin-bottom: -1px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lv-muted);
  white-space: nowrap;
  cursor: pointer;
}

.lv-subnav-item:hover {
  color: var(--lv-ink);
}

.lv-subnav-item.is-active,
.lv-subnav-item.is-active:hover {
  border-bottom-color: var(--lv-copper);
  color: var(--lv-ink);
}

.lv-sky-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* full-width copper bar button (Return "Open today", Journal "Save") */
.lv-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--lv-r-btn);
  background: var(--lv-copper);
  color: var(--lv-bg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lv-btn-primary:hover {
  background: var(--lv-copper-hover);
}

.lv-hairline {
  height: 1px;
  border: 0;
  background: rgba(182, 179, 224, 0.12);
}

/* quiet left-ruled note (Patterns/Practice disclaimers) */
.lv-note {
  padding: 16px 18px;
  border-left: 1px solid rgba(182, 179, 224, 0.25);
  background: rgba(182, 179, 224, 0.03);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--lv-muted);
}

/* plain-language gloss under a traditional term */
.lv-gloss {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lv-muted);
}

.lv-dim {
  color: var(--lv-faint);
}

.lv-link {
  color: var(--lv-copper);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}

.lv-link:hover {
  color: var(--lv-copper-hover);
}

/* Spectral page title (27–34px, w300) */
.lv-display {
  margin: 0;
  font-family: var(--lv-font-display);
  font-weight: 300;
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.15;
  color: var(--lv-ink);
}

.lv-wordmark {
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lv-muted);
}

/* Return-form underline field + its label */
.lv-field-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lv-faint);
}

.lv-field {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(182, 179, 224, 0.16);
  font-size: 16px;
  color: var(--lv-ink);
}

.lv-field:focus-within {
  border-bottom-color: rgba(182, 179, 224, 0.4);
}

.lv-field-error {
  border-bottom-color: rgba(201, 138, 107, 0.7);
}

.lv-field-error input {
  color: var(--lv-copper);
}

.lv-field-error-note {
  color: var(--lv-copper);
  border-left: 2px solid var(--lv-copper);
  padding-left: 12px;
  margin: 12px 0;
}

.lv-field input,
.lv-field textarea {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--lv-ink);
}

.lv-field input:focus,
.lv-field textarea:focus {
  outline: none;
}

/* bare <input class="lv-field"> variant carries the underline itself */
input.lv-field,
textarea.lv-field {
  width: 100%;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid rgba(182, 179, 224, 0.16);
  background: transparent;
  font-size: 16px;
  color: var(--lv-ink);
}

input.lv-field:focus,
textarea.lv-field:focus {
  outline: none;
  border-bottom-color: rgba(182, 179, 224, 0.4);
}

.lv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv-faint);
}

/* ---------- 5. Return (identity) screen shell ---------- */
#lv-return {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(56px, 11vh, 96px) 30px 44px;
}

/* Loading overlay: shown while /api/astro runs (LLM latency up to ~60s) */
.lv-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(8, 9, 13, 0.86);
}

.lv-loading img {
  width: 72px;
  height: 72px;
}

/* Returning-user choice block under the return form */
#lv-session-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(182, 179, 224, 0.14);
  border-radius: 6px;
  background: var(--lv-card);
}

#lv-session-choice .lv-link {
  align-self: center;
}

/* ---------- 6. Today ---------- */
.lv-hero {
  padding: 26px 28px;
  border: 1px solid var(--lv-line-copper);
  border-radius: var(--lv-r-hero);
  background: var(--lv-hero-grad);
}

.lv-hero-glyphs {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--lv-font-glyph);
  font-variant-emoji: text;
  font-size: 23px;
  line-height: 1;
  color: var(--lv-copper);
}

.lv-hero-title {
  font-family: var(--lv-font-display);
  font-weight: 300;
  font-size: clamp(25px, 2.6vw, 38px);
  line-height: 1.15;
  color: var(--lv-ink);
}

/* "Applying" chip */
.lv-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(201, 138, 107, 0.4);
  border-radius: var(--lv-r-chip);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--lv-copper);
  white-space: nowrap;
}

.lv-orb-bar {
  flex: 1;
  min-width: 0;
  height: 3px;
  border-radius: var(--lv-r-2);
  background: rgba(182, 179, 224, 0.14);
  overflow: hidden;
}

.lv-orb-fill {
  height: 100%;
  background: var(--lv-copper);
  /* width set inline by the view */
}

/* "Also in play" list rows (mobile Today) */
.lv-aspect-row {
  padding: 15px 0;
  border-top: 1px solid var(--lv-line-soft);
}

.lv-aspect-row:last-child {
  border-bottom: 1px solid var(--lv-line-soft);
}

/* affirmation — Spectral italic display text */
.lv-affirm {
  font-family: var(--lv-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.38;
  color: var(--lv-ink);
}

/* pure-CSS moon phase: bright disc + offset bg-colored disc carving shadow.
   core.js shifts .lv-moon-inner with an inline transform: translateX(). */
.lv-moon {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--lv-moon);
  overflow: hidden;
  flex-shrink: 0;
}

.lv-moon-inner {
  position: absolute;
  top: -7%;
  left: -21%;
  width: 100%;
  height: 114%;
  border-radius: 50%;
  background: var(--lv-bg);
}

/* Journal check-in rows */
.lv-mood-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(182, 179, 224, 0.16);
  border-radius: 5px;
  background: var(--lv-card);
  font-size: 16px;
  color: var(--lv-ink);
  cursor: pointer;
}

.lv-mood-row:hover {
  border-color: rgba(201, 138, 107, 0.5);
}

.lv-mood-row.is-selected,
.lv-mood-row.is-selected:hover {
  border-color: var(--lv-copper);
  background: rgba(201, 138, 107, 0.08);
}

/* Today / right-rail mood circles */
.lv-mood-circle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(182, 179, 224, 0.18);
  border-radius: 50%;
  background: var(--lv-deep);
  font-size: 17px;
  line-height: 1;
  color: var(--lv-lav);
  cursor: pointer;
}

/* inside journal's full-width mood rows the circle is a small marker */
.lv-mood-row .lv-mood-circle {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.lv-mood-circle:hover {
  border-color: rgba(201, 138, 107, 0.6);
}

.lv-mood-circle.is-selected {
  outline: 1px solid var(--lv-copper);
  outline-offset: 4px;
}

/* ---------- 7. Ahead (timeline) ---------- */
.lv-tl-row {
  display: flex;
  gap: 12px;
}

.lv-tl-row.is-past {
  opacity: 0.72;
}

/* Major transits (weight 3+, eclipses): impossible to skim past. */
.lv-tl-row.is-major {
  border-left: 2px solid rgba(201, 138, 107, 0.65);
  padding: 6px 10px 6px 12px;
  margin-left: -12px;
  background: rgba(201, 138, 107, 0.05);
  border-radius: 8px;
}

.lv-tl-row.is-major .lv-ahead-title {
  color: var(--lv-ink);
  font-weight: 600;
}

.lv-ahead-impact {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lv-body);
  margin: 3px 0 2px;
}

.lv-tl-date {
  width: 42px;
  flex-shrink: 0;
  padding-top: 1px;
  text-align: right;
}

/* vertical spine; the dot sits on it */
.lv-tl-spine {
  position: relative;
  width: 13px;
  flex-shrink: 0;
}

.lv-tl-spine::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lv-line);
}

.lv-tl-dot {
  position: absolute;
  left: 2.5px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lv-bg);
  border: 1px solid var(--lv-muted);
}

.lv-tl-dot.lv-dot-moon {
  background: var(--lv-lav);
  border-color: transparent;
}

.lv-tl-dot.lv-dot-aspect {
  background: var(--lv-copper);
  border-color: transparent;
}

.lv-tl-dot.lv-dot-eclipse {
  left: 1px;
  top: 3.5px;
  width: 12px;
  height: 12px;
  background: var(--lv-copper);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(201, 138, 107, 0.18);
}

/* duration bar: base = long-transit gradient; -retro = dashed window */
.lv-tl-bar {
  flex: 1;
  min-width: 0;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(182, 179, 224, 0.2), rgba(182, 179, 224, 0.55), rgba(182, 179, 224, 0.2));
}

.lv-tl-bar-retro {
  background: repeating-linear-gradient(90deg, rgba(182, 179, 224, 0.5) 0 4px, transparent 4px 8px);
}

/* ---------- 8. Draw (tarot) ---------- */
.lv-tarot {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 100;
  border: 1px solid rgba(201, 138, 107, 0.45);
  border-radius: var(--lv-r-hero);
  overflow: hidden;
  background: var(--lv-deep);
}

.lv-tarot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-tarot-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 23%;
  background: linear-gradient(180deg, rgba(6, 8, 13, 0.78), rgba(6, 8, 13, 0));
  pointer-events: none;
}

.lv-tarot-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 17% 15px 14px;
  background: linear-gradient(180deg, rgba(6, 8, 13, 0) 0%, rgba(6, 8, 13, 0.8) 45%, rgba(6, 8, 13, 0.95) 100%);
  text-align: center;
  pointer-events: none;
}

.lv-tarot-numeral {
  font-family: var(--lv-font-display);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--lv-tarot-ink);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.lv-tarot-suit {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6d3bd;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.lv-tarot-name {
  font-family: var(--lv-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #f4efe8;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

/* keyword chips row under the card */
.lv-kw-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* "last seven days" mini tile */
.lv-mini-tile {
  flex: 1;
  min-width: 0;
  aspect-ratio: 63 / 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(182, 179, 224, 0.16);
  border-radius: var(--lv-r-chip);
  background: var(--lv-tile);
}

/* ---------- 9. Patterns ---------- */
.lv-chart {
  display: block;
  width: 100%;
}

.lv-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.lv-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.lv-bar {
  flex: 1;
  min-width: 0;
  height: 86px;
  display: flex;
  align-items: flex-end;
  background: rgba(182, 179, 224, 0.05);
  border-radius: var(--lv-r-2);
  overflow: hidden;
}

.lv-bar-fill {
  width: 100%;
  background: rgba(182, 179, 224, 0.55);
  border-radius: var(--lv-r-2) var(--lv-r-2) 0 0;
  /* height set inline by the view */
}

.lv-bar-fill.is-outlier {
  background: var(--lv-copper);
}

/* correlation cards */
.lv-corr-card {
  padding: 20px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-card);
  background: var(--lv-card);
}

.lv-corr-card.lv-strong {
  border-color: rgba(201, 138, 107, 0.3);
  background: rgba(201, 138, 107, 0.045);
}

.lv-corr-card.lv-emerging {
  border-color: rgba(182, 179, 224, 0.15);
  background: rgba(182, 179, 224, 0.03);
}

.lv-corr-card.lv-thin {
  border-color: rgba(182, 179, 224, 0.12);
  background: rgba(182, 179, 224, 0.02);
}

/* ---------- 10. Chat (derived from the design palette — no chat screen
     exists in the design file; tokens/values reuse the card + hero rules) -- */
.lv-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 18px;
}

.lv-msg {
  max-width: 78%;
  padding: 13px 16px;
  border-radius: var(--lv-r-card);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lv-body);
  overflow-wrap: break-word;
}

.lv-msg-user {
  align-self: flex-end;
  background: rgba(201, 138, 107, 0.1);
  border: 1px solid var(--lv-line-copper);
  color: var(--lv-ink);
}

.lv-msg-assistant {
  align-self: flex-start;
  background: var(--lv-card);
  border: 1px solid var(--lv-line);
}

.lv-msg-time {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--lv-muted);
  opacity: 0.75;
}

.lv-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lv-line-soft);
}

.lv-composer-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(182, 179, 224, 0.16);
  border-radius: var(--lv-r-btn);
  background: var(--lv-deep);
  font: inherit;
  font-size: 14px;
  color: var(--lv-ink);
}

.lv-composer-input:focus {
  outline: none;
  border-color: rgba(182, 179, 224, 0.35);
}

.lv-send {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 20px;
  border: 0;
  border-radius: var(--lv-r-btn);
  background: var(--lv-copper);
  color: var(--lv-bg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.lv-send:hover {
  background: var(--lv-copper-hover);
}

.lv-send:disabled,
.lv-composer-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.lv-send:disabled:hover {
  background: var(--lv-copper);
}

/* directional chevron (›) — mirrored under RTL */
.lv-chevron {
  display: inline-block;
}

/* ---------- 11. Responsive ---------- */
/* 768–1100px: rail + main, no right rail */
@media (max-width: 1099px) {
  .lv-app {
    grid-template-columns: var(--lv-rail-w) minmax(0, 1fr);
  }

  .lv-right-rail {
    display: none;
  }
}

/* <768px: single column; rail becomes a fixed bottom glyph bar */
@media (max-width: 767px) {
  .lv-app {
    display: block;
    height: 100vh;
    height: 100dvh;
  }

  .lv-main {
    height: 100%;
    padding: 26px 20px calc(var(--lv-mobile-bar-h) + 26px + env(safe-area-inset-bottom, 0px));
  }

  .lv-right-rail {
    display: none;
  }

  .lv-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-top: 1px solid var(--lv-line-soft);
    background: var(--lv-bg);
    overflow: visible;
  }

  /* the item list wrapper flattens so items spread across the bar */
  .lv-rail-items {
    display: contents;
  }

  /* non-item rail chrome stays desktop-only */
  .lv-rail-head,
  .lv-rail-user,
  .lv-rail .lv-focus-card {
    display: none;
  }

  .lv-rail-item {
    flex: 1;
    justify-content: center;
    padding: 10px 6px;
    border-left: 0;
    border-top: 2px solid transparent;
    border-radius: var(--lv-r-btn);
  }

  .lv-rail-item.is-active,
  .lv-rail-item.is-active:hover {
    border-top-color: var(--lv-copper);
    background: rgba(201, 138, 107, 0.11);
  }

  /* glyphs only in the bottom bar (hides label text and badges) */
  .lv-rail-item > *:not(.lv-rail-glyph) {
    display: none;
  }

  .lv-rail-glyph {
    width: auto;
    font-size: 17px;
  }

  .lv-hero {
    padding: 22px 20px 20px;
    border-radius: var(--lv-r-card);
  }

  .lv-msg {
    max-width: 88%;
  }
}

/* ---------- 12. RTL ---------- */
[dir=rtl] .lv-rail {
  border-right: 0;
  border-left: 1px solid var(--lv-line-soft);
}

[dir=rtl] .lv-right-rail {
  border-left: 0;
  border-right: 1px solid var(--lv-line-soft);
}

[dir=rtl] .lv-rail-item {
  border-left: 0;
  border-right: 2px solid transparent;
  text-align: right;
}

[dir=rtl] .lv-rail-item.is-active,
[dir=rtl] .lv-rail-item.is-active:hover {
  border-right-color: var(--lv-copper);
}

[dir=rtl] .lv-badge {
  margin-left: 0;
  margin-right: auto;
}

/* progress fills run right-to-left */
[dir=rtl] .lv-orb-bar {
  display: flex;
  justify-content: flex-end;
}

/* left-ruled accents move to the right */
[dir=rtl] .lv-note {
  border-left: 0;
  border-right: 1px solid rgba(182, 179, 224, 0.25);
}

[dir=rtl] .lv-practice-affirm {
  border-left: 0;
  border-right: 2px solid rgba(201, 138, 107, 0.45);
}

/* timeline mirror */
[dir=rtl] .lv-tl-date {
  text-align: left;
}

[dir=rtl] .lv-tl-spine::before {
  left: auto;
  right: 6px;
}

[dir=rtl] .lv-tl-dot {
  left: auto;
  right: 2.5px;
}

[dir=rtl] .lv-tl-dot.lv-dot-eclipse {
  right: 1px;
}

[dir=rtl] .lv-chevron {
  transform: scaleX(-1);
}

[dir=rtl] .lv-rail-head {
  padding-left: 0;
  padding-right: 10px;
}

[dir=rtl] .lv-rail-user {
  padding-left: 0;
  padding-right: 2px;
}

@media (max-width: 767px) {
  [dir=rtl] .lv-rail {
    border-left: 0;
  }

  [dir=rtl] .lv-rail-item {
    border-right: 0;
  }
}

/* ---------- 13. Farsi ---------- */
[lang=fa] .lv-app,
[lang=fa] #lv-return {
  font-family: var(--lv-font-fa);
}

[lang=fa] .lv-display,
[lang=fa] .lv-hero-title,
[lang=fa] .lv-card-title,
[lang=fa] .lv-tarot-name,
[lang=fa] .lv-teaching-quote,
[lang=fa] .lv-library-title,
[lang=fa] .lv-quote-text,
[lang=fa] .lv-affirm {
  font-family: var(--lv-font-fa);
  font-style: normal;
  font-weight: 400;
}

/* tracked-out Latin micro-labels don't suit Arabic script */
[lang=fa] .lv-label,
[lang=fa] .lv-field-label,
[lang=fa] .lv-status-chip,
[lang=fa] .lv-wordmark {
  letter-spacing: 0.06em;
}

/* glyphs keep the symbol stack in every language */
[lang=fa] .lv-hero-glyphs,
[lang=fa] .lv-rail-glyph {
  font-family: var(--lv-font-glyph);
}

/* ---------- 14. Reduced motion (design has no animations; kill the few
     hover transitions we declare) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lv-app *,
  .lv-app *::before,
  .lv-app *::after,
  #lv-return *,
  #lv-return *::before,
  #lv-return *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 15. Feature view glue ----------
   Layout-only rules for the lv-* classes emitted by views/*.js that sit
   outside the shared contract above. Visual language (color, type, radii)
   stays with the tokens; these rules only establish flow, spacing, and the
   few state colors the views rely on. */
.lv-flex-spacer { flex: 1 1 auto; }

/* Today */
.lv-today-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.lv-today-date { color: var(--lv-muted); margin-top: 4px; }
.lv-today-moon { display: flex; align-items: center; gap: 14px; }
.lv-today-phase { font-family: var(--lv-font-display); font-size: 15px; color: var(--lv-ink); }
.lv-today-moon-sign { color: var(--lv-muted); font-size: 12.5px; margin-top: 2px; }
.lv-today-moon-host { flex: 0 0 auto; }
.lv-streak { display: flex; align-items: center; gap: 8px; color: var(--lv-copper); font-size: 12.5px; }
.lv-streak-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lv-copper); }
.lv-eclipse-banner {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border: 1px solid var(--lv-line-strong);
  border-radius: var(--lv-r-card); background: rgba(182, 179, 224, 0.055);
  cursor: pointer;
}
.lv-eclipse-banner:hover { background: rgba(182, 179, 224, 0.08); }
.lv-eclipse-icon { flex: 0 0 auto; display: flex; line-height: 0; }
.lv-eclipse-kicker {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-copper);
}
.lv-eclipse-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.lv-eclipse-text { color: var(--lv-body); font-size: 13.5px; }
/* Today hub: ask row, inline mood check-in, Elsewhere strips */
.lv-hub-ask-row { display: flex; justify-content: flex-end; }
.lv-hub-mood-circles { display: flex; gap: 10px; justify-content: center; }
.lv-hub-mood-circles .lv-mood-circle {
  flex: 0 0 44px; width: 44px; height: 44px; aspect-ratio: 1;
}
.lv-hub-mood-labels {
  display: flex; justify-content: space-between;
  margin-top: 9px; font-size: 10.5px; color: var(--lv-faint);
}
.lv-hub-strips { display: flex; flex-direction: column; }
.lv-hub-strip {
  display: flex; align-items: center; gap: 15px;
  padding: 17px 2px; border-bottom: 1px solid var(--lv-line-soft); cursor: pointer;
}
.lv-hub-strip:hover { background: rgba(182, 179, 224, 0.03); }
.lv-hub-strip-glyph {
  width: 20px; text-align: center; flex-shrink: 0;
  font-family: var(--lv-font-glyph); font-size: 16px; color: var(--lv-lav);
}
.lv-hub-strip-body { flex: 1 1 auto; min-width: 0; }
.lv-hub-strip-tab {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-faint); margin-bottom: 5px;
}
.lv-hub-strip-line { font-size: 14.5px; line-height: 1.4; color: var(--lv-ink); }
.lv-hub-strip-chevron {
  font-size: 16px; color: var(--lv-faint); flex-shrink: 0;
  transition: transform 0.18s ease;
}
.lv-hub-strip.is-open .lv-hub-strip-chevron { transform: rotate(90deg); }
.lv-hub-strip-panel {
  padding: 4px 2px 16px;
  padding-inline-start: 35px;
  border-bottom: 1px solid var(--lv-line-soft);
}
.lv-hub-strip-detail-title {
  font-size: 13.5px; color: var(--lv-ink); margin: 8px 0 2px;
}
.lv-hub-strip-detail-line { font-size: 13px; line-height: 1.5; color: var(--lv-body); margin: 6px 0; }
.lv-hub-strip-detail-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-faint); margin: 10px 0 2px;
}
.lv-hub-strip-detail-meta { font-size: 12px; margin-top: 6px; }
.lv-hub-strip-open { margin-top: 10px; font-size: 13px; }
.lv-hero-top { display: flex; align-items: center; gap: 10px; }
.lv-hero-orb-row { display: flex; align-items: center; gap: 12px; }
.lv-hero-orb-row .lv-orb-bar { flex: 1 1 auto; }
.lv-hero-orb { color: var(--lv-muted); font-size: 12px; white-space: nowrap; }
.lv-hero-range { color: var(--lv-faint); font-size: 12px; }
.lv-house-head { display: flex; align-items: baseline; gap: 8px; }
.lv-house-theme { color: var(--lv-muted); font-size: 12.5px; }
.lv-aspect-line { display: flex; align-items: center; gap: 10px; }
.lv-aspect-glyphs { font-family: var(--lv-font-glyph); color: var(--lv-lav); }
.lv-aspect-title { color: var(--lv-ink); }
.lv-aspect-rel { color: var(--lv-faint); font-size: 12px; }
.lv-affirm-strip {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border: 1px solid var(--lv-line-copper);
  border-radius: var(--lv-r-card); background: rgba(201, 138, 107, 0.05);
}
.lv-copper-label { color: var(--lv-copper); }
.lv-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-draw-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lv-draw-row:hover { border-color: var(--lv-line-strong); }
.lv-draw-row .lv-mini-tile { flex: 0 0 44px; }
.lv-draw-row-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.lv-draw-row-cta { color: var(--lv-ink); font-size: 14px; }
.lv-draw-row-chevron { color: var(--lv-faint); font-size: 18px; }
.lv-mini-tile-glyph, .lv-mini-tile-el { font-family: var(--lv-font-glyph); }
.lv-mini-tile-date {
  font-size: 10px;
  color: var(--lv-faint);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Practice */
.lv-practice-section { display: flex; flex-direction: column; gap: 20px; }
.lv-teaching-quote {
  margin: 14px 0 0;
  font-family: var(--lv-font-display);
  font-weight: 300;
  font-size: 23px;
  line-height: 1.4;
  color: var(--lv-ink);
  text-wrap: pretty;
}
.lv-teaching-author { margin: 14px 0 16px; font-size: 13px; color: var(--lv-muted); }
.lv-teaching-gloss { padding-top: 16px; border-top: 1px solid rgba(201, 138, 107, 0.2); }
.lv-teaching-gloss-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--lv-body); text-wrap: pretty; }
.lv-practice-affirm {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px;
  border-left: 2px solid rgba(201, 138, 107, 0.45);
  background: rgba(201, 138, 107, 0.045);
}
.lv-practice-row {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 18px; border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-card); background: var(--lv-card);
}
.lv-practice-tag {
  flex-shrink: 0; padding: 3px 7px;
  border: 1px solid rgba(182, 179, 224, 0.25); border-radius: 2px;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-lav);
}
.lv-practice-row-title { flex: 1 1 auto; font-size: 14.5px; color: var(--lv-ink); }
.lv-practice-minutes { flex-shrink: 0; color: var(--lv-faint); font-size: 11.5px; }
.lv-dont-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lv-line-soft); }
.lv-dont-x { color: var(--lv-copper); }
.lv-dont-text { flex: 1 1 auto; }

/* Practice: For you strip (the three picked cards on top of Today) */
.lv-foryou { display: flex; flex-direction: column; gap: 10px; }
.lv-foryou-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lv-foryou-card { display: flex; flex-direction: column; gap: 6px; }
.lv-foryou-card-title { color: var(--lv-ink); font-size: 14px; }
.lv-foryou-why { font-size: 11.5px; color: var(--lv-faint); }

/* Practice: the Library (the wisdom corpus, indexed by theme) */
.lv-library-headwrap { display: flex; flex-direction: column; gap: 6px; }
.lv-library-head { display: flex; align-items: baseline; gap: 11px; }
.lv-library-title { font-family: var(--lv-font-display); font-size: 21px; color: var(--lv-ink); }
.lv-library-rule { flex: 1 1 auto; height: 1px; background: var(--lv-line); }
.lv-library-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--lv-muted); text-wrap: pretty; }
.lv-library-themes { gap: 7px; }
.lv-quote-row { padding: 18px 0; border-top: 1px solid var(--lv-line-soft); }
.lv-quote-row:last-child { border-bottom: 1px solid var(--lv-line-soft); }
.lv-quote-text {
  margin: 0 0 9px;
  font-family: var(--lv-font-display);
  font-size: 17px;
  line-height: 1.45;
  color: var(--lv-ink);
  text-wrap: pretty;
}
.lv-quote-author { font-size: 12.5px; color: var(--lv-muted); }

/* Focus */
.lv-focus-list { display: flex; flex-direction: column; gap: 8px; }
.lv-focus-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-card); background: var(--lv-card); cursor: pointer;
}
.lv-focus-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.lv-focus-row:hover { border-color: var(--lv-line-strong); }
.lv-focus-row.is-selected { border-color: var(--lv-line-copper); }
.lv-focus-body { flex: 1 1 auto; min-width: 0; }
.lv-focus-name { color: var(--lv-ink); font-size: 14.5px; }
.lv-focus-desc { color: var(--lv-muted); font-size: 12.5px; margin-top: 2px; }
.lv-focus-dot { color: var(--lv-copper); font-size: 10px; }
.lv-focus-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--lv-copper); }
.lv-focus-gloss { font-size: 12.5px; margin: 6px 0 8px; }

/* Draw / tarot */
.lv-draw-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lv-draw-hero { width: 100%; max-width: 340px; margin: 0 auto; }
.lv-draw-recent { display: flex; gap: 12px; }
.lv-draw-recent-item { flex: 1 1 0; min-width: 0; }
button.lv-draw-recent-item {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.lv-draw-back { display: inline-block; margin-bottom: 10px; }
.lv-draw-recent-date { margin-top: 6px; text-align: center; font-size: 11px; color: var(--lv-faint); }
.lv-tarot-mini { max-width: 140px; margin: 0 auto; }
.lv-tarot-mini .lv-tarot-name { font-size: 13px; }
.lv-tarot-mini .lv-tarot-numeral { font-size: 12px; }
.lv-tarot-mini .lv-tarot-suit { font-size: 8.5px; letter-spacing: 0.12em; }
.lv-tarot-mini .lv-tarot-scrim-bottom { padding: 22% 8px 8px; }
.lv-tarot-mini .lv-tarot-decan { gap: 4px; }
.lv-tarot-mini .lv-tarot-decan-el,
.lv-tarot-mini .lv-tarot-decan-in { font-size: 9px; letter-spacing: 0.08em; }
.lv-tarot-decan { display: flex; align-items: center; justify-content: center; gap: 8px; }
.lv-tarot-decan-el, .lv-tarot-decan-in { font-size: 11px; letter-spacing: 0.12em; color: var(--lv-tarot-ink); }
.lv-tarot-decan-sep { color: rgba(243, 226, 205, 0.4); }
.lv-tarot-glyph { font-family: var(--lv-font-glyph); }
.lv-tarot-divider { height: 1px; margin: 6px 0; background: rgba(243, 226, 205, 0.35); }

/* mobile: recent draws become a horizontal scroll row of readable cards */
@media (max-width: 767px) {
  .lv-draw-recent {
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .lv-draw-recent-item { flex: 0 0 104px; }
  .lv-draw-recent .lv-tarot-mini { max-width: none; margin: 0; }
}

/* Ahead */
.lv-ahead-list { display: flex; flex-direction: column; }
.lv-ahead-band .lv-tl-row,
.lv-ahead-passed-body .lv-tl-row { padding-bottom: 20px; }
.lv-ahead-day { font-family: var(--lv-font-display); font-size: 17px; color: var(--lv-ink); }
.lv-ahead-month { font-size: 10px; letter-spacing: 0.14em; color: var(--lv-faint); }
.lv-ahead-body { display: flex; flex-direction: column; gap: 6px; }
.lv-ahead-title-row { display: flex; align-items: center; gap: 8px; }
.lv-ahead-glyph { font-family: var(--lv-font-glyph); color: var(--lv-lav); }
.lv-ahead-glyph-copper { color: var(--lv-copper); }
.lv-ahead-title { color: var(--lv-ink); font-size: 14.5px; }
.lv-ahead-meta { color: var(--lv-faint); font-size: 12px; }
.lv-ahead-bar-row { display: flex; align-items: center; gap: 10px; }
.lv-ahead-eclipse-card { border-color: var(--lv-line-strong); }
.lv-ahead-eclipse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-ahead-eclipse-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lv-ahead-countdown { color: var(--lv-copper); font-size: 12px; }

/* Ahead: weight toggle (replaces the old phenomenon chips) */
.lv-ahead-toggle {
  display: flex;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-r-btn);
  overflow: hidden;
}
.lv-ahead-seg {
  flex: 1;
  padding: 10px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--lv-font-ui);
  font-size: 12.5px;
  color: var(--lv-muted);
  text-align: center;
}
.lv-ahead-seg.is-active { background: var(--lv-copper); color: var(--lv-bg); }
.lv-ahead-toggle-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--lv-faint); }

/* Ahead: horizon bands */
.lv-ahead-band { display: flex; flex-direction: column; }
.lv-ahead-band-head { display: flex; align-items: baseline; gap: 11px; margin: 14px 0 4px; }
.lv-ahead-band:first-child .lv-ahead-band-head { margin-top: 0; }
.lv-ahead-band-name { font-family: var(--lv-font-display); font-size: 19px; color: var(--lv-ink); }
.lv-ahead-band-rule { flex: 1; height: 1px; background: var(--lv-line); }
.lv-ahead-band:first-child .lv-ahead-band-rule { background: var(--lv-line-copper); }
.lv-ahead-band-count { font-size: 11px; color: var(--lv-faint); }
.lv-ahead-band-desc { margin: 0 0 16px; font-size: 11.5px; color: var(--lv-faint); }

/* Ahead: four-dot weight marker */
.lv-ahead-weight { display: inline-flex; align-items: center; gap: 2.5px; flex-shrink: 0; }
.lv-ahead-wdot { width: 4px; height: 4px; border-radius: 50%; background: rgba(182, 179, 224, 0.2); }
.lv-ahead-wdot.is-fill { background: var(--lv-muted); }
.lv-ahead-weight.is-copper .lv-ahead-wdot.is-fill { background: var(--lv-copper); }
.lv-ahead-title-row .lv-ahead-weight { margin-left: auto; }
.lv-ahead-title-row .lv-ahead-chevron { margin-left: 2px; }
[dir=rtl] .lv-ahead-title-row .lv-ahead-weight { margin-left: 0; margin-right: auto; }
[dir=rtl] .lv-ahead-title-row .lv-ahead-chevron { margin-left: 0; margin-right: 2px; }

/* Ahead: "Just passed" disclosure below the bands */
.lv-ahead-passed { margin-top: 8px; border-top: 1px solid var(--lv-line-soft); }
.lv-ahead-passed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--lv-font-ui);
  font-size: 12.5px;
  color: var(--lv-muted);
  text-align: left;
}
.lv-ahead-passed-head:hover { color: var(--lv-ink); }
.lv-ahead-passed-count { font-size: 11px; color: var(--lv-faint); }
.lv-ahead-passed-chev { margin-left: auto; color: var(--lv-faint); transition: transform 0.15s ease; }
.lv-ahead-passed.is-open .lv-ahead-passed-chev { transform: rotate(90deg); }
.lv-ahead-passed-body { display: none; flex-direction: column; }
.lv-ahead-passed.is-open .lv-ahead-passed-body { display: flex; }
[dir=rtl] .lv-ahead-passed-head { text-align: right; }
[dir=rtl] .lv-ahead-passed-chev { margin-left: 0; margin-right: auto; }

/* Journal */
.lv-journal { display: flex; flex-direction: column; gap: 16px; }
.lv-journal-moods { display: flex; flex-direction: column; gap: 8px; }
.lv-journal-mood-label { color: var(--lv-body); }
.lv-journal-note { width: 100%; resize: vertical; }
.lv-journal-stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-journal-stats { color: var(--lv-muted); font-size: 12.5px; }
.lv-journal-saved { opacity: 0; transition: opacity 0.3s ease; }
.lv-journal-saved.is-visible { opacity: 1; }
.lv-journal-entries { display: flex; flex-direction: column; }
.lv-journal-entry { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--lv-line-soft); }
.lv-journal-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-journal-entry-date { color: var(--lv-muted); font-size: 12.5px; }
.lv-journal-entry-mood { color: var(--lv-lav); }
.lv-journal-entry-note { color: var(--lv-body); }
.lv-journal-empty { color: var(--lv-muted); padding: 18px 0; }
.lv-journal-aspect-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Journal sections (Day, Night): stacked in one scroll container */
.lv-journal-section { display: flex; flex-direction: column; gap: 16px; }
.lv-journal-section + .lv-journal-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--lv-line-soft); }

/* Section identity headers: glyph + name in the section accent, one-line
 * purpose in the quiet ink. Copper for Day, lavender for Night. */
.lv-journal-sechead { display: flex; align-items: baseline; gap: 10px; }
.lv-journal-secglyph { font-size: 15px; line-height: 1; }
.lv-journal-sechead-day .lv-journal-secglyph { color: var(--lv-copper); }
.lv-journal-sechead-night .lv-journal-secglyph { color: var(--lv-lav); }
.lv-journal-secname {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lv-journal-sechead-day .lv-journal-secname { color: var(--lv-copper); }
.lv-journal-sechead-night .lv-journal-secname { color: var(--lv-lav); }
.lv-journal-sechint { color: var(--lv-muted); font-size: 12.5px; margin-left: auto; text-align: right; }
@media (max-width: 720px) {
  .lv-journal-sechint { display: none; }
}

/* Dreams: capture card */
.lv-dream-capture {
  padding: 18px 20px;
  border: 1px solid rgba(182, 179, 224, 0.16);
  border-radius: var(--lv-r-card);
  background: var(--lv-card);
}

.lv-dream-kicker {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lv-faint);
  margin-bottom: 12px;
}

.lv-dream-prompt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--lv-faint);
  margin-bottom: 16px;
}

.lv-dream-actions { display: flex; align-items: center; gap: 12px; }

.lv-dream-write {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: none;
  border-radius: var(--lv-r-btn);
  background: var(--lv-copper);
  color: var(--lv-bg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.lv-dream-write:hover { background: var(--lv-copper-hover); }

.lv-dream-voice {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(182, 179, 224, 0.2);
  border-radius: var(--lv-r-btn);
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--lv-lav);
  cursor: pointer;
}

.lv-dream-voice:hover { border-color: rgba(201, 138, 107, 0.6); }

.lv-dream-voice.is-listening,
.lv-dream-voice.is-listening:hover {
  border-color: rgba(201, 138, 107, 0.6);
  color: var(--lv-copper);
}

.lv-dream-footnote {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lv-faint);
}

.lv-dream-form { display: flex; flex-direction: column; gap: 12px; }

.lv-dream-moodcircles { display: flex; gap: 10px; }

.lv-dream-earlier { margin-top: 10px; }

.lv-dream-entries { display: flex; flex-direction: column; gap: 12px; }

/* Dreams: entry card */
.lv-dream-card {
  padding: 20px;
  border: 1px solid rgba(182, 179, 224, 0.14);
  border-radius: var(--lv-r-card);
  background: var(--lv-card);
}

.lv-dream-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lv-dream-date { font-size: 12.5px; color: var(--lv-muted); }
.lv-dream-woke { font-size: 11.5px; color: var(--lv-faint); }
.lv-dream-title { font-size: 13.5px; color: var(--lv-ink); margin-bottom: 6px; }

.lv-dream-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lv-body);
  text-wrap: pretty;
}

.lv-dream-symbols-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lv-line-soft);
}

.lv-dream-symbols-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lv-lav);
  margin-bottom: 10px;
}

.lv-dream-symbols { display: flex; flex-wrap: wrap; gap: 7px; }

.lv-chip.lv-dream-symbol,
.lv-chip.lv-dream-pick {
  padding: 5px 11px;
  border-color: rgba(201, 138, 107, 0.4);
  color: var(--lv-copper);
}

.lv-chip.lv-dream-symbol.is-armed {
  background: rgba(201, 138, 107, 0.08);
  border-color: rgba(201, 138, 107, 0.6);
}

.lv-chip.lv-dream-add {
  padding: 5px 11px;
  border-color: rgba(182, 179, 224, 0.2);
  color: var(--lv-muted);
}

.lv-dream-archetype {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 4px 6px;
  border: none;
  border-radius: var(--lv-r-btn);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--lv-body);
  text-align: start;
  cursor: pointer;
}

.lv-dream-archetype:hover { background: rgba(182, 179, 224, 0.03); }

.lv-dream-archetype-glyph {
  font-family: var(--lv-font-glyph);
  font-size: 14px;
  color: var(--lv-lav);
}

.lv-dream-archetype-name { font-style: normal; color: var(--lv-lav); }
.lv-dream-chevron { margin-inline-start: auto; font-size: 15px; color: var(--lv-faint); }

.lv-dream-stamps {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lv-line-soft);
  gap: 6px;
}

.lv-dream-stamps .lv-chip {
  padding: 5px 10px;
  border-color: rgba(182, 179, 224, 0.13);
  font-size: 11px;
  color: var(--lv-faint);
  white-space: nowrap;
  cursor: default;
}

/* Dreams: symbol picker */
.lv-dream-picker {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--lv-line-soft);
  border-radius: var(--lv-r-card);
  background: var(--lv-deep);
}

.lv-dream-picker .lv-dream-symbols { margin-bottom: 10px; }
.lv-dream-picker-empty { font-size: 11.5px; color: var(--lv-faint); }

.lv-dream-note {
  margin: 10px 0 0;
  padding: 16px 18px;
  border-left: 1px solid rgba(182, 179, 224, 0.25);
  background: rgba(182, 179, 224, 0.03);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lv-muted);
  text-wrap: pretty;
}

/* Patterns */
.lv-patterns-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lv-patterns-chips { display: flex; gap: 8px; }
.lv-patterns-body { display: flex; flex-direction: column; gap: 20px; }
.lv-patterns-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lv-patterns-head-note { color: var(--lv-faint); font-size: 11.5px; }
.lv-patterns-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.lv-patterns-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--lv-muted); font-size: 11.5px; }
.lv-patterns-svg { display: block; }
.lv-patterns-count { font-size: 10px; color: var(--lv-faint); text-align: center; }
.lv-patterns-glyph { font-family: var(--lv-font-glyph); color: var(--lv-muted); text-align: center; }
.lv-patterns-outlier { display: flex; align-items: center; gap: 10px; padding-top: 12px; color: var(--lv-copper); }
.lv-patterns-outlier-glyph { font-family: var(--lv-font-glyph); }
.lv-patterns-corr { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lv-patterns-corr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-patterns-corr-title { color: var(--lv-ink); font-size: 13.5px; }
.lv-patterns-corr-note { color: var(--lv-muted); font-size: 12.5px; }
.lv-patterns-strength { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.lv-patterns-strength-strong { color: var(--lv-copper); }
.lv-patterns-strength-emerging { color: var(--lv-lav); }
.lv-patterns-strength-thin { color: var(--lv-faint); }
.lv-patterns-sub { color: var(--lv-muted); }
.lv-patterns-empty { color: var(--lv-muted); }
.lv-patterns-transit-section { display: flex; flex-direction: column; gap: 8px; }
.lv-patterns-transit-heading { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv-faint); margin-top: 4px; }
.lv-patterns-transit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--lv-body); }
.lv-patterns-transit-main { display: inline-flex; align-items: center; gap: 6px; min-width: 140px; }
.lv-patterns-transit-glyph { font-family: var(--lv-font-glyph); color: var(--lv-lav); font-size: 14px; }
.lv-patterns-transit-house { font-size: 11px; color: var(--lv-copper); }
.lv-patterns-transit-aspect { font-size: 12px; color: var(--lv-muted); }
.lv-patterns-transit-aspect-hard { color: var(--lv-copper); }
.lv-patterns-transit-aspect-soft { color: var(--lv-lav); }
.lv-patterns-transit-aspect-fusion { color: var(--lv-moon); }
.lv-patterns-transit-dur { flex-basis: 100%; display: flex; align-items: center; gap: 10px; padding-left: 20px; }
.lv-patterns-transit-dur-text { font-size: 11px; color: var(--lv-faint); }
.lv-patterns-transit-dur-bar { position: relative; flex: 0 1 160px; height: 3px; border-radius: 2px; background: rgba(182,179,224,0.12); }
.lv-patterns-transit-dur-today { position: absolute; top: -2px; width: 2px; height: 7px; border-radius: 1px; background: var(--lv-copper); }

/* Patterns: the collective card (k-anonymous aggregates) */
.lv-collective { display: flex; flex-direction: column; gap: 8px; }
.lv-collective-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-collective-theme { cursor: default; }
.lv-collective-theme:hover { border-color: rgba(182, 179, 224, 0.15); }
.lv-collective-mood { margin-top: 2px; }

/* Chat */
.lv-chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-chat-pending { opacity: 0.6; }

/* Shell extras */
.lv-wordmark-glyph { font-family: var(--lv-font-glyph); color: var(--lv-copper); }
.lv-user-chip { margin-top: auto; padding-top: 16px; color: var(--lv-faint); font-size: 12px; }
#lv-user-chip {
  margin-top: auto;
  padding-top: 16px;
  color: var(--lv-faint);
  font-size: 12px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#lv-user-chip:hover { color: var(--lv-body); }
.lv-return-row { display: flex; gap: 12px; }
.lv-return-row .lv-field { flex: 1 1 0; }
.lv-session-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------- Desktop Return screen composition ---------- */
.lv-return-aside { display: none; }

@media (min-width: 1100px) {
  #lv-return {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand form"
      "title form"
      "sub form"
      "aside form"
      "aside link";
    align-content: center;
    column-gap: 72px;
    max-width: 1080px;
  }
  #lv-return > .lv-wordmark { grid-area: brand; }
  #lv-return > h1 { grid-area: title; margin-top: 14px; }
  #lv-return > .lv-dim { grid-area: sub; margin-top: 14px; }
  #lv-return > .lv-return-aside { grid-area: aside; }
  #lv-return > form { grid-area: form; align-self: center; width: 100%; }
  #lv-return > .lv-link { grid-area: link; margin-top: 16px; }
  #lv-return > #lv-session-choice { grid-column: 1 / -1; }
  #lv-return > form {
    border-left: 1px solid rgba(182, 179, 224, 0.10);
    padding-left: 72px;
  }
  [dir=rtl] #lv-return > form {
    border-left: 0;
    border-right: 1px solid rgba(182, 179, 224, 0.10);
    padding-left: 0;
    padding-right: 72px;
  }
  .lv-return-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    margin-top: 48px;
  }
  .lv-moon-lg { width: 132px; height: 132px; }
  .lv-return-quote {
    font-family: var(--lv-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    color: var(--lv-muted);
    max-width: 280px;
    margin: 0;
  }
}

/* ---------- Right rail composition (desktop Today) ---------- */
#lv-rr-moon, #lv-rr-draw { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(182, 179, 224, 0.10); }
.lv-rr-moonrow { display: flex; align-items: center; gap: 16px; }
.lv-rr-moonname { font-family: var(--lv-font-display); font-weight: 300; font-size: 19px; color: var(--lv-ink); }
.lv-rr-moonsub { color: var(--lv-muted); font-size: 12.5px; margin-top: 2px; }
.lv-rr-title { font-family: var(--lv-font-display); font-weight: 300; font-size: 19px; color: var(--lv-ink); }
#lv-rr-draw .lv-tarot-mini { max-width: 100%; margin: 14px 0 0; }
#lv-rr-draw .lv-tarot-mini img { width: 100%; display: block; border-radius: 4px; }
.lv-rr-why { color: var(--lv-muted); font-size: 13px; line-height: 1.55; margin: 12px 0 0; }
.lv-rr-saved { color: var(--lv-copper); font-size: 11.5px; margin-top: 10px; min-height: 14px; }

/* ---------- Also-in-play: desktop 2-column cards ---------- */
@media (min-width: 1100px) {
  .lv-also-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .lv-also-grid .lv-aspect-row {
    border: 1px solid rgba(182, 179, 224, 0.14);
    border-radius: 6px;
    background: var(--lv-card);
    padding: 16px 18px;
  }
  .lv-also-grid .lv-aspect-row:last-child { border-bottom: 1px solid rgba(182, 179, 224, 0.14); }
}

/* ---------- Chat: natal chart under the thread ---------- */
.lv-chat-chart { margin-top: 18px; }
.lv-chat-chart > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}
.lv-chat-chart > summary::-webkit-details-marker { display: none; }
.lv-chat-chart > summary::after {
  content: '›';
  margin-left: auto;
  color: var(--lv-faint);
  transition: transform 0.15s ease;
}
.lv-chat-chart[open] > summary::after { transform: rotate(90deg); }
[dir=rtl] .lv-chat-chart > summary::after { margin-left: 0; margin-right: auto; content: '‹'; }
.lv-chat-chart[open] > summary { margin-bottom: 12px; }

.lv-natal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lv-natal-table th {
  text-align: left;
  color: var(--lv-faint);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 8px 8px;
}
.lv-natal-table td {
  padding: 7px 8px;
  border-top: 1px solid rgba(182, 179, 224, 0.08);
  color: var(--lv-body);
}
.lv-natal-table td.lv-natal-planet { color: var(--lv-ink); }
[dir=rtl] .lv-natal-table th { text-align: right; }

/* ---------- Ahead: expandable event detail ---------- */
.lv-tl-row.has-detail { cursor: pointer; }
.lv-ahead-chevron {
  margin-left: auto;
  color: var(--lv-faint);
  font-size: 13px;
  transition: transform 0.15s ease;
}
[dir=rtl] .lv-ahead-chevron { margin-left: 0; margin-right: auto; }
.lv-tl-row.is-open .lv-ahead-chevron { transform: rotate(90deg); }
.lv-ahead-detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(182, 179, 224, 0.10);
}
.lv-tl-row.is-open .lv-ahead-detail { display: block; }
.lv-ahead-detail-line { color: var(--lv-body); font-size: 13px; line-height: 1.55; margin: 6px 0; }
.lv-ahead-ask { margin-top: 6px; }
.lv-focus-autonote { font-size: 12.5px; }

/* ---------- Chat dock (every-page Ask) ---------- */
.lv-chatdock { position: fixed; right: 22px; bottom: 22px; z-index: 50; }
.lv-chatdock[hidden] { display: none; }
.lv-chatdock.is-hidden-on-view { display: none; }
.lv-chatdock-fab {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(201, 138, 107, 0.45);
  background: var(--lv-card); color: var(--lv-copper);
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lv-chatdock-fab:hover { border-color: var(--lv-copper); background: rgba(201, 138, 107, 0.11); }
.lv-chatdock-panel {
  position: absolute; right: 0; bottom: 64px;
  width: min(380px, calc(100vw - 44px));
  height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--lv-bg);
  border: 1px solid rgba(182, 179, 224, 0.16);
  border-radius: 8px;
  padding: 16px;
}
.lv-chatdock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(182, 179, 224, 0.10);
}
.lv-chatdock-close {
  background: none; border: 0; color: var(--lv-faint);
  font-size: 14px; cursor: pointer; padding: 4px 8px;
}
.lv-chatdock-close:hover { color: var(--lv-ink); }
.lv-chatdock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv-chatdock-body > h2.lv-card-title { display: none; }  /* the head carries the title */
.lv-chatdock-body .lv-chat-chart { display: none; }      /* chart card lives in the Ask view */

/* ---------- Chart wheel ---------- */
.lv-wheel { width: 100%; height: auto; max-width: 520px; }
.lv-wheel-sm .lv-wheel { max-width: 300px; }
.lv-wheel-glyph { user-select: none; }

/* ---------- Sky wheel player (shared by Chart and Ahead) ---------- */
.lv-sky-card { margin-bottom: 4px; }
.lv-sky-wheel { display: flex; justify-content: center; }
.lv-sky-wheel .lv-wheel { max-width: 420px; }
.lv-sky-controls { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.lv-sky-scrub { flex: 1; accent-color: var(--lv-copper); }
.lv-sky-date { font-size: 12px; min-width: 130px; text-align: right; }
.lv-skytrack {
  position: relative; height: 46px; margin: 6px 0 18px;
}
.lv-skytrack-spine {
  position: absolute; left: 0; right: 0; top: 22px; height: 1px;
  background: rgba(182, 179, 224, 0.14);
}
.lv-skytrack-today {
  position: absolute; top: 4px; width: 1px; height: 38px;
  background: var(--lv-copper); opacity: 0.7;
}
/* three lanes keep clustered events clickable: moon above, aspects on the
   spine, eclipses below */
.lv-skytrack-dot {
  position: absolute; top: 17px; width: 11px; height: 11px; margin-left: -5px;
  border-radius: 50%; border: 1px solid rgba(182, 179, 224, 0.5);
  background: var(--lv-bg); cursor: pointer; padding: 0;
}
.lv-skytrack-dot.lv-dot-moon { top: 6px; border-color: var(--lv-lav); background: rgba(182, 179, 224, 0.5); }
.lv-skytrack-dot.lv-dot-eclipse {
  top: 28px;
  border-color: var(--lv-copper); background: var(--lv-copper);
  box-shadow: 0 0 0 3px rgba(201, 138, 107, 0.18);
}
.lv-skytrack-dot:hover { transform: scale(1.35); z-index: 3; }
/* radar ahead_markers: a small copper badge with its short label, hanging
   below the timeline so the event dots keep their lanes */
.lv-skytrack-marker {
  position: absolute; top: 40px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--lv-copper); white-space: nowrap;
}
.lv-skytrack-marker::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lv-copper); flex-shrink: 0;
}
.lv-skytrack-marker-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Sky: radar heads-up chips (under the Today section) ---------- */
.lv-radar-chips { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.lv-radar-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-radar-chip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 7px 12px; border: 1px solid rgba(182, 179, 224, 0.15);
  border-radius: var(--lv-r-chip); background: var(--lv-tile);
  font: inherit; font-size: 12px; line-height: 1.4; color: var(--lv-body);
  cursor: pointer; text-align: left;
}
.lv-radar-chip:hover { border-color: rgba(182, 179, 224, 0.3); }
.lv-radar-chip-title { color: var(--lv-ink); }
.lv-radar-chip-when { color: var(--lv-copper); font-size: 11px; }
.lv-radar-chip-body {
  display: none; flex-basis: 100%; padding-top: 6px;
  color: var(--lv-muted); font-size: 12px; line-height: 1.5;
}
.lv-radar-chip.is-open .lv-radar-chip-body { display: block; }

/* ---------- Today: focus band ---------- */
.lv-focus-band { border-color: rgba(201, 138, 107, 0.3); }
.lv-focus-band-title {
  font-family: var(--lv-font-display); font-weight: 300;
  font-size: 20px; color: var(--lv-ink); margin-top: 6px;
}
.lv-focus-band-src { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }
.lv-focus-band-touch { margin-top: 8px; }
.lv-focus-band .lv-link { margin-top: 8px; }

/* ---------- Chart view: pattern lines ---------- */
.lv-chart-pattern-line { margin: 6px 0; }

/* ---------- Today: moon lives in the right rail on desktop ---------- */
@media (min-width: 1100px) {
  .lv-today-moon { display: none; }
}

/* ---------- Ahead: play button ---------- */
.lv-sky-play {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(201, 138, 107, 0.45);
  background: var(--lv-deep); color: var(--lv-copper);
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lv-sky-play:hover:not(:disabled) { background: rgba(201, 138, 107, 0.11); }
.lv-sky-play:disabled { opacity: 0.4; cursor: default; }

/* ---------- User centre (rail bottom) ---------- */
.lv-user-chip-btn { cursor: pointer; user-select: none; }
.lv-user-chip-btn:hover { color: var(--lv-body); }
.lv-user-menu {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(182, 179, 224, 0.14);
  border-radius: 6px;
  background: var(--lv-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lv-user-menu-item {
  background: none; border: 0; text-align: left;
  padding: 8px 10px; border-radius: 4px;
  color: var(--lv-body); font-size: 13.5px; cursor: pointer;
}
.lv-user-menu-item:hover { background: rgba(182, 179, 224, 0.05); color: var(--lv-ink); }
.lv-user-menu-item.is-danger { color: #d08a7a; }
.lv-user-menu-item.is-danger:hover { background: rgba(201, 100, 80, 0.08); }
[dir=rtl] .lv-user-menu-item { text-align: right; }
.lv-user-menu-timezone,
.lv-user-menu-profiles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lv-user-menu-timezone select,
.lv-user-menu-profiles select {
  width: 100%;
  background: var(--lv-card);
  color: var(--lv-body);
  border: 1px solid var(--lv-line-soft);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Add-profile modal ---------- */
.lv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.lv-modal-card {
  width: 100%;
  max-width: 380px;
}
.lv-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

/* ---------- Hologram panel ---------- */
.lv-hologram-panel { max-width: 420px; }
.lv-hologram-body {
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 8px;
}
.lv-hologram-theme { margin-bottom: 14px; }
.lv-hologram-theme-name {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lv-lav); margin-bottom: 6px;
}
.lv-hologram-signal {
  padding: 6px 0;
  border-top: 1px solid var(--lv-line-soft);
}
.lv-hologram-signal:first-of-type { border-top: 0; }
.lv-hologram-signal-head { display: flex; align-items: center; gap: 8px; }
.lv-hologram-valence {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid rgba(182, 179, 224, 0.35); border-radius: 3px;
  padding: 2px 7px; color: var(--lv-lav);
}
.lv-hologram-valence.is-struggle { color: #d08a7a; border-color: rgba(201, 100, 80, 0.4); }
.lv-hologram-valence.is-opportunity { color: #8fbf9f; border-color: rgba(120, 180, 140, 0.4); }
.lv-hologram-valence.is-concern { color: #d0b27a; border-color: rgba(200, 170, 100, 0.4); }
.lv-hologram-source {
  margin-left: auto;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lv-muted);
}
[dir=rtl] .lv-hologram-source { margin-left: 0; margin-right: auto; }
.lv-hologram-anchor { margin-top: 3px; font-size: 13px; color: var(--lv-body); }
.lv-hologram-meta { margin-top: 2px; font-size: 11.5px; color: var(--lv-muted); }
.lv-hologram-empty {
  padding: 8px 0;
  font-size: 13px; line-height: 1.6; color: var(--lv-muted);
}
.lv-hologram-note {
  margin-top: 12px;
  font-size: 11.5px; font-style: italic; color: var(--lv-muted);
}
.lv-hologram-wipe { color: #d08a7a; }

/* ---------- Hero: rarity chip + echo line ---------- */
.lv-rarity-chip {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(182, 179, 224, 0.35); border-radius: 3px;
  padding: 3px 8px; color: var(--lv-lav);
}
.lv-echo-line {
  margin-top: 8px; font-size: 12.5px; color: var(--lv-muted);
  font-style: italic;
}
.lv-ahead-history { color: var(--lv-muted); font-style: italic; }

/* ---------- Wheel interactivity ---------- */
.lv-sky-wheel .lv-wheel { max-width: 500px; }
.lv-wheel-sign { user-select: none; }
.lv-wheel-sign-hit { cursor: pointer; }
.lv-sign-info {
  margin: 4px auto 10px;
  max-width: 560px;
  padding: 12px 16px;
  border: 1px solid rgba(182, 179, 224, 0.12);
  border-radius: 6px;
  background: var(--lv-deep);
  min-height: 66px;
}
.lv-sign-info-line { font-size: 13px; color: var(--lv-body); margin: 3px 0; }
.lv-sign-info-title { color: var(--lv-ink); font-size: 14.5px; }
.lv-sign-info-dates { color: var(--lv-faint); font-size: 11.5px; }
.lv-sign-info-transit { color: var(--lv-copper); }

/* ---------- Mobile app frame: top bar + big bottom buttons ---------- */
.lv-topbar { display: none; }

@media (max-width: 767px) {
  .lv-app {
    display: flex;
    flex-direction: column;
  }

  .lv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px calc(14px + env(safe-area-inset-top, 0px));
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--lv-line-soft);
    background: var(--lv-bg);
    flex: 0 0 auto;
  }

  .lv-topbar-user {
    min-width: 38px; height: 38px; border-radius: 19px;
    border: 1px solid rgba(201, 138, 107, 0.45);
    background: var(--lv-card); color: var(--lv-copper);
    font-size: 15px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 0 12px;
    cursor: pointer;
  }

  .lv-main {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  /* bottom bar: logo and rail chrome out, buttons big */
  .lv-rail .lv-wordmark,
  .lv-rail #lv-user-chip {
    display: none;
  }

  .lv-rail-item {
    padding: 12px 6px;
    min-height: 54px;
    align-items: center;
  }

  .lv-rail-glyph {
    font-size: 22px;
  }

  /* user menu opens from the top bar on mobile */
  .lv-user-menu {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    z-index: 60;
    margin: 0;
  }
}

/* ---------- User menu: profile block ---------- */
.lv-user-profile {
  padding: 8px 10px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(182, 179, 224, 0.10);
}
.lv-user-profile-name { color: var(--lv-ink); font-size: 14px; }
.lv-user-profile-meta { color: var(--lv-faint); font-size: 11.5px; margin-top: 2px; }

/* mobile: chat FAB floats above the bottom bar, not over it */
@media (max-width: 767px) {
  .lv-chatdock { bottom: calc(var(--lv-mobile-bar-h) + 30px); right: 14px; }
}

/* ---------- Chart view (redesigned reading + lifemap) ---------- */
.lv-chart-reading-host { display: flex; flex-direction: column; gap: 20px; }

.lv-chart-skeleton {
  position: static;
  padding: 28px 0;
  background: transparent;
  min-height: 120px;
}

.lv-chart-tabs { display: flex; flex-direction: column; gap: 16px; }

.lv-chart-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lv-chart-tab-pane[hidden] { display: none; }

.lv-chart-now {
  border-color: var(--lv-line-copper);
  background: rgba(201, 138, 107, 0.045);
}

.lv-chart-houses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.lv-chart-house {
  padding: 12px 14px;
  border: 1px solid rgba(182, 179, 224, 0.12);
  border-radius: var(--lv-r-card);
  background: var(--lv-deep);
}

.lv-chart-house-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.lv-chart-house-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201, 138, 107, 0.15);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--lv-copper);
}

.lv-chart-house-sign {
  font-family: var(--lv-font-glyph);
  color: var(--lv-muted);
  font-size: 13px;
}

.lv-chart-house .lv-gloss { margin: 0; }

.lv-chart-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lv-chart-column .lv-card-title { font-size: 16px; }

.lv-chart-bullets {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lv-chart-bullets li::marker { color: var(--lv-faint); }

.lv-chart-era {
  font-size: 12.5px;
  font-style: italic;
  color: var(--lv-muted);
  margin: 6px 0 0;
}

.lv-chart-decade {
  font-family: var(--lv-font-display);
  font-size: 17px;
  color: var(--lv-ink);
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--lv-line-soft);
}

.lv-chart-decade:first-child { margin-top: 0; }

.lv-chart-roadmap .lv-tl-row.is-slow .lv-ahead-glyph {
  color: var(--lv-copper);
  font-size: 16px;
}

.lv-chart-roadmap .lv-tl-row.is-slow .lv-ahead-title {
  font-weight: 500;
  color: var(--lv-ink);
}

.lv-chart-age {
  width: 36px;
  text-align: right;
}

[dir=rtl] .lv-chart-age { text-align: left; }

@media (max-width: 767px) {
  .lv-chart-houses,
  .lv-chart-columns {
    grid-template-columns: 1fr;
  }

  .lv-chart-tab-bar {
    gap: 6px;
  }

  .lv-chart-tab-bar .lv-chip {
    padding: 5px 9px;
    font-size: 11px;
  }

  .lv-chart-roadmap .lv-tl-row {
    flex-wrap: nowrap;
  }
}

/* ---------- Archetypes (chart card + today hero subtitle) ---------- */
.lv-hero-sub {
  margin-top: 8px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--lv-lav);
}

.lv-arch-entry {
  padding: 10px 0;
  border-top: 1px solid var(--lv-line-soft);
}
.lv-arch-entry:first-of-type { border-top: 0; padding-top: 4px; }
.lv-arch-entry .lv-gloss { margin: 6px 0 8px; }

.lv-arch-head {
  display: flex; align-items: baseline; gap: 8px;
}
.lv-arch-point {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lv-copper);
}
.lv-arch-head .lv-arch-point:empty { display: none; }
.lv-arch-name {
  font-size: 15px; font-weight: 500; color: var(--lv-ink);
}
.lv-arch-dominant {
  margin-inline-start: auto;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-copper);
  border: 1px solid rgba(201, 138, 107, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.lv-arch-sign { font-size: 12px; margin-top: 2px; }

.lv-arch-row {
  display: flex; gap: 8px; margin-top: 4px;
  font-size: 12.5px; color: var(--lv-body);
}
.lv-arch-label {
  flex: 0 0 86px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lv-muted); padding-top: 2px;
}

/* ---------- Cast interstitial (onboarding, "Your cast") ---------- */
.lv-cast {
  position: fixed;
  inset: 0;
  z-index: 70; /* above the loading overlay (60), below the modal (80) */
  overflow-y: auto;
  background: var(--lv-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}
.lv-cast-card {
  width: 100%;
  max-width: 460px;
}
.lv-cast-title { margin-top: 10px; }
.lv-cast-intro { margin-top: 8px; }
.lv-cast-list { margin: 14px 0 18px; }
.lv-cast-means {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lv-lav);
  font-style: italic;
}

/* Library dream-symbol shelf */
.lv-symbol-name {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--lv-copper, #c98a6b);
  margin-bottom: 2px;
}
.lv-symbol-question {
  font-size: 12.5px;
  margin-top: 2px;
}

/* Today hub: your rhythm cluster (streak + cycle card) */
.lv-rhythm-cluster {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 6px;
  padding: 13px 15px;
  border: 1px solid var(--lv-line-soft);
  border-radius: var(--lv-r-card);
  background: rgba(182, 179, 224, 0.04);
}
.lv-cyclecard { cursor: pointer; }
.lv-cyclecard-top { display: flex; align-items: center; gap: 14px; }
.lv-cyclecard-number {
  min-width: 46px;
  text-align: center;
  font-family: var(--lv-font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--lv-copper);
}
.lv-cyclecard-day-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-faint);
}
.lv-cyclecard-day-line { font-size: 14.5px; color: var(--lv-ink); margin-top: 2px; }
.lv-cyclecard-chevron {
  font-size: 16px; color: var(--lv-faint); flex-shrink: 0;
  transition: transform 0.18s ease;
}
.lv-cyclecard.is-open .lv-cyclecard-chevron { transform: rotate(90deg); }
.lv-cyclecard-dots { display: flex; gap: 6px; margin-top: 11px; }
.lv-cyclecard-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lv-line);
}
.lv-cyclecard-dot.is-current {
  background: var(--lv-copper);
  box-shadow: 0 0 0 3px rgba(201, 138, 107, 0.18);
}
.lv-cyclecard-year-line { margin-top: 6px; font-size: 12px; }
.lv-cyclecard-panel {
  padding: 8px 0 4px;
  font-size: 13px; line-height: 1.5;
}
.lv-cyclecard-meaning { color: var(--lv-ink); margin-bottom: 4px; }
.lv-cyclecard-master { margin-top: 6px; }
.lv-cyclecard-breakdown {
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--lv-faint);
}

/* Today hub: card of the day */
.lv-hub-daycard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--lv-line-soft);
  border-radius: var(--lv-r-card);
  cursor: pointer;
}
.lv-hub-daycard:hover { background: rgba(182, 179, 224, 0.03); }
.lv-hub-daycard-img {
  width: 46px; height: auto; border-radius: 4px; flex-shrink: 0;
}
.lv-hub-daycard-name { font-size: 14.5px; color: var(--lv-ink); }
.lv-hub-daycard-kw { font-size: 12px; margin-top: 2px; }
.lv-num-entry .lv-arch-head { margin-bottom: 2px; }
.lv-num-karmic { font-size: 12.5px; margin-top: 4px; }

/* Numbers tab: the nine-year rhythm timeline (Ahead row language) */
.lv-rhythm-label { margin: 14px 0 4px; }
.lv-rhythm { display: flex; flex-direction: column; }
.lv-rhythm-row { padding-bottom: 14px; }
.lv-rhythm-year {
  width: 46px;
  font-family: var(--lv-font-display);
  font-size: 15px;
  color: var(--lv-ink);
}
.lv-rhythm-row.is-current {
  border-inline-start: 2px solid rgba(201, 138, 107, 0.65);
  padding-block: 6px 12px;
  padding-inline: 12px 10px;
  margin-inline-start: -12px;
  background: rgba(201, 138, 107, 0.05);
  border-radius: 8px;
}
.lv-rhythm-row.is-current .lv-rhythm-title { font-weight: 600; }
.lv-rhythm-row.is-prologue { opacity: 0.55; }
.lv-rhythm-previous {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-faint);
  border: 1px solid var(--lv-line-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.lv-rhythm-current {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lv-copper);
  border: 1px solid rgba(201, 138, 107, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.lv-rhythm-span { font-size: 12px; }
.lv-rhythm-sky { font-size: 12px; }
.lv-rhythm-ask { font-size: 12.5px; margin-top: 2px; align-self: flex-start; }