/* AstroPlus 2.0 „Aura”: komponenty narzędzi wspólne dla strony głównej i stron narzędzi
   (/narzedzia-ai/, /raport-urodzeniowy/, /dopasowanie-znakow-zodiaku/, /kalkulator-ascendentu/, /ksiezyc-dzisiaj/).
   Zgodność (koła aur) i karty narzędzi przeniesione z home.css bez zmian. */

/* ---------- zgodność ---------- */
.compat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.compat__txt { display: grid; gap: 20px; min-width: 0; }
.compat__txt > .muted { max-width: 44ch; }
.compat__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compat__form select { font-size: 1.05rem; }
.venn { position: relative; aspect-ratio: 3 / 2; max-width: 100%; }
.venn__c { position: absolute; width: 60%; aspect-ratio: 1; top: 6%; border-radius: 50%; overflow: hidden; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.venn__c .aura-fill { border-radius: 50%; }
.venn__c--a { left: 4%; }
.venn__c--b { right: 4%; mix-blend-mode: multiply; }
.venn.is-updating .venn__c--a { transform: translateX(-6%); }
.venn.is-updating .venn__c--b { transform: translateX(6%); }
.venn__c .g { position: absolute; z-index: 1; width: 34px; height: 34px; top: 50%; transform: translateY(-50%); color: var(--card-ink); }
.venn__c--a .g { left: 20%; }
.venn__c--b .g { right: 20%; }
.venn__pct {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: clamp(108px, 12vw, 140px); aspect-ratio: 1;
  border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-content: center; text-align: center;
  font-family: var(--f-display); font-style: italic; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; box-shadow: 0 14px 34px -16px rgba(30, 27, 46, .5);
}
.venn__pct small { display: block; font: 600 .58rem/1 var(--f-ui); font-style: normal; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; color: var(--ink-soft); }
.compat__res { display: grid; gap: 10px; }
.compat__res h3 { font-size: 1.6rem; }
@media (max-width: 860px) { .compat { grid-template-columns: 1fr; } }

/* ---------- Narzędzia AI: karty w ramie tarota ---------- */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tcard {
  position: relative; background: var(--night); color: var(--on-night); aspect-ratio: 5 / 8; max-width: 100%; border-radius: 6px;
  padding: 22px; display: grid; grid-template-rows: auto 1fr auto; text-decoration: none; isolation: isolate;
  outline: 1px solid var(--line-night); outline-offset: -10px; overflow: hidden; transition: outline-color .3s;
}
.tcard .corner { position: absolute; width: 34px; color: var(--star); }
.tcard .corner.tl { top: 6px; left: 6px; }
.tcard .corner.tr { top: 6px; right: 6px; }
.tcard .corner.bl { bottom: 6px; left: 6px; }
.tcard .corner.br { bottom: 6px; right: 6px; }
.tcard__top { text-align: center; color: var(--star); padding-top: 14px; }
.tcard__art { display: grid; place-items: center; position: relative; }
.tcard__art .aura { width: 120%; left: -10%; top: -6%; opacity: .5; }
.tcard__art .ill { position: relative; width: 72%; color: var(--star); }
.tcard__bottom { text-align: center; display: grid; gap: 8px; padding-bottom: 12px; justify-items: center; }
.tcard__name { font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.1; }
.tcard__desc { font: var(--t-sm)/1.45 var(--f-ui); color: var(--on-night-soft); }
.tcard:hover { outline-color: var(--star); }
@media (max-width: 1000px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tools { grid-template-columns: 1fr; } .tcard { aspect-ratio: 4 / 5; } }

/* ---------- strony narzędzi: wspólne ---------- */
.compat__links { display: flex; flex-wrap: wrap; gap: 10px 24px; font: var(--t-sm)/1.4 var(--f-ui); }
.compat__res h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* ---------- /ksiezyc-dzisiaj/ ---------- */
.moon-hero { padding-block: clamp(40px, 6vw, 80px); }
.moon-hero__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.moon-hero__art { width: min(340px, 70vw); justify-self: center; filter: drop-shadow(0 0 60px rgba(233, 213, 166, .25)); }
.moon-hero__art svg { width: 100%; height: auto; display: block; }
.moon-hero__txt { display: grid; gap: 14px; min-width: 0; }
.moon-hero__txt h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.moon-hero__phase { font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--star); }
.moon-hero__desc { color: var(--on-night-soft); max-width: 40ch; }
.moon-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0; border-top: 1px solid var(--line-night); max-width: 520px; }
.moon-stats > div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-night); }
.moon-stats dt { font: 600 .66rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--on-night-soft); }
.moon-stats dd { margin: 6px 0 0; font: var(--t-sm)/1.3 var(--f-ui); display: flex; align-items: center; gap: 8px; }
.moon-stats dd a { display: inline-flex; align-items: center; gap: 8px; }
.moon-stats .g { width: 18px; height: 18px; }
.moon-you { font: var(--t-sm)/1.5 var(--f-ui); color: var(--star); max-width: 46ch; }
.moon-mood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.moon-mood > div { display: grid; gap: 10px; padding: 22px 22px 22px 0; align-content: start; }
.moon-mood > div:not(:last-child) { border-right: 1px solid var(--line); }
.moon-mood > div:not(:first-child) { padding-left: 22px; }
.moon-mood p { font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.2; }
.moon-more { margin-top: 24px; }
.moon-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.moon-next__item { display: grid; gap: 8px; justify-items: start; padding: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 55%, white); border-radius: 6px; }
.moon-next__icon { width: 48px; color: var(--ink); }
.moon-next__icon svg { width: 100%; height: auto; display: block; }
.moon-next__item h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.5rem; }
.moon-next__date { font: 600 var(--t-sm)/1.3 var(--f-ui); }
.moon-next__item .muted { font: var(--t-sm)/1.3 var(--f-ui); }
.moon-cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.moon-cal__day { display: grid; gap: 6px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: var(--t-xs)/1.3 var(--f-ui); }
.moon-cal__date b { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-right: 4px; }
.moon-cal__icon { width: 28px; color: var(--ink); }
.moon-cal__icon svg { width: 100%; height: auto; display: block; }
.moon-cal__sign { display: inline-flex; align-items: center; gap: 6px; }
.moon-cal__sign .g { width: 14px; height: 14px; }
.moon-cal__note { color: var(--ink-soft); }
.moon-cal__day.is-event { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.moon-cal__day.is-event .moon-cal__note { color: var(--ink); font-weight: 600; }
.moon-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--ink); }
.moon-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 22px; }
.moon-phases li { display: grid; gap: 8px; align-content: start; }
.moon-phases li > span { width: 40px; color: var(--ink); }
.moon-phases li > span svg { width: 100%; height: auto; display: block; }
.moon-phases h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.35rem; }
.moon-phases h3 small { font: 600 .6rem/1 var(--f-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; padding: .35em .55em; border: 1px solid var(--ink); border-radius: 99px; margin-left: 6px; vertical-align: middle; }
.moon-phases p { font: var(--t-sm)/1.5 var(--f-ui); color: var(--ink-soft); }
@media (max-width: 960px) {
  /* tarcza mała, w rogu obok okruszków i daty, żeby H1 nie zaczynał się dopiero w połowie ekranu */
  .moon-hero { padding-top: clamp(24px, 5vw, 40px); }
  .moon-hero__grid { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px 16px; align-items: center; }
  .moon-hero__txt { display: contents; }
  .moon-hero__art { grid-column: 2; grid-row: 1 / span 2; width: 112px; justify-self: end; filter: drop-shadow(0 0 30px rgba(233, 213, 166, .3)); }
  .moon-hero__txt > * { grid-column: 1 / -1; }
  .moon-hero__txt > .crumbs, .moon-hero__txt > .label { grid-column: 1; }
  .moon-next, .moon-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moon-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .moon-mood { grid-template-columns: 1fr; }
  .moon-mood > div { border-right: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line); }
  .moon-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .moon-cal__sign span { display: none; }
}

/* ---------- tabela zgodności 12 × 12 ---------- */
.cmx-wrap { overflow-x: auto; }
.cmx { border-collapse: collapse; width: 100%; min-width: 720px; font: var(--t-xs)/1 var(--f-ui); }
.cmx th, .cmx td { padding: 9px 4px; text-align: center; border: 1px solid var(--line); }
.cmx thead th .g { width: 18px; height: 18px; }
.cmx tbody th { text-align: left; padding-inline: 10px; white-space: nowrap; font-weight: 400; }
.cmx tbody th a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: var(--t-sm)/1 var(--f-ui); }
.cmx tbody th .g { width: 16px; height: 16px; }
.cmx td { background: color-mix(in srgb, var(--ink) calc(var(--v, 0) * 22%), transparent); color: var(--ink); font-weight: 600; }
.cmx td.is-pick { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- /raport-urodzeniowy/ ---------- */
.r-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 64px); }
.r-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.r-hero__txt { display: grid; gap: 20px; min-width: 0; }
.r-hero__txt h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.r-hero__txt .lead { max-width: 34rem; color: var(--ink-lead); }
.r-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.r-hero__wheel { position: relative; width: min(460px, 80vw); justify-self: center; color: var(--ink); }
.r-hero__wheel > .aura { width: 130%; left: -15%; top: -15%; }
.r-hero__wheel .ill { position: relative; z-index: 1; animation: spin 240s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rk-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rk-card { display: grid; gap: 10px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--paper) 55%, white); text-decoration: none; }
.rk-card h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.7rem; }
.rk-card p { font: var(--t-sm)/1.55 var(--f-ui); color: var(--ink-soft); }
.rk-card:hover { border-color: var(--line-strong); }
.rk-inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rk-inc > div { display: grid; gap: 8px; padding: 24px 22px 24px 0; border-bottom: 1px solid var(--line); align-content: start; }
.rk-inc > div:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.rk-inc > div:not(:nth-child(3n+1)) { padding-left: 22px; }
.rk-inc h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.45rem; }
.rk-inc p { font: var(--t-sm)/1.55 var(--f-ui); color: var(--ink-soft); }
@media (max-width: 900px) {
  .r-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .r-hero__wheel { width: min(300px, 70vw); }
  .rk-three { grid-template-columns: 1fr; }
  .rk-inc { grid-template-columns: 1fr; }
  .rk-inc > div { border-right: 0 !important; padding-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .r-hero__wheel .ill { animation: none; } }

/* ---------- lista oczekujących (panel nocny) ---------- */
.wl { overflow: hidden; }
.wl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.wl__txt { display: grid; gap: 14px; }
.wl__txt h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.wl__form { display: grid; gap: 18px; }
.wl__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; }
.wl__form .btn { justify-self: start; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .wl__grid, .wl__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- /narzedzia-ai/: darmowe narzędzia ---------- */
.free { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.free__card { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; background: color-mix(in srgb, var(--paper) 55%, white); }
.free__art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; color: var(--card-ink); }
.free__art .ill { position: relative; z-index: 1; width: 52%; }
.free__name { font-family: var(--f-display); font-style: italic; font-size: 1.5rem; line-height: 1.1; }
.free__desc { font: var(--t-sm)/1.5 var(--f-ui); color: var(--ink-soft); }
.free__card:hover { border-color: var(--line-strong); }
@media (max-width: 1000px) { .free { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .free { grid-template-columns: 1fr; } }