/* Натальная карта: калькулятор, колесо карты, расшифровка, страницы толкований (site/pages/natal.py).
   Общие части — pages.css и site.css; здесь только своё, с приставками nt- (страница) и nw- (колесо). */

/* ---------- форма ---------- */
.nt-calc__sub { margin-top: 8px; color: var(--mute); font-size: .95rem; max-width: 60ch; }
.nt-form { margin-top: 22px; display: grid; gap: 14px; }
.nt-form .row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
.nt-unknown { min-height: 44px; align-items: center; justify-self: start; }
.nt-form .hint { margin-top: -4px; }
.nt-form .pg-calc__go { margin-top: 6px; }
.nt-form .formerr { margin-top: 0; }
.nt-form .formerr[hidden] { display: none; }
.nt-form .btn[data-busy] svg { animation: nt-pulse 1s ease-in-out infinite; }
@keyframes nt-pulse { 50% { opacity: .35; } }

/* ---------- результат ---------- */
.nt-result { scroll-margin-top: 84px; outline: none; }
.nt-result > .pg__card:first-child { margin-top: 0; }
.nt-result h2 { font: 400 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 var(--display); color: var(--title); }
.nt-result h3 { font: 400 1.35rem/1.2 var(--display); color: var(--ink); }
.nt-result .pg-facts dd small { display: block; margin-top: 4px; font: 400 .8rem/1.3 var(--mono); color: var(--mute); }
.nt-result .pg-facts dd small.note { font-family: var(--text); }
.nt-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.nt-side h3 { margin-bottom: 4px; }
.nt-table td.c, .nt-table th.c { text-align: center; }
.nt-table .nt-pl { display: inline-flex; align-items: center; gap: 8px; }
.nt-table .glyph { width: 18px; height: 18px; color: var(--glow-hi); flex: none; }
.nt-table .r { margin-left: 4px; font-size: .78rem; font-weight: 600; }
.nt-table .ap { color: var(--mute); }
.nt-table tr.nt-angle th, .nt-table tr.nt-angle td { color: var(--title); }
.nt-table .nt-where .mono { margin-left: 6px; font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.nt-asp { display: inline-flex; align-items: center; gap: 8px; }
.nt-asp::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex: none; }
.nt-asp--soft::before { background: var(--sun); box-shadow: 0 0 8px rgba(247, 204, 75, .6); }
.nt-asp--hard::before { background: var(--tense); }

/* колесо карты */
.nt-wheel { margin: 0; position: relative; }
.nt-wheel svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; overflow: visible; }
.nt-wheel figcaption { text-align: center; }
.nw-disc { fill: rgba(8, 18, 74, .72); }
.nw-band { fill: rgba(255, 215, 114, .045); }
.nw-ring { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 1.5; }
.nw-tick { stroke: var(--ink); stroke-opacity: .4; stroke-width: 1; }
.nw-tick--5 { stroke-opacity: .75; }
.nw-div { stroke: rgba(255, 215, 114, .55); stroke-width: 1.3; }
.nw-sign { fill: none; stroke: var(--glow-hi); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nw-sign .fill { fill: var(--glow-hi); stroke: none; }
.nw-cusp { stroke: var(--ink); stroke-opacity: .28; stroke-width: 1.2; }
.nw-axis { stroke: var(--glow); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 215, 114, .7)); }
.nw-axis-label { fill: var(--glow); font: 600 30px/1 var(--text); letter-spacing: .02em; }
.nw-hnum { fill: var(--mute); font: 400 34px/1 var(--mono); text-anchor: middle; dominant-baseline: central; }
.nw-core { fill: rgba(4, 8, 36, .55); stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.2; }
.nw-lead { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.nw-dot { fill: var(--ink); }
.nw-badge circle { fill: var(--glass); stroke: var(--ink); stroke-width: 1.8; }
.nw-badge g { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nw-badge .fill { fill: var(--ink); stroke: none; }
.nw-planet[data-key=sun] .nw-badge circle { stroke: var(--glow); stroke-width: 2.6; }
.nw-approx .nw-badge circle { stroke-dasharray: 5 5; stroke-opacity: .8; }
.nw-r { fill: var(--tense); font: 700 28px/1 var(--text); }
.nw-asp { fill: none; stroke-width: 2; stroke-linecap: round; }
.nw-asp--soft { stroke: var(--sun); stroke-opacity: .85; }
.nw-asp--hard { stroke: var(--tense); stroke-opacity: .9; }
.nw-asp--approx { stroke-dasharray: 8 8; }
.nw-planet, .nw-asp { animation: nt-in .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes nt-in { from { opacity: 0; } }

/* расшифровка */
.nt-reads { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.nt-read { padding: 18px 20px; border: 1px solid rgba(255, 215, 114, .22); border-radius: 18px; background: rgba(255, 255, 255, .03); }
.nt-read__head { display: flex; align-items: center; gap: 12px; }
.nt-read__head .glyph { width: 30px; height: 30px; padding: 5px; flex: none; color: var(--glow); border: 1px solid rgba(255, 215, 114, .35); border-radius: 50%; }
.nt-read h3 { font: 400 1.3rem/1.2 var(--display); color: var(--title); }
.nt-read h4 { margin-top: 16px; font: 500 .95rem/1.3 var(--text); color: var(--ink); }
.nt-read p { margin-top: 8px; color: var(--mute); line-height: 1.6; font-size: .95rem; }
.nt-read a { display: inline-flex; align-items: center; min-height: 44px; color: var(--glow-hi); text-decoration-color: rgba(255, 215, 114, .45); text-underline-offset: .2em; }
.nt-read .nt-soon { font-style: italic; }
.nt-next p { margin-top: 12px; color: var(--mute); max-width: 62ch; }
.nt-next .pg__cta-go { margin-top: 20px; }

/* ---------- толкования и оглавления ---------- */
.nt-text p:first-child { margin-top: 0; }
.nt-try p { margin-top: 12px; color: var(--mute); max-width: 62ch; }
.nt-try h2 { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display); color: var(--title); }
.nt-try__go { margin-top: 20px !important; }
.nt-links, .nt-toc { margin-top: clamp(32px, 4vw, 48px); }
.nt-links h2, .nt-toc h2 { font: 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.2 var(--display); color: var(--title); }
.nt-links .g { font-family: var(--text); }
.nt-cur { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--glow-hi);
  border: 1px solid var(--glow); border-radius: 16px; background: rgba(255, 215, 114, .1); }
.nt-cur .g { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.15rem; color: var(--glow); border: 1px solid rgba(255, 215, 114, .5); border-radius: 50%; }
.nt-cur small { display: block; margin-top: 2px; color: var(--mute); font-size: .8rem; }
.nt-all { margin-top: 22px; }
.nt-all a, .nt-empty a { display: inline-flex; align-items: center; min-height: 44px; color: var(--glow-hi); text-decoration-color: rgba(255, 215, 114, .45); text-underline-offset: .2em; }
.nt-jump { margin-top: 26px; }
.nt-jump ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.nt-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--glow-hi); text-decoration: none;
  border: 1px solid rgba(255, 215, 114, .4); border-radius: 999px; background: rgba(255, 215, 114, .05); }
.nt-jump a:hover { background: rgba(255, 215, 114, .14); border-color: var(--glow); }
.nt-links[id] { scroll-margin-top: 84px; }
.nt-empty { margin-top: 26px; font-size: 1rem; }

@media (max-width: 900px) {
  .nt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nt-calc > h2 { font-size: 1.35rem; }    /* заголовок формы в одну строку: кнопка ближе к первому экрану */
  .nt-form .row3 { grid-template-columns: minmax(0, 1fr); }
  .nt-form .btn { width: 100%; }
  .nt-try .btn, .nt-next .btn { width: 100%; white-space: normal; text-align: center; }
  .nt-read { padding: 16px; }
  .nt-table.pg-table th, .nt-table.pg-table td { padding: 9px 8px; }
  .nt-table .nt-pl { gap: 6px; }
  .nt-result .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nt-result .pg-facts div { padding: 12px 14px; }
  .nt-result .pg-facts dd { font-size: 1.25rem; }
  .nt-wheel { margin: 0 -14px; }           /* колесо шире на телефоне: заходит в поля карты */
  .nt-wheel svg { max-width: none; }
  .nt-wheel figcaption { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-planet, .nw-asp, .nt-form .btn[data-busy] svg { animation: none; }
}