/* Kalkulator Human Design w języku v2 (home-motywy-v2-b-3).
   Ładowany po styles.css, site-header-night.css i site-footer.css.
   Dwa motywy na tym samym HTML: html[data-theme="light"] (beż, jak jasne płyty
   v2) i html[data-theme="dark"] (noc oliwkowa, jak hero v2). Ustawia je
   skrypt w <head> z ?motyw=jasny|ciemny. Mobile-first. */

/* ------------------------------------------------------------------------
   TOKENY
   Rodzina marki 1:1 z propozycja-d.css (.propozycja-d). Każdy motyw deklaruje
   parę tło/tusz jak płyty v2 (--pl-*), plus tokeny bodygrafu (--hd-*).
   ------------------------------------------------------------------------ */

html[data-theme] {
  --noc: #1c2610;
  --bez: #ede3d6;
  --cegla: #8c2f0a;
  --sun: #ffc20a;
  --olive: #476216;
  --coffee: #201818;
  --krem: #f6efe4;
  --krem-mut: #d9cfbc;
  --bez-mut: #4c4034;

  --font: Roundo, Avenir Next, Segoe UI, system-ui, sans-serif;
  /* Margines boczny strony: nagłówek, treść i stopka biorą ten sam token,
     więc lewa krawędź treści stoi pod logo. Do 1180px kolumna jak na reszcie
     v2 (max 1180px, wyśrodkowana); poniżej płynny margines 24–64px zamiast
     sztywnych 16px (390: 24, 768: 38, 960: 48, 1100: 55, 1280: 64). */
  --gutter: max(clamp(24px, 5vw, 64px), calc((100vw - 1180px) / 2));
  --r-panel: clamp(18px, 1.8vw, 26px);
  --r-field: 14px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Jasny: płyta beżowa v2 (.plate-bez) */
html[data-theme="light"] {
  color-scheme: light;
  --pl-bg: var(--bez);
  --pl-ink: var(--coffee);
  --pl-ink-2: var(--bez-mut);
  --pl-accent: var(--cegla);
  --pl-rule: rgba(32, 24, 24, 0.2);
  --pl-focus: var(--cegla);
  --pl-btn-bg: var(--olive);
  --pl-btn-ink: var(--krem);
  --pl-btn-hover: #354a0f;
  --panel: var(--krem);
  --panel-2: #efe6d8;       /* kolumny planet, zaznaczona podpowiedź */
  --field-bg: #fbf7f0;
  --field-line: #8f806c;    /* 3,6:1 do tła pola */
  --error: #a1260d;         /* 6,3:1 na kremie */
  --error-bg: #f7e1d6;

  /* Bodygraf: HD klasycznie, Design czerwony, Personality czarny */
  --hd-design: #c0161c;           /* czerwień jak HD, 5,6:1 na kremie (tekst kolumny) */
  --hd-personality: var(--coffee);
  --hd-c-yellow: #ffd24d;  /* głowa, G — układ kolorów jak w HD, odcienie z palety Adama (słońce) */
  --hd-c-green: #b7c66f;  /* ajna, śledziona (jasna oliwka) */
  --hd-c-blue: #9fb7c4;  /* gardło (niebo) */
  --hd-c-orange: #e9915c;  /* serce, splot, sakral, korzeń (terakota) */
  --hd-silhouette: #e8dccb;
  --hd-tube: #fbf7f0;
  --hd-center: #fbf7f0;
  --hd-center-stroke: #7d6e5b;
  --hd-gate-label: var(--bez-mut);
  --hd-gate-label-defined: var(--coffee);
  --hd-gate-active: var(--coffee);
  --hd-gate-active-ink: var(--krem);
}

/* Ciemny: płyta nocna v2 (.plate-noc) */
html[data-theme="dark"] {
  color-scheme: dark;
  --pl-bg: var(--noc);
  --pl-ink: var(--krem);
  --pl-ink-2: var(--krem-mut);
  --pl-accent: var(--sun);
  --pl-rule: rgba(246, 239, 228, 0.22);
  --pl-focus: var(--sun);
  --pl-btn-bg: var(--sun);
  --pl-btn-ink: var(--coffee);
  --pl-btn-hover: #ffd24d;
  --panel: #243119;
  --panel-2: #2c3a1f;
  --field-bg: #18210d;
  --field-line: #8f8c78;    /* 4,6:1 do tła pola */
  --error: #ff9f80;         /* 6,9:1 na panelu */
  --error-bg: #3a2414;

  /* Bodygraf: Personality zostaje strumieniem wysokiego kontrastu (krem),
     Design ciepła terakota. */
  --hd-design: #ff6f61;           /* czerwień, 5,8:1 na panelu */
  --hd-personality: var(--krem);
  --hd-c-yellow: #ffd24d;
  --hd-c-green: #b7c66f;
  --hd-c-blue: #9fb7c4;
  --hd-c-orange: #e9915c;
  --hd-silhouette: #33431f;
  --hd-tube: #1c2610;
  --hd-center: var(--noc);
  --hd-center-stroke: #a89e84;
  --hd-gate-label: var(--krem-mut);
  --hd-gate-label-defined: var(--coffee);
  --hd-gate-active: var(--krem);
  --hd-gate-active-ink: var(--noc);
}

/* ------------------------------------------------------------------------
   PODSTAWA STRONY
   ------------------------------------------------------------------------ */

html:has(.hd-page) {
  background: var(--pl-bg);
  overflow-x: clip;
}

.hd-page {
  --paper: var(--panel);
  --ink: var(--pl-ink);
  --muted: var(--pl-ink-2);
  --line: var(--pl-rule);

  color: var(--pl-ink);
  background: var(--pl-bg);
  font-family: var(--font);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.6;
  caret-color: var(--pl-accent);
}

/* siatka z styles.css to język starej wersji; v2 ma płaski kolor */
.hd-page::before {
  content: none;
}

.hd-page ::selection {
  background: var(--sun);
  color: var(--coffee);
}

.hd-page :focus-visible {
  outline: 3px solid var(--pl-focus);
  outline-offset: 3px;
}

/* nocny pasek bierze krój z body i margines boczny strony (logo nad treścią;
   nadpisuje stałe 16px z site-header-night.css, także poniżej 680px) */
.hd-page .site-header {
  font-family: var(--font);
  padding-inline: var(--gutter);
}

.hd-page h1,
.hd-page h2 {
  color: var(--pl-ink);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.hd-page .eyebrow {
  display: block;
  margin: 0 0 16px;
  color: var(--pl-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Przyciski: pastylki v2 (propozycja-d.css .button) */
.hd-page .button {
  min-height: 54px;
  padding: 0 30px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.hd-page .button-primary,
.hd-page .button-primary:hover,
.hd-page .button-primary:focus-visible {
  border: 1px solid var(--pl-btn-bg);
  background: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  box-shadow: none;
}

.hd-page .button-primary:hover,
.hd-page .button-primary:focus-visible {
  border-color: var(--pl-btn-hover);
  background: var(--pl-btn-hover);
  transform: translateY(-2px);
}

.hd-page .button-secondary {
  border: 1px solid var(--pl-ink);
  background: transparent;
  color: var(--pl-ink);
}

.hd-page .button-secondary:hover,
.hd-page .button-secondary:focus-visible {
  border-color: var(--pl-ink);
  background: var(--pl-ink);
  color: var(--pl-bg);
  transform: translateY(-2px);
}

.hd-page .button svg {
  width: 18px;
  height: 18px;
  transition: transform 220ms var(--ease);
}

.hd-page .button:hover svg {
  transform: translate(3px, 1px);
}

/* ------------------------------------------------------------------------
   UKŁAD: wstęp | formularz, potem wynik
   ------------------------------------------------------------------------ */

.hd-main {
  position: relative;
  width: 100%;
  overflow-x: clip; /* ozdobny bodygraf wychodzi za krawędź, strona nie */
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(96px, 11vw, 160px);
}

.hd-stage {
  position: relative;
  display: grid;
  gap: 32px;
}

/* Ozdobny, uproszczony bodygraf pod wstępem strefy wstęp|formularz
   (hd-bodygraph.js z opcjami labels: false, decorative: true): sylwetka,
   puste kanały, kolorowe centra, bez numerów. Od 960px stoi absolutnie
   w .hd-stage, pod leadem, w kolumnie tekstu (położenie wybrane przez klienta
   w narzędziu ?ustaw=1, niżej w bloku siatki). Poniżej 960px nie ma na niego
   miejsca, więc się chowa. Znika też po policzeniu grafu. Kolory z tokenów
   motywu. Przezroczystość z narzędzia: jasny 0.8 / centra 0.8, ciemny 0.65 /
   centra 0.7. */
.hd-decor {
  display: none;
  pointer-events: none;
  opacity: 0.8;
}

html[data-theme="dark"] .hd-decor {
  opacity: 0.65;
}

.hd-decor[hidden] {
  display: none;
}

.hd-decor .hd-bodygraph {
  width: 100%;
  height: auto;
  display: block;
}

.hd-decor .hd-center {
  opacity: 0.8;
}

html[data-theme="dark"] .hd-decor .hd-center {
  opacity: 0.7;
}

.hd-intro,
.hd-form-card {
  position: relative;
  z-index: 1;
}

.hd-intro {
  max-width: 34rem;
}

.hd-intro h1 {
  margin: 0 0 22px;
  max-width: 12ch;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.04;
}

.hd-lead {
  margin: 0;
  max-width: 32rem;
  color: var(--pl-ink-2);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.62;
}

html[data-theme="dark"] .hd-lead {
  font-weight: 300;
}

/* Siatka wstęp | formularz od 960px. Kolumna formularza ma 520px od ok.
   1130px okna, na laptopie zwęża się do 440px, żeby kolumna tekstu nie
   spadała poniżej ok. 360px. Szerokość kolumny tekstu (--hd-text-w) to
   szerokość .hd-intro: min(34rem, reszta po formularzu i odstępie);
   liczona w kontekście .hd-decor, więc 100% = szerokość .hd-stage. */
@media (min-width: 960px) {
  .hd-stage {
    --hd-form-w: clamp(440px, 46vw, 520px);
    --hd-col-gap: clamp(48px, 6vw, 96px);
    --hd-text-w: min(34rem, 100% - var(--hd-form-w) - var(--hd-col-gap));
    /* rysunek na laptopie: góra ok. 30px pod dołem leadu (lead schodzi
       z 5 do 4 linii przy ok. 1000px), szerokość z 15vw (170–192px) */
    --hd-decor-top: calc(10vw + 188px);
    --hd-decor-w: clamp(170px, 15vw, 201px);
    /* kontener rośnie z rysunkiem (bodygraf ma proporcję 1:1,909), żeby fala
       stopki nie wchodziła na jego dół; rysunek i tak zjeżdża w dolny
       padding .hd-main, jak na desktopie */
    min-height: calc(var(--hd-decor-top) + var(--hd-decor-w) * 1.909 - 50px);
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hd-form-w));
    align-items: start;
    gap: 40px var(--hd-col-gap);
  }

  .hd-intro {
    grid-column: 1;
    grid-row: 1;
    padding-top: 28px;
  }

  .hd-form-card {
    grid-column: 2;
    grid-row: 1;
  }

  /* Rysunek poza przepływem, pod leadem. Laptop (960–1279): ten sam układ co
     desktop klienta, przeskalowany do węższej kolumny tekstu: środek rysunku
     w tym samym miejscu kolumny (78/544 = 14,3% szerokości kolumny w lewo
     od jej środka, czyli 35,7% od lewej krawędzi kolumny). */
  .hd-decor {
    display: block;
    position: absolute;
    left: calc(var(--hd-text-w) * 0.3566);
    top: var(--hd-decor-top);
    transform: translateX(-50%);
    width: var(--hd-decor-w);
    z-index: 0;
  }

  .hd-decor .hd-bodygraph {
    width: 100%;
    margin: 0;
  }

  /* po policzeniu wstęp zostaje sam, na całą szerokość */
  .hd-main:has(#hd-result:not([hidden])) .hd-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hd-main:has(#hd-result:not([hidden])) .hd-stage > * {
    grid-column: auto;
    grid-row: auto;
  }
}

/* laptop 960–999: kolumna tekstu najwęższa, lead ma 5 linii */
@media (min-width: 960px) and (max-width: 999.98px) {
  .hd-stage {
    --hd-decor-top: 314px;
  }
}

/* Desktop: położenie wybrane przez klienta w narzędziu ?ustaw=1 (okno 1452px,
   .hd-stage 1163px): środek rysunku 78px w lewo od środka kolumny tekstu,
   315px od góry .hd-stage, szerokość 201px. min-height trzyma kontener na tyle
   wysoki, żeby fala stopki nie wchodziła na rysunek. */
@media (min-width: 1280px) {
  .hd-stage {
    --hd-decor-top: 315px;
    --hd-decor-w: 201px;
    min-height: 622px;
  }

  .hd-decor {
    left: calc(var(--hd-text-w) / 2 - 78px);
  }
}

/* po policzeniu rysunek znika (JS ustawia też hidden) */
.hd-main:has(#hd-result:not([hidden])) .hd-decor {
  display: none;
}

/* ------------------------------------------------------------------------
   FORMULARZ
   ------------------------------------------------------------------------ */

/* Poniżej 960px karta idzie na całą szerokość treści (symetrycznie
   w marginesach strony); od 960px szerokość daje kolumna siatki. */
.hd-form-card {
  width: 100%;
  padding: 24px 18px 26px;
  border: 1px solid var(--pl-rule);
  border-radius: var(--r-panel);
  background: var(--panel);
}

@media (min-width: 560px) {
  .hd-form-card {
    padding: 34px 34px 32px;
  }
}

@media (min-width: 960px) {
  .hd-form-card {
    justify-self: end;
  }
}

.hd-alert {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--error);
  border-radius: var(--r-field);
  background: var(--error-bg);
  color: var(--pl-ink);
  font-size: 0.9rem;
}

.hd-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media (min-width: 480px) {
  .hd-row {
    grid-template-columns: 1fr 1fr;
  }
}

.hd-field {
  min-width: 0;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hd-field > label {
  color: var(--pl-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

.hd-optional {
  color: var(--pl-ink-2);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

.hd-field input[type="date"],
.hd-field input[type="time"],
.hd-field input[type="text"],
.hd-field input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-field);
  background: var(--field-bg);
  color: var(--pl-ink);
  font: inherit;
  font-size: 1rem; /* 16px: iOS nie przybliża */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

/* iOS: puste pole daty/godziny inaczej zapada się do zera */
.hd-field input[type="date"]::-webkit-date-and-time-value,
.hd-field input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}

.hd-field input::placeholder {
  color: var(--pl-ink-2);
  opacity: 0.75;
}

.hd-field input:focus {
  outline: 2px solid var(--pl-focus);
  outline-offset: 1px;
  border-color: var(--pl-focus);
}

.hd-field.is-invalid input[type="date"],
.hd-field.is-invalid input[type="time"],
.hd-field.is-invalid input[type="text"],
.hd-field.is-invalid input[type="email"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.hd-hint {
  margin: 0;
  color: var(--pl-ink-2);
  font-size: 0.8rem;
  line-height: 1.45;
}

.hd-error {
  margin: 0;
  color: var(--error);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.hd-error:empty {
  display: none;
}

.hd-hint {
  margin: 0;
  color: var(--ink, inherit);
  font-size: 0.85rem;
  line-height: 1.45;
}

.hd-hint[hidden] {
  display: none;
}

.hd-hint-fix {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Combobox miejsca */

.hd-combo {
  position: relative;
}

.hd-combo input {
  padding-right: 44px !important;
}

.hd-combo-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid var(--pl-rule);
  border-top-color: var(--pl-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms var(--ease);
  pointer-events: none;
}

.hd-combo.is-loading .hd-combo-spinner {
  opacity: 1;
  animation: hd-spin 800ms linear infinite;
}

@keyframes hd-spin {
  to { transform: rotate(360deg); }
}

.hd-listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 290px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--field-line);
  border-radius: var(--r-field);
  background: var(--field-bg);
  box-shadow: 0 18px 40px rgba(20, 16, 12, 0.18);
}

.hd-option {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.94rem;
  line-height: 1.35;
}

.hd-option-main {
  color: var(--pl-ink);
  font-weight: 600;
}

.hd-option-rest {
  color: var(--pl-ink-2);
}

.hd-option[aria-selected="true"],
.hd-option:hover {
  background: var(--panel-2);
}

.hd-option[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--pl-accent);
}

.hd-option-empty {
  padding: 10px 12px;
  color: var(--pl-ink-2);
  font-size: 0.88rem;
  cursor: default;
}

/* Checkbox zgody */

.hd-field--check {
  margin-top: 4px;
}

.hd-field > label.hd-check {
  color: var(--pl-ink);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

.hd-check {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.hd-check input {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.hd-check-box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--field-line);
  border-radius: 7px;
  background: var(--field-bg);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

.hd-check-box svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--pl-btn-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}

.hd-check input:checked + .hd-check-box {
  border-color: var(--pl-btn-bg);
  background: var(--pl-btn-bg);
}

.hd-check input:checked + .hd-check-box svg {
  opacity: 1;
}

.hd-check input:focus-visible + .hd-check-box {
  outline: 3px solid var(--pl-focus);
  outline-offset: 2px;
}

.hd-field--check.is-invalid .hd-check-box {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

/* Wysyłka */

.hd-submit {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.hd-submit .button {
  width: 100%;
}

.hd-submit .button[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.hd-privacy {
  margin: 0;
  color: var(--pl-ink-2);
  font-size: 0.78rem;
  text-align: center;
}

/* ------------------------------------------------------------------------
   WYNIK
   ------------------------------------------------------------------------ */

.hd-result {
  margin-top: clamp(40px, 5vw, 64px);
  scroll-margin-top: 76px;
}

.hd-result.is-revealed {
  animation: hd-reveal 520ms var(--ease) both;
}

@keyframes hd-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hd-result-head {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pl-rule);
}

.hd-result-head .eyebrow {
  margin-bottom: 10px;
}

.hd-result-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
}

.hd-result-head h2:focus {
  outline: none;
}

/* Data, godzina i miejsce pod typem i profilem (jak w nagłówku PDF). */
.hd-result-meta {
  margin: 10px 0 0;
  color: var(--pl-ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

.hd-result-meta:empty {
  display: none;
}

.hd-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "graph graph"
    "design personality"
    "info info";
  gap: 20px 12px;
  padding: 20px 14px 24px;
  border: 1px solid var(--pl-rule);
  border-radius: var(--r-panel);
  background: var(--panel);
}

.hd-graph {
  grid-area: graph;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.hd-planets--design {
  grid-area: design;
}

.hd-planets--personality {
  grid-area: personality;
}

.hd-info {
  grid-area: info;
  min-width: 0;
}

/* Kolumny planet */

.hd-planets {
  min-width: 0;
  padding: 14px 10px 12px;
  border-radius: 16px;
  background: var(--panel-2);
  text-align: center;
}

.hd-planets-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.hd-planets--design .hd-planets-title,
.hd-planets--design .hd-planet-value {
  color: var(--hd-design);
}

.hd-planets--personality .hd-planets-title,
.hd-planets--personality .hd-planet-value {
  color: var(--hd-personality);
}

.hd-planets-sub {
  margin: 3px 0 10px;
  color: var(--pl-ink-2);
  font-size: 0.72rem;
  line-height: 1.2;
}

.hd-planet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-planet {
  display: grid;
  grid-template-columns: 1.4em auto;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  line-height: 1.35;
}

.hd-planet-glyph {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
  font-size: 1.05rem;
  text-align: center;
  color: var(--pl-ink-2);
}

.hd-planet-value {
  min-width: 3.2ch;
  font-weight: 600;
  text-align: left;
}

/* Lista cech */

.hd-info-list {
  margin: 0;
  padding: 0;
}

.hd-info-list--birth {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pl-rule);
}

.hd-info-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--pl-rule);
}

.hd-info-row:last-child {
  border-bottom: 0;
}

.hd-info-row dt {
  margin: 0 0 2px;
  color: var(--pl-ink-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hd-info-row dd {
  margin: 0;
  color: var(--pl-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hd-info-list--birth .hd-info-row dd {
  font-size: 0.9rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.hd-info-note {
  color: var(--pl-ink-2);
  font-weight: 400;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------
   BODYGRAF — klasy renderera hd-bodygraph.js, kolory z tokenów motywu
   ------------------------------------------------------------------------ */

.hd-bodygraph { width: 100%; height: auto; display: block; }
.hd-silhouette { fill: var(--hd-silhouette); }
.hd-tubes path { fill: none; stroke: var(--hd-tube); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.hd-active path { fill: none; stroke-width: 5; stroke-linejoin: round; }
.hd-active .is-design { stroke: var(--hd-design); }
.hd-active .is-personality { stroke: var(--hd-personality); }
.hd-active .is-split { stroke-width: 2.5; }  /* oba strumienie: dwa paski wzdłuż kanału */
.hd-center { fill: var(--hd-center); stroke: var(--hd-center-stroke); stroke-width: 1.5; }
.hd-center.is-defined { stroke: none; }
.hd-center--head.is-defined, .hd-center--g.is-defined { fill: var(--hd-c-yellow); }
.hd-center--ajna.is-defined, .hd-center--spleen.is-defined { fill: var(--hd-c-green); }
.hd-center--throat.is-defined { fill: var(--hd-c-blue); }
.hd-center--heart.is-defined, .hd-center--solarplexus.is-defined, .hd-center--sacral.is-defined, .hd-center--root.is-defined { fill: var(--hd-c-orange); }
.hd-gate text { font-family: var(--font); font-size: 8.5px; font-weight: 600; fill: var(--hd-gate-label); font-variant-numeric: tabular-nums; }
.hd-gate.hd-gate--on-defined text { fill: var(--hd-gate-label-defined); }
.hd-gate.is-active circle { fill: var(--hd-gate-active); }
.hd-gate.is-active text { fill: var(--hd-gate-active-ink); }
/* Strzałki (zmienne): kolor strumienia, w kółku numer koloru */
.hd-arrow.is-design { fill: var(--hd-design); }
.hd-arrow.is-personality { fill: var(--hd-personality); }
.hd-arrow text { font-family: var(--font); font-size: 9.5px; font-weight: 700; fill: var(--hd-gate-active-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------
   POD WYNIKIEM: narzędzia (PDF, nowy graf) i zaproszenie na odczyt
   ------------------------------------------------------------------------ */

.hd-result-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 22px auto 0;
}

.hd-pdf:hover svg,
.hd-page .hd-pdf:hover svg {
  transform: translateY(2px);
}

.hd-result-tools .button[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.hd-pdf-status {
  margin: 16px auto 0;
  max-width: 34rem;
  color: var(--error);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}

.hd-pdf-status[hidden] {
  display: none;
}

/* Zaproszenie: karta w kolorze płyty kontrastowej (jasny motyw → noc,
   ciemny → cegła), jak kolejna płyta v2. Własna para tło/tusz (--pl-*),
   więc przyciski w środku biorą żółć bez osobnych reguł. */
.hd-invite {
  --pl-bg: var(--noc);
  --pl-ink: var(--krem);
  --pl-ink-2: var(--krem-mut);
  --pl-accent: var(--sun);
  --pl-rule: rgba(246, 239, 228, 0.22);
  --pl-focus: var(--sun);
  --pl-btn-bg: var(--sun);
  --pl-btn-ink: var(--coffee);
  --pl-btn-hover: #ffd24d;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 1040px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px);
  border-radius: var(--r-panel);
  background: var(--pl-bg);
  color: var(--pl-ink);
}

html[data-theme="dark"] .hd-invite {
  --pl-bg: var(--cegla);
  --pl-ink-2: #ebd9c4;
  --pl-rule: rgba(246, 239, 228, 0.28);
}

.hd-invite-mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pl-ink) 10%, transparent);
  color: var(--pl-accent);
}

.hd-invite-mark svg {
  width: 26px;
  height: 26px;
}

.hd-invite .eyebrow {
  margin-bottom: 12px;
}

.hd-page .hd-invite-title {
  margin: 0;
  color: var(--pl-ink);
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  line-height: 1.12;
}

.hd-invite-text {
  max-width: 36rem;
  margin: 14px 0 0;
  color: var(--pl-ink-2);
  font-size: 1.02rem;
  line-height: 1.6;
}

.hd-nowrap {
  white-space: nowrap;
}

.hd-invite-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.hd-invite-actions .button {
  white-space: nowrap;
}

/* link drugiego rzędu: tekst z podkreśleniem, jak linki w treści v2 */
.hd-invite-link {
  align-self: center;
  color: var(--pl-ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--pl-accent) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 180ms var(--ease), color 180ms var(--ease);
}

.hd-invite-link:hover,
.hd-invite-link:focus-visible {
  color: var(--pl-accent);
  text-decoration-color: currentColor;
}

@media (min-width: 560px) {
  .hd-chart {
    padding: 26px 22px 28px;
  }

  .hd-result-tools {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
}

/* Szerzej: znak | treść | przyciski w jednym rzędzie */
@media (min-width: 860px) {
  .hd-invite {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 clamp(28px, 3.4vw, 48px);
  }

  .hd-invite-mark {
    align-self: start;
  }

  .hd-invite-actions {
    align-items: center;
  }
}

/* Desktop: lista cech | Design | bodygraf | Personality
   Kolumny planet mają tę samą szerokość w rem (rośnie z krojem i zoomem),
   dobraną do dłuższego nagłówka „PERSONALITY” (ok. 6,9rem z paddingiem),
   więc obie są symetryczne i nagłówek nigdy nie wychodzi poza pastylkę. */
@media (min-width: 960px) {
  .hd-chart {
    grid-template-columns: minmax(250px, 300px) 7.5rem minmax(0, 440px) 7.5rem;
    grid-template-areas: "info design graph personality";
    justify-content: center;
    align-items: start;
    gap: 0 22px;
    padding: 34px 30px;
  }

  .hd-info {
    padding-right: 30px;
  }

  .hd-planets {
    padding: 16px 6px 14px;
  }

  .hd-planet {
    padding: 5px 0;
  }
}

/* Stopka v2: w motywie ciemnym ta sama noc co strona, więc kreska szwu */
html[data-theme="dark"] .site-footer--lux {
  border-top: 1px solid rgba(246, 239, 228, 0.12);
}

html[data-theme="dark"] .site-footer--lux .site-footer__seam {
  display: none;
}

/* ------------------------------------------------------------------------
   RUCH
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hd-result.is-revealed {
    animation: none;
  }

  .hd-combo.is-loading .hd-combo-spinner {
    animation-duration: 2400ms;
  }

  .hd-page .button,
  .hd-page .button svg,
  .hd-field input,
  .hd-check-box,
  .hd-check-box svg {
    transition: none;
  }

  .hd-page .button:hover,
  .hd-page .button:focus-visible,
  .hd-page .button:hover svg {
    transform: none;
  }
}

/* Link do polityki prywatności w etykiecie zgody. Klik w <a> wewnątrz
   <label> nie przełącza checkboxa (element interaktywny), a nowa karta
   zostawia wypełniony formularz w spokoju. */
.hd-check-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.hd-check-text a:hover {
  color: var(--pl-accent, inherit);
}