/* Natal chart page ("Натальная карта"): the form on the left, an empty wheel on the right; after the calculation the wheel,
   the table of planets, the texts by planet and the aspects. Colours and fonts are the site's own tokens (styles.css). */

.site-shell #route-natal .natal-hero { box-sizing: border-box; max-width: none; margin: 0; padding: 34px var(--gutter) 0; }
#route-natal .natal-hero .back-link { margin: 0; }
#route-natal .natal-hero .forecast-kicker { margin: 30px 0 0; font: italic 500 var(--d-fs-kick, 22px)/1.25 var(--accent); color: var(--gold); }
#route-natal .natal-hero h1 { margin: 6px 0 0; font: 800 var(--c-fs-h1, clamp(40px, 5.2vw, 72px))/1.06 var(--display); letter-spacing: -.02em; color: var(--ink); }
#route-natal .natal-hero h1 em { font: inherit; font-style: normal; color: var(--gold-light); }
#route-natal .natal-lead { max-width: 620px; margin: 18px 0 0; font: 400 var(--c-fs-lead, 18px)/1.35 var(--body); color: var(--muted); }

/* ---------- Form and the empty wheel ---------- */
.site-shell #route-natal .natal-start { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: none; margin: 0; padding: 36px var(--gutter) var(--sec-gap); }
#route-natal .natal-form-card { min-width: 0; padding: 28px 0 0; border-top: 1px solid rgba(222, 184, 88, .3); }
#route-natal .natal-form-title { margin: 0 0 22px; font: 800 24px/1.2 var(--display); color: var(--ink); }
#route-natal .birth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; max-width: 520px; margin-top: 0; }
#route-natal .birth-form .city-field, #route-natal .birth-form .birth-manual, #route-natal .birth-form .natal-unknown, #route-natal .birth-form .natal-status, #route-natal .birth-form button[type="submit"] { grid-column: 1 / -1; }
#route-natal .birth-form button[type="submit"] { justify-self: start; }
#route-natal .birth-form label.natal-unknown { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; cursor: pointer; }
#route-natal .natal-unknown input { width: 18px; height: 18px; flex: none; padding: 0; accent-color: var(--gold); }
#route-natal .natal-status:empty { display: none; }
#route-natal .natal-privacy { max-width: 520px; margin: 22px 0 0; font: 400 13px/1.5 var(--body); color: var(--muted); }
#route-natal .natal-wheel-stage { display: none; place-items: center; }
#route-natal .natal-wheel-empty { width: min(100%, 520px); opacity: .85; }
#route-natal .natal-wheel-empty .natal-wheel-svg { animation: natal-slow-turn 240s linear infinite; }
@keyframes natal-slow-turn { to { transform: rotate(360deg); } }
@media (min-width: 1024px) {
  .site-shell #route-natal .natal-start { grid-template-columns: 46% 46%; column-gap: 8%; align-items: start; padding-top: 56px; }
  #route-natal .natal-wheel-stage { display: grid; }
}

/* ---------- Result ---------- */
.site-shell #route-natal .natal-result { max-width: none; margin: 0; padding: 0 var(--gutter) var(--sec-gap); scroll-margin-top: calc(var(--header, 80px) + 12px); }
#route-natal .natal-result.is-fresh .natal-wheel-svg { animation: natal-wheel-in .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes natal-wheel-in { from { opacity: 0; transform: rotate(-14deg) scale(.96); } to { opacity: 1; transform: none; } }
#route-natal .natal-result-head { padding-top: 40px; border-top: 1px solid rgba(222, 184, 88, .3); }
#route-natal .natal-result-head h2 { margin: 6px 0 0; font: 800 clamp(30px, 3.4vw, 48px)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
#route-natal .natal-big-three { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
#route-natal .natal-big-three li { display: grid; gap: 2px; min-width: 150px; padding: 14px 18px; border: 1px solid rgba(222, 184, 88, .4); border-radius: 8px; }
#route-natal .natal-chip-label { font: italic 500 15px/1.2 var(--accent); color: var(--gold); }
#route-natal .natal-big-three strong { font: 700 22px/1.2 var(--display); color: var(--ink); }

#route-natal .natal-result-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
#route-natal .natal-wheel-box { min-width: 0; }
#route-natal .natal-wheel { width: min(100%, 640px); margin-inline: auto; }
#route-natal .natal-wheel-svg { display: block; width: 100%; height: auto; font-family: "Segoe UI Symbol", "Noto Sans Symbols", "Apple Symbols", "DejaVu Sans", var(--body), sans-serif; }
.nw-ring { fill: none; stroke: rgba(222, 184, 88, .55); stroke-width: 1.2; }
.nw-ring-inner { stroke: rgba(222, 184, 88, .3); }
.nw-sign-line, .nw-cusp { stroke: rgba(222, 184, 88, .32); stroke-width: 1; }
.nw-cusp-main { stroke: rgba(245, 217, 133, .85); stroke-width: 1.6; }
.nw-sign-glyph { fill: var(--gold); font-size: 25px; }
.nw-house-number { fill: var(--muted); font: 400 12px var(--body); }
.nw-angle-label { fill: var(--gold-light); font: 700 13px var(--body); letter-spacing: .06em; }
.nw-tick { stroke: var(--gold-light); stroke-width: 1.4; }
.nw-planet-glyph { fill: var(--ink); font-size: 26px; }
.nw-planet-degree { fill: var(--muted); font: 400 11px var(--body); }
.nw-retro .nw-planet-degree { fill: var(--gold-light); }
.nw-aspect { stroke-width: 1.2; opacity: .75; }

#route-natal .natal-table-box h3, #route-natal .natal-aspects h3, #route-natal .natal-money h3, #route-natal .natal-next h3 { margin: 0 0 14px; font: 800 22px/1.2 var(--display); color: var(--ink); }
#route-natal .natal-table { width: 100%; border-collapse: collapse; font: 400 15px/1.3 var(--body); color: var(--ink); }
#route-natal .natal-table th, #route-natal .natal-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid rgba(222, 184, 88, .2); font-weight: 400; }
#route-natal .natal-table thead th { font: italic 500 14px/1.2 var(--accent); color: var(--gold); }
#route-natal .natal-table tbody th { font-weight: 700; }
#route-natal .natal-no-time { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

#route-natal .natal-sections { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
#route-natal .natal-card { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid rgba(222, 184, 88, .27); background: var(--panel); }
#route-natal .natal-card-tag { font: italic 500 16px/1.3 var(--accent); color: var(--gold); }
#route-natal .natal-card h3 { margin: 0; font: 800 22px/1.2 var(--display); color: var(--ink); }
#route-natal .natal-card-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
#route-natal .natal-card-text { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); }

#route-natal .natal-aspects, #route-natal .natal-money, #route-natal .natal-next { margin-top: 48px; }
#route-natal .natal-aspects-lead { margin: 0 0 14px; color: var(--muted); }
#route-natal .natal-aspects ul, #route-natal .natal-money ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
#route-natal .natal-aspects li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(222, 184, 88, .2); }
#route-natal .natal-aspects li span { color: var(--muted); font-size: 15px; }
#route-natal .natal-money li { padding: 10px 0; border-bottom: 1px solid rgba(222, 184, 88, .2); }
#route-natal .natal-money > p, #route-natal .natal-next > p { max-width: 620px; margin: 14px 0 0; color: var(--muted); }
#route-natal .natal-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 22px; }

@media (min-width: 768px) {
  #route-natal .natal-sections { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  #route-natal .natal-result-grid { grid-template-columns: 52% 44%; column-gap: 4%; align-items: start; }
  #route-natal .natal-sections { grid-template-columns: repeat(3, 1fr); }
  #route-natal .natal-aspects, #route-natal .natal-money { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  #route-natal .natal-wheel-empty .natal-wheel-svg, #route-natal .natal-result.is-fresh .natal-wheel-svg { animation: none; }
}

/* ---------- Home page: the natal chart block above the card of the day ---------- */
.natal-feature { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; margin: 32px 0 var(--sec-gap); padding: 28px 0; border-top: 1px solid rgba(222, 184, 88, .3); border-bottom: 1px solid rgba(222, 184, 88, .3); color: inherit; text-decoration: none; }
.natal-feature-art { width: min(100%, 360px); margin-inline: auto; }
.natal-feature-art .natal-wheel-svg { display: block; width: 100%; height: auto; opacity: .9; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.natal-feature:hover .natal-wheel-svg { transform: rotate(8deg); }
.natal-feature-copy h3 { margin: 8px 0 0; font: 700 var(--fs-draw, 28px)/1.25 var(--display); color: var(--ink); }
.natal-feature-copy p { max-width: 520px; margin: 12px 0 0; font: 400 clamp(15px, calc(15px + var(--fs-lead, 16px) - 16px), 20px)/1.3 var(--body); color: var(--muted); }
.natal-feature-cta { margin-top: 24px; display: inline-flex; width: auto; pointer-events: none; }
@media (min-width: 768px) { .natal-feature { grid-template-columns: 38% 1fr; gap: 6%; padding: 36px 0; } .natal-feature-art { margin: 0; } }
@media (prefers-reduced-motion: reduce) { .natal-feature-art .natal-wheel-svg, .natal-feature:hover .natal-wheel-svg { transition: none; transform: none; } }
.natal-feature-kicker { display: block; font: italic 500 20px/27px var(--accent); color: var(--gold); }