/* =========================================================
   Lilith Astrology — Birth Chart Generator
   Loaded on every page (it is small) so the chart wheel and
   the sign-finder widget can appear anywhere, not only on
   birth-chart.php.
   ========================================================= */

/* ---------- Birth form ---------- */
.bc-form { max-width: 760px; margin: 0 auto 3em; }
.bc-form .form-row { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.bc-form .form-row.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) {
  .bc-form .form-row, .bc-form .form-row.two { grid-template-columns: 1fr; }
}

.bc-hint { font-size: .78rem; color: var(--text-dim); margin: -10px 0 16px; line-height: 1.5; }
.bc-field-error { font-size: .78rem; color: var(--garnet); margin-top: 5px; }
[data-theme="dark"] .bc-field-error { color: #e0808f; }
.form-field.has-error input, .form-field.has-error select { border-color: var(--garnet); }

.bc-check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px; }
.bc-check input { width: auto; margin-top: 3px; flex-shrink: 0; }
.bc-check label { margin: 0; font-size: .86rem; color: var(--text); line-height: 1.45; }

/* ---------- Place autocomplete ---------- */
.bc-place { position: relative; }
.bc-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; display: none;
}
.bc-suggestions.is-open { display: block; }
.bc-suggestion {
  display: block; width: 100%; text-align: left; padding: 10px 13px; cursor: pointer;
  background: none; border: none; color: var(--text); font-family: var(--font-body);
  font-size: .88rem; border-bottom: 1px solid var(--border);
}
.bc-suggestion:last-child { border-bottom: none; }
.bc-suggestion:hover, .bc-suggestion.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bc-suggestion .bc-suggestion-tz { display: block; font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.bc-suggestions-empty { padding: 12px 13px; font-size: .84rem; color: var(--text-dim); }

/* The resolved coordinates + zone, shown so the single most
   error-prone input in the whole chart is visible and checkable
   rather than silently assumed. */
.bc-resolved {
  display: none; margin: -8px 0 18px; padding: 10px 13px; font-size: .8rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--text-dim); line-height: 1.55;
}
.bc-resolved.is-visible { display: block; }
.bc-resolved strong { color: var(--text); }
.bc-advanced-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: var(--font-body); font-size: .8rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.bc-advanced { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.bc-advanced.is-open { display: block; }

/* ---------- Result layout ---------- */
.bc-result { max-width: 1080px; margin: 0 auto; }
.bc-headline { text-align: center; margin-bottom: 2em; }
.bc-headline h3 { font-size: 1.7rem; margin-bottom: .25em; }
.bc-headline .bc-birth-line { color: var(--text-dim); font-size: .9rem; }

/* The big three, above everything else — they are what a reader
   looks for first and what most people mean by "my chart". */
.bc-big-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 2.6em; }
@media (max-width: 720px) { .bc-big-three { grid-template-columns: 1fr; } }
.bc-big-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; text-align: center;
}
.bc-big-card .bc-big-glyph { font-size: 2rem; color: var(--accent); line-height: 1; }
.bc-big-card .bc-big-role { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 6px; }
.bc-big-card .bc-big-sign { font-family: var(--font-display); font-size: 1.35rem; color: var(--text); }
.bc-big-card .bc-big-degree { font-size: .8rem; color: var(--text-dim); margin-top: 3px; }

.bc-chart-layout { display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.bc-wheel-col { flex: 0 0 auto; }
.bc-table-col { flex: 1 1 320px; min-width: 300px; }

/* ---------- The wheel ---------- */
.bc-wheel { width: min(560px, 92vw); height: auto; display: block; }
.bc-wheel .bc-ring { fill: none; stroke: var(--border); }
.bc-wheel .bc-ring-band { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--border); }
.bc-wheel .bc-spoke { stroke: var(--border); stroke-width: 1; }
.bc-wheel .bc-spoke-minor { stroke: var(--border); stroke-width: .5; opacity: .55; }
.bc-wheel .bc-house-line { stroke: var(--text-dim); stroke-width: .7; stroke-dasharray: 3 4; opacity: .6; }
.bc-wheel .bc-angle-line { stroke: var(--accent); stroke-width: 1.6; }
.bc-wheel .bc-sign-glyph { fill: var(--accent); font-size: 17px; }
.bc-wheel .bc-house-num { fill: var(--text-dim); font-size: 10px; }
.bc-wheel .bc-angle-label { fill: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.bc-wheel .bc-planet-glyph { fill: var(--text); font-size: 15px; }
.bc-wheel .bc-planet-degree { fill: var(--text-dim); font-size: 8.5px; }
.bc-wheel .bc-planet-retro { fill: var(--garnet); font-size: 8px; }
[data-theme="dark"] .bc-wheel .bc-planet-retro { fill: #e0808f; }
.bc-wheel .bc-planet-marker { stroke: var(--accent); stroke-width: 1; fill: var(--bg-panel); }
.bc-wheel .bc-aspect-harmony { stroke: #5f9ea0; }
.bc-wheel .bc-aspect-challenge { stroke: var(--garnet); }
[data-theme="dark"] .bc-wheel .bc-aspect-challenge { stroke: #c96a7a; }
.bc-wheel .bc-aspect-blend { stroke: var(--accent); }
.bc-wheel .bc-aspect-other { stroke: var(--text-dim); }

.bc-wheel-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: .74rem; color: var(--text-dim); }
.bc-wheel-legend span { display: flex; align-items: center; gap: 6px; }
.bc-wheel-legend i { width: 16px; height: 2px; display: inline-block; }

/* ---------- Positions table ---------- */
.bc-table { width: 100%; border-collapse: collapse; }
.bc-table th, .bc-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: .86rem; }
.bc-table th { color: var(--text-dim); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.bc-table .bc-body-glyph { color: var(--accent); font-size: 1.05rem; margin-right: 6px; }
.bc-table .bc-retro { color: var(--garnet); font-size: .78rem; font-weight: 600; }
[data-theme="dark"] .bc-table .bc-retro { color: #e0808f; }
.bc-table tr.bc-angle-row td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bc-table tr.bc-locked-row td { opacity: .45; }

/* ---------- Interpretation sections ---------- */
.bc-section { margin-top: 3.4em; }
.bc-section > h3 { font-size: 1.35rem; margin-bottom: .3em; }
.bc-section > .bc-section-note { color: var(--text-dim); font-size: .88rem; margin: 0 0 1.8em; }

.bc-placement {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; margin-bottom: 18px;
}
.bc-placement-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: .5em; }
.bc-placement-head .bc-glyph { font-size: 1.6rem; color: var(--accent); line-height: 1; }
.bc-placement-head h4 { font-family: var(--font-display); font-size: 1.12rem; margin: 0; }
.bc-placement-position {
  margin-left: auto; font-size: .84rem; color: var(--accent);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.bc-placement-represents { color: var(--text-dim); font-size: .87rem; font-style: italic; margin: 0 0 1.1em; }
.bc-placement p { margin: 0 0 1em; font-size: .94rem; line-height: 1.7; }
.bc-placement p:last-child { margin-bottom: 0; }
.bc-keywords { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 1.1em; }
.bc-keyword {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}

/* ---------- Aspects ---------- */
.bc-aspect {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 14px; border-left-width: 3px;
}
.bc-aspect.nature-harmony { border-left-color: #5f9ea0; }
.bc-aspect.nature-challenge { border-left-color: var(--garnet); }
.bc-aspect.nature-blend { border-left-color: var(--accent); }
.bc-aspect.nature-adjustment, .bc-aspect.nature-friction, .bc-aspect.nature-talent { border-left-color: var(--text-dim); }
.bc-aspect-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: .7em; }
.bc-aspect-head h4 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.bc-aspect-symbol { color: var(--accent); font-size: 1.2rem; }
.bc-aspect-orb { margin-left: auto; font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.bc-aspect p { margin: 0 0 .85em; font-size: .92rem; line-height: 1.68; }
.bc-aspect p:last-child { margin-bottom: 0; }
.bc-aspect .bc-aspect-general { color: var(--text-dim); }

.bc-aspect-compact { display: flex; align-items: center; gap: 10px; font-size: .88rem; padding: 9px 0; border-bottom: 1px solid var(--border); }
.bc-aspect-compact:last-child { border-bottom: none; }
.bc-aspect-compact .bc-aspect-orb { font-size: .74rem; }

/* ---------- Locked / upsell ---------- */
.bc-locked {
  position: relative; border: 1px dashed var(--accent); border-radius: var(--radius);
  padding: 30px; text-align: center; background: color-mix(in srgb, var(--accent) 6%, transparent);
  margin-top: 18px;
}
.bc-locked h4 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .5em; }
.bc-locked p { color: var(--text-dim); font-size: .9rem; margin: 0 auto 1.4em; max-width: 460px; line-height: 1.65; }
.bc-locked-list { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4em; }
.bc-locked-chip {
  font-size: .78rem; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; display: flex; align-items: center; gap: 5px;
}
.bc-locked-chip .bc-glyph { color: var(--accent); }

/* A teaser paragraph that fades out rather than being cut mid-word. */
.bc-fade {
  position: relative; max-height: 5.4em; overflow: hidden;
}
.bc-fade::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
  background: linear-gradient(to bottom, transparent, var(--bg-panel));
}

/* ---------- Metadata / provenance ---------- */
.bc-meta {
  margin-top: 2.6em; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-dim); line-height: 1.7;
}
.bc-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0 0 1em; }
.bc-meta dt { color: var(--text); font-weight: 600; }
.bc-meta dd { margin: 0; }
.bc-warning {
  border: 1px solid var(--garnet); border-radius: var(--radius); padding: 12px 15px;
  font-size: .84rem; margin-bottom: 16px; background: rgba(140,48,64,.1); line-height: 1.6;
}

/* ---------- AI deep dive ---------- */
.bc-ai { margin-top: 2.4em; }
.bc-ai-output {
  margin-top: 18px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); font-size: .95rem; line-height: 1.75; white-space: pre-wrap;
}
.bc-ai-output:empty { display: none; }

/* ---------- Sign finder (horoscope pages) ---------- */
.bc-finder {
  max-width: 620px; margin: 0 auto 3em; padding: 26px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel);
  text-align: center;
}
.bc-finder h3 { font-size: 1.15rem; margin-bottom: .3em; }
.bc-finder p { color: var(--text-dim); font-size: .87rem; margin: 0 auto 1.3em; max-width: 420px; }
.bc-finder-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: flex-end; }
.bc-finder-row .form-field { margin-bottom: 0; text-align: left; min-width: 190px; }
.bc-finder-result { margin-top: 1.4em; font-size: .92rem; }
.bc-finder-result .bc-finder-sign { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }

.bc-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.6em; }

/* ---------- Saved charts ---------- */
.bc-saved-list { display: grid; gap: 12px; }
.bc-saved-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel);
}
.bc-saved-item .bc-saved-meta { flex: 1; min-width: 0; }
.bc-saved-item strong { display: block; font-size: .95rem; }
.bc-saved-item span { font-size: .8rem; color: var(--text-dim); }

/* ---------- Print ---------- */
@media print {
  .site-header, .app-tabbar, .site-footer, .more-panel, .more-backdrop,
  .bc-form, .bc-locked, .bc-cta-row, .bc-no-print { display: none !important; }
  body { background: #fff; color: #111; padding-bottom: 0; }
  .bc-placement, .bc-aspect, .bc-big-card { break-inside: avoid; border-color: #ccc; }
  .bc-wheel { width: 480px; }
}

/* =========================================================
   Horoscope cards — including the "being written now" state
   that appears the first time a period rolls over.
   ========================================================= */
.horoscope-card { display: flex; flex-direction: column; }
.horoscope-card .horoscope-body { flex: 1; }
.horoscope-content { color: var(--text-dim); font-size: .92rem; margin: 0; }

.horoscope-sections { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.horoscope-section { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--text-dim); }
.horoscope-section strong { color: var(--text); }
.horoscope-section-icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.horoscope-lucky { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-size: .78rem; color: var(--text-dim); }
.horoscope-lucky strong { color: var(--accent); }
.horoscope-scores { margin-top: 10px; font-size: .78rem; color: var(--accent); }
.horoscope-unpublished { color: var(--text-dim); font-style: italic; font-size: .9rem; margin: 0; }
.horoscope-profile-link { display: block; margin-top: 12px; color: var(--accent); font-size: .85rem; }

/* Placeholder shown while a reading is generated. The skeleton bars
   reserve roughly the height the real text will take, so the grid does
   not jump when each card fills in. */
.horoscope-placeholder {
  display: flex; align-items: center; gap: 9px;
  color: var(--text-dim); font-size: .86rem; font-style: italic; margin: 0 0 12px;
}
.skeleton-line {
  display: block; height: 9px; border-radius: 4px; margin-bottom: 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text-dim) 12%, transparent) 25%,
    color-mix(in srgb, var(--text-dim) 22%, transparent) 50%,
    color-mix(in srgb, var(--text-dim) 12%, transparent) 75%);
  background-size: 200% 100%;
}
.skeleton-line.short { width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton-line { animation: skeleton-sweep 1.4s ease-in-out infinite; }
  @keyframes skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}

/* A card that just arrived fades in rather than snapping in, so a grid
   filling in one card at a time does not read as flickering. */
@media (prefers-reduced-motion: no-preference) {
  .horoscope-card.just-generated .horoscope-body,
  .horoscope-panel.just-generated .horoscope-body {
    animation: horoscope-fade-in .45s ease both;
  }
  @keyframes horoscope-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------- Language switcher / admin i18n ---------- */
.i18n-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 1.4em; }
.i18n-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px;
  border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text-dim);
}
.i18n-chip.is-active { border-color: var(--accent); color: var(--accent); }
.i18n-meter { width: 60px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.i18n-meter span { display: block; height: 100%; background: var(--accent); }