/* AstroPlus 2.0 „Aura”: Wielka Trójka, interaktywny kalkulator w trzech krokach (strona główna
   i /kalkulator-ascendentu/). Wzorzec sekcji: prototyp/home.css (FLAGSHIP); kroki, pola „Niebo urodzin”
   (kalendarz z fazami Księżyca, pasek doby, lista miast) i odsłanianie kart nowe. */

/* clip zamiast hidden: przycina tak samo, ale nie tworzy kontenera przewijania, więc karty mogą się przyklejać */
.flag, .section.night.flag { position: relative; overflow: hidden; overflow: clip; }
/* strona kalkulatora zaczyna się panelem: okruszki i H1 w nagłówku panelu nad formularzem i kartami */
.flag--tool { margin-top: 8px; padding-top: clamp(26px, 4vw, 56px); }
.flag__head { grid-column: 1 / -1; order: -2; display: grid; gap: 14px; max-width: 760px; }
.flag__head h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); color: var(--on-night); }
.flag__lead { font: 400 clamp(1.05rem, 1.6vw, 1.25rem)/1.5 var(--f-ui); color: var(--on-night-soft); max-width: 46ch; }
.flag__wheel { position: absolute; z-index: 0; width: min(980px, 150vw); aspect-ratio: 1; right: -24%; top: -8%; color: var(--star); opacity: .22; pointer-events: none; }
.flag__wheel .aura { width: 90%; left: 5%; top: 5%; opacity: .9; }
.flag__wheel .ill { position: relative; width: 100%; animation: spin 300s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flag__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.flag__intro { display: grid; gap: 20px; min-width: 0; }
.flag__intro h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.flag__intro > .muted { max-width: 46ch; }
.flag__b3 { display: grid; gap: 18px; min-width: 0; position: sticky; top: calc(var(--head-h) + 24px); }

/* ---------- kroki ---------- */
.b3 { display: grid; gap: 18px; margin-top: 4px; }
.b3__progress { display: flex; gap: 8px; }
.b3__progress li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid var(--line-night);
  font: 600 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-soft); transition: border-color .4s, color .4s, background .4s;
}
.b3__progress .star { width: 13px; height: 13px; opacity: .35; transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1.6); }
.b3__progress li[aria-current="step"] { border-color: var(--star); color: var(--on-night); }
.b3__progress li.is-done { background: rgba(235, 216, 172, .14); border-color: var(--star); color: var(--star); }
.b3__progress li.is-done .star { opacity: 1; transform: rotate(90deg) scale(1.15); color: var(--star); }
.b3__step { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; animation: step-in .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }
.b3__q { font: 400 italic clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--f-display); color: var(--on-night); padding: 0; margin-bottom: 14px; }
.b3__lbl { font: 600 .7rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-soft); }
.b3__hint { font: var(--t-sm)/1.55 var(--f-ui); color: var(--on-night-soft); max-width: 52ch; min-height: 3em; }
.b3__hint:has(.b3__hintmoon) { display: flex; gap: 12px; align-items: flex-start; }
.b3__hint b { color: var(--star); font-weight: 600; }
.b3__hintmoon { flex: none; width: 30px; height: 30px; color: var(--star); }
.b3__hintmoon svg, .b3day__moon svg { display: block; width: 100%; height: 100%; }

/* duże pola: kursywa Taylor Belle na złotej linii */
.b3__big {
  font: 300 italic clamp(2.2rem, 4vw, 2.8rem)/1.1 var(--f-display); color: var(--on-night); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-night); border-radius: 0; padding: 4px 0 8px; width: 100%; min-width: 0;
  letter-spacing: .04em; caret-color: var(--star); transition: border-color .3s, box-shadow .3s;
}
.b3__big::placeholder { color: var(--on-night-soft); opacity: .4; }
.b3__big:focus { outline: none; border-bottom-color: var(--star); box-shadow: 0 1px 0 var(--star); }
.b3__big[aria-invalid="true"] { border-bottom-color: #F2A3AE; box-shadow: 0 1px 0 #F2A3AE; }
.b3__big:disabled { opacity: .35; }

/* data krok po kroku: linia podsumowania, rok (dekada + kafelki lat), miesiąc, dzień z fazą Księżyca */
.b3sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.b3sum__chip {
  padding: 9px 15px; border: 1px solid var(--line-night); border-radius: 999px; background: rgba(235, 216, 172, .1); cursor: pointer;
  font: 600 .95rem/1 var(--f-ui); letter-spacing: .03em; color: var(--star); transition: border-color .25s, background .25s;
}
.b3sum__chip:hover, .b3sum__chip.is-on { border-color: var(--star); }
.b3sum__hint { font: var(--t-xs)/1.3 var(--f-ui); color: var(--on-night-soft); }
.b3sub { display: grid; gap: 10px; min-width: 0; animation: step-in .4s cubic-bezier(.2, .7, .2, 1); }
/* karta roku: zakres ze strzałkami, kafelki lat, oś dekad (jedna całość zamiast dwóch osobnych siatek) */
.b3yr { display: grid; gap: 14px; padding: 12px 12px 10px; border: 1px solid var(--line-night); border-radius: 18px; background: rgba(21, 19, 31, .22); overflow: hidden; }
.b3yr__head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.b3yr__nav {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-night); border-radius: 50%;
  background: transparent; color: var(--star); cursor: pointer; transition: border-color .25s, background .25s, opacity .25s;
}
.b3yr__nav svg { width: 18px; height: 18px; }
.b3yr__nav:hover:not(:disabled) { border-color: var(--star); background: rgba(235, 216, 172, .1); }
.b3yr__nav:disabled { opacity: .25; cursor: default; }
.b3yr__range { text-align: center; font: 400 italic clamp(1.45rem, 5.4vw, 1.75rem)/1 var(--f-display); color: var(--on-night); letter-spacing: .02em; }
.b3yrs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; touch-action: pan-y; }
.b3yrs.is-next .b3yrs__y { animation: yr-in-next .42s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 22ms); }
.b3yrs.is-prev .b3yrs__y { animation: yr-in-prev .42s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc((9 - var(--n, 0)) * 22ms); }
@keyframes yr-in-next { from { opacity: 0; transform: translateX(18px); } }
@keyframes yr-in-prev { from { opacity: 0; transform: translateX(-18px); } }
.b3yrs__y span {
  display: grid; place-items: center; height: 50px; border: 1px solid var(--line-night); border-radius: 14px; white-space: nowrap;
  /* jednolite cyfry w Jost (w Taylor Belle „3” z płaską górą myli się z „5”: 1943 i 1945) */
  font: 500 1.08rem/1 var(--f-ui); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; color: var(--on-night); transition: background .25s, color .25s, border-color .25s;
}
.b3yr__line { position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--line-night); }
/* position: relative trzyma ukryte pole przy etykiecie; bez tego fokus przewijał stronę do góry sekcji */
.b3yr__d { position: relative; cursor: pointer; }
.b3yr__d span {
  display: grid; justify-items: center; gap: 6px; padding: 2px 0 4px;
  font: 600 .64rem/1 var(--f-ui); letter-spacing: .02em; color: var(--on-night-soft); transition: color .25s;
}
.b3yr__d span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-night); transition: background .25s, transform .3s, box-shadow .3s; }
.b3yr__d:hover span { color: var(--on-night); }
.b3yr__d input:checked + span { color: var(--star); }
.b3yr__d input:checked + span::before { background: var(--star); transform: scale(1.5); box-shadow: 0 0 8px rgba(235, 216, 172, .8); }
.b3yr__d input:focus-visible + span { outline: 1.5px solid var(--star); outline-offset: 2px; border-radius: 6px; }
.b3m { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.b3m__m, .b3yrs__y, .b3day, .b3chip { position: relative; cursor: pointer; }
.b3m__m span {
  display: grid; place-items: center; height: 40px; border: 1px solid var(--line-night); border-radius: 999px;
  font: 600 .7rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-soft);
  transition: background .25s, color .25s, border-color .25s;
}
.b3m__m:hover span, .b3yrs__y:hover span { border-color: var(--star); color: var(--on-night); }
.b3m__m input:checked + span, .b3yrs__y input:checked + span { background: var(--star); border-color: var(--star); color: #2A2440; }
.b3yrs__y input:disabled + span { opacity: .25; cursor: default; }
.b3m__m input:focus-visible + span, .b3yrs__y input:focus-visible + span,
.b3chip input:focus-visible + span { outline: 1.5px solid var(--star); outline-offset: 3px; }

/* reflektor (telefon): odsłonięta karta duża, z podpisem, zanim trafi do tacy */
.b3spot { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 6px 0 4px; }
.b3spot .label { color: var(--star); }
.b3spot__card { width: min(210px, 56vw); perspective: 1000px; }
.b3spot__card .zcard { width: 100%; cursor: default; }
.b3spot.is-on .zcard { animation: flip-in 1s cubic-bezier(.2, .7, .2, 1) backwards, halo 6s ease-in-out 1s infinite; }
.b3spot.is-on .cl-lines path { animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(.6s + var(--k, 0) * 90ms); }
.b3spot__title { font: 400 italic clamp(1.9rem, 7vw, 2.3rem)/1.05 var(--f-display); color: var(--on-night); margin-top: 6px; }
.b3spot__txt { display: grid; gap: 10px; justify-items: center; max-width: 34ch; font: 1rem/1.55 var(--f-ui); color: var(--on-night-soft); }
.b3spot__moon { display: inline-flex; gap: 10px; align-items: center; text-align: left; font-size: var(--t-sm); }
.b3spot__moon b, .b3spot__note b { color: var(--star); font-weight: 600; }
.b3spot__note { font-size: var(--t-sm); color: var(--star); }
.b3spot__nav { flex-direction: column; gap: 14px; margin-top: 6px; }
.b3cal { display: grid; gap: 4px; padding: 14px 12px 10px; border: 1px solid var(--line-night); border-radius: 18px; background: rgba(21, 19, 31, .22); }
.b3cal__head, .b3cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.b3cal__head span { text-align: center; font: 600 .62rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-soft); opacity: .75; padding-bottom: 6px; }
.b3cal__grid { animation: step-in .45s cubic-bezier(.2, .7, .2, 1); }
.b3day { display: grid; justify-items: center; gap: 4px; padding: 7px 0 8px; border-radius: 12px; color: var(--on-night); transition: background .2s, color .2s; }
.b3day:hover { background: rgba(235, 216, 172, .1); }
.b3day__n { font: 500 .92rem/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.b3day__moon { width: 15px; height: 15px; color: var(--star); opacity: .7; }
.b3day.is-full .b3day__moon { opacity: 1; filter: drop-shadow(0 0 4px rgba(235, 216, 172, .75)); }
.b3day:has(input:checked) { background: var(--star); color: #2A2440; }
.b3day:has(input:checked) .b3day__moon { color: #2A2440; opacity: .85; filter: none; }
.b3day:has(input:focus-visible) { outline: 1.5px solid var(--star); outline-offset: 1px; }
.b3day:has(input:disabled) { opacity: .28; cursor: default; background: none; }

/* godzina: duże gg:mm, „nie znam”, pasek doby z kolorem nieba */
.b3t { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; }
.b3t__clock { display: flex; align-items: flex-end; gap: 6px; }
.b3t__clock .b3__big { width: 1.7em; text-align: center; font-size: clamp(2.8rem, 5vw, 3.6rem); letter-spacing: .02em; }
.b3t__colon { font: 300 italic clamp(2.4rem, 4.4vw, 3.2rem)/1 var(--f-display); color: var(--star); padding-bottom: 14px; }
.b3chip { margin-bottom: 12px; }
.b3chip span {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid var(--line-night); border-radius: 999px;
  font: 500 var(--t-sm)/1 var(--f-ui); color: var(--on-night-soft); transition: border-color .25s, color .25s, background .25s;
}
.b3chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .25s; }
.b3chip:hover span { border-color: var(--star); color: var(--on-night); }
.b3chip input:checked + span { border-color: var(--star); color: var(--star); background: rgba(235, 216, 172, .12); }
.b3chip input:checked + span::before { background: currentColor; }
.b3sky { display: grid; gap: 8px; transition: opacity .3s; }
.b3sky.is-off { opacity: .4; }
.b3sky__track {
  position: relative; height: 40px; border-radius: 999px; background: rgba(21, 19, 31, .4);
  box-shadow: inset 0 0 0 1px var(--line-night); cursor: pointer; touch-action: none;
}
.b3sky.is-off .b3sky__track { cursor: default; }
.b3sky__track:focus-visible { outline: 1.5px solid var(--star); outline-offset: 3px; }
.b3sky__mark {
  position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: #FFF6E0; border: 2px solid #2A2440; box-shadow: 0 0 22px 4px rgba(255, 214, 150, .7); transition: left .15s;
}
.b3sky__mark.is-night { background: transparent; border: 0; box-shadow: inset -7px 1px 0 0 #FFF6E0, 0 0 16px 2px rgba(235, 216, 172, .35); }
.b3sky__ticks { display: flex; justify-content: space-between; font: 500 .66rem/1 var(--f-ui); letter-spacing: .08em; color: var(--on-night-soft); opacity: .8; }
.b3sky__txt { font: var(--t-sm)/1.55 var(--f-ui); color: var(--on-night-soft); min-height: 3.1em; max-width: 52ch; }
.b3sky__txt b { color: var(--star); font-weight: 600; }

/* miejsce: własna lista podpowiedzi zamiast <datalist> */
.b3p { display: grid; gap: 8px; }
.b3p__box { position: relative; }
.b3p__icon { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -11px; color: var(--star); }
.b3p__box .b3__big { padding-left: 32px; font-size: clamp(1.9rem, 3.4vw, 2.4rem); letter-spacing: 0; }
.b3p__list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--night); border: 1px solid var(--line-night); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(10, 8, 20, .7);
}
.b3p__list [role="option"] { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.b3p__list .is-active { background: rgba(235, 216, 172, .14); }
.b3p__name { font: 400 1.05rem/1.3 var(--f-ui); color: var(--on-night); }
.b3p__name b { color: var(--star); font-weight: 600; }
.b3p__meta { font: .74rem/1.3 var(--f-ui); color: var(--on-night-soft); white-space: nowrap; }
.b3p__none { padding: 12px; font: var(--t-sm)/1.5 var(--f-ui); color: var(--on-night-soft); }
.b3p__pin { display: flex; gap: 10px; align-items: center; font: var(--t-sm)/1.4 var(--f-ui); color: var(--on-night-soft); }
.b3p__pin .star { width: 14px; height: 14px; color: var(--star); flex: none; }
.b3p__pin b { color: var(--on-night); font-weight: 600; }
.b3__nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.b3__nav .btn[disabled] { opacity: .35; }
.b3__done { display: grid; gap: 14px; animation: step-in .5s cubic-bezier(.2, .7, .2, 1); }
.b3__elements { font: var(--t-sm)/1.6 var(--f-ui); color: var(--on-night-soft); }
.b3__elements b { color: var(--star); font-weight: 600; }
.b3__bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: rgba(255, 255, 255, .08); }
.b3__bar span { display: block; height: 100%; }
.b3__signs { display: grid; gap: 10px; }
.b3__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.b3__chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--line-night); border-radius: 999px;
  font: 500 .82rem/1.2 var(--f-ui); text-decoration: none; color: var(--on-night); transition: border-color .25s, background .25s;
}
.b3__chips a:hover { border-color: var(--star); background: rgba(235, 216, 172, .1); }
.b3__chips .g { width: 16px; height: 16px; color: var(--star); }
.b3 .btn-mini { --card-ink: var(--star); --a3: #2A2440; }
.b3__more { display: flex; gap: 22px; flex-wrap: wrap; }
.b3__link {
  background: none; border: 0; padding: 0; cursor: pointer; font: 500 var(--t-sm)/1.4 var(--f-ui); color: var(--on-night-soft);
  text-decoration: underline; text-decoration-color: var(--line-night); text-underline-offset: .25em;
}
.b3__link:hover { color: var(--star); }
.b3__notes { display: grid; gap: 8px; font: var(--t-sm)/1.5 var(--f-ui); color: var(--on-night-soft); }
.b3__notes li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; }
.b3__notes li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--star); }

/* ---------- karty: odwrócone „?” do czasu odpowiedzi, potem obrót i rysowanie gwiazdozbioru ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; perspective: 1200px; }
.trio__fig { display: grid; gap: 12px; align-content: start; min-width: 0; margin: 0; }
.trio__fig .label { color: var(--star); }
.trio__card { position: relative; }
.trio__card .zcard { width: 100%; cursor: default; }
.trio__fig.is-set .zcard { animation: flip-in .9s cubic-bezier(.2, .7, .2, 1) backwards, halo 6s ease-in-out .9s infinite; }
.trio__fig.is-set .cl-lines path { animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(.5s + var(--k, 0) * 90ms); }
.trio__fig.is-next .zcard--unknown { box-shadow: 0 0 0 1px var(--star), 0 0 40px -10px rgba(235, 216, 172, .6); animation: pulse 2.4s ease-in-out infinite; }
@keyframes flip-in { from { transform: rotateY(-95deg) translateY(16px); opacity: 0; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 1px var(--star), 0 0 60px -6px rgba(235, 216, 172, .75); } }
.trio__txt { font: .9rem/1.5 var(--f-ui); color: var(--on-night-soft); min-height: 4.5em; }
.trio__txt b { color: var(--on-night); font-weight: 600; }
.trio__deg { display: block; font-size: .78rem; color: var(--star); margin-top: 4px; }

/* ---------- zachęta do raportu ---------- */
.flag__upsell {
  position: relative; z-index: 1; margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-night);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end;
}
.flag__big { font-family: var(--f-lead); font-style: var(--lead-style); font-weight: var(--lead-weight); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
.flag__upsell .chips { margin-top: 18px; }
.flag__form { display: grid; gap: 12px; }
.flag__formrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.flag .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
  .flag__grid, .flag__upsell { grid-template-columns: 1fr; }
  .flag__b3 { position: static; order: -1; }
  /* w trakcie kroków karty jadą na górze ekranu w małej tacy, żeby każde odsłonięcie było widać nad kalendarzem */
  .flag.is-filling .flag__b3 {
    position: sticky; top: calc(var(--head-h) + 8px); z-index: 4; gap: 0; padding: 10px 12px 12px;
    background: #3F3759; border: 1px solid var(--line-night); border-radius: 18px; box-shadow: 0 18px 30px -18px rgba(10, 8, 20, .8);
  }
  .flag.is-filling #b3-label, .flag.is-filling .trio__txt, .flag.is-filling .b3__notes, .flag.is-filling .zcard__q span { display: none; }
  .flag.is-filling .trio { grid-template-columns: repeat(3, 78px); justify-content: space-around; gap: 10px; }
  .flag.is-filling .trio__fig { gap: 6px; }
  .flag.is-filling .trio__fig .label { font-size: .58rem; letter-spacing: .14em; text-align: center; }
}
@media (max-width: 560px) {
  .b3cal { padding-inline: 6px; }
  .b3day__n { font-size: .85rem; }
  .b3p__list [role="option"] { flex-direction: column; align-items: flex-start; gap: 2px; }
  .trio { gap: 10px; }
  .trio__txt { font-size: .78rem; min-height: 0; }
  .flag__formrow { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flag__wheel .ill, .trio__fig .zcard, .b3__step, .b3cal__grid, .b3sub, .b3spot .zcard, .b3spot .cl-lines path, .b3yrs__y { animation: none !important; }
  .b3sky__mark { transition: none; }
}