/* The web Human Design test and its report and pricing pages, on top of fortune.css. Colours come from tokens.css. */
.hd [hidden] { display: none !important; }
.hd-wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter) 96px; }

.hd-start { padding-top: 56px; display: grid; gap: 36px; }
.hd-start .copy { text-align: center; max-width: 720px; margin: 0 auto; }
.hd-start h1 { margin-top: 22px; font-size: clamp(36px, 6vw, 64px); line-height: 1.2; text-wrap: balance; }
.hd-start .lede { margin: 18px auto 0; font-size: 17px; color: var(--fortune-on-surface-variant); }

/* A solid band behind the floating nav, from above the screen's top edge (iOS Safari draws the page under the status
   bar) to just below the nav: scrolled text no longer shows between them. A fill, not a blur: the blur was removed for speed. */
.hd .bar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.hd .bar::before { content: ""; position: absolute; inset: -120px 0 -20px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--fortune-surface) calc(100% - 32px), transparent); }

/* Below the sticky nav the glass sits on the aura alone, whose blur is invisible but was re-rasterised on every scrolled frame. */
.hd .glass:not(.nav) { -webkit-backdrop-filter: none; backdrop-filter: none; }

.hd-form { width: 100%; max-width: 520px; margin: 0 auto; border-radius: var(--fortune-radius-extra-large); padding: 26px 22px; display: grid; gap: 16px; }
@media (min-width: 600px) { .hd-form { padding: 34px 36px; } }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--fortune-on-surface-variant); position: relative; }
.field :is(input, select) { width: 100%; min-height: 48px; padding: 10px 16px; border-radius: var(--fortune-radius-medium); border: 1px solid var(--fortune-outline-variant);
  background: color-mix(in srgb, var(--fortune-surface-container-high) 80%, transparent); color: var(--fortune-on-surface); font: 400 16px/1.4 var(--body); color-scheme: dark; }
.field :is(input, select):focus { outline: 2px solid var(--fortune-tertiary); outline-offset: 1px; }
.field :is(input, select):disabled { opacity: .45; }

/* Birth date and time: one native select per column, so phones open their own wheel or list. */
.when { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.when legend { padding: 0; margin-bottom: 6px; }
.picks { display: flex; gap: 8px; }
.pick { position: relative; flex: 1 1 0; min-width: 0; }
.pick.year { flex-grow: 1.15; }
.pick.month, .pick.hour { flex-grow: 1.35; }
.pick::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border: solid var(--fortune-on-surface-variant); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.field select { appearance: none; -webkit-appearance: none; padding: 10px 30px 10px 14px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .2s; }
.field select:hover:not(:disabled) { border-color: var(--fortune-outline); }
.field select:invalid { color: var(--fortune-on-surface-variant); }
.field select:disabled { cursor: default; }

.check { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; color: var(--fortune-on-surface); }
.check input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 22px; height: 22px; margin: 0; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--fortune-outline); background: color-mix(in srgb, var(--fortune-surface-container-high) 80%, transparent); transition: background-color .2s, border-color .2s; }
.check input:checked { background: var(--fortune-primary); border-color: var(--fortune-primary); }
.check input:checked::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px;
  border: solid var(--fortune-on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible { outline: 2px solid var(--fortune-tertiary); outline-offset: 2px; }
.hd-note { font-size: 13px; line-height: 1.7; color: var(--fortune-on-surface-variant); }
/* In the flow, not over it: the suggestions push the submit button down instead of covering it. */
.hd-cities { margin: 0; padding: 6px; border-radius: 18px; max-height: 280px; overflow-y: auto;
  background: var(--fortune-surface-container-high); border: 1px solid var(--fortune-outline-variant); box-shadow: 0 24px 60px -20px #000; font: 400 15px/1.4 system-ui, sans-serif; }
.hd-cities li { padding: 10px 14px; border-radius: 12px; cursor: pointer; color: var(--fortune-on-surface); }
.hd-cities li:hover, .hd-cities li:focus { background: rgb(255 255 255 / .07); outline: none; }
.hd-cities li.none { cursor: default; color: var(--fortune-on-surface-variant); }
.hd-error { min-height: 1.4em; font-size: 14px; line-height: 1.5; color: var(--fortune-error); }
.hd-form .pill { width: 100%; border: 0; cursor: pointer; }
.hd-form .pill:disabled { opacity: .6; cursor: progress; }
.hd-form .fine { margin-top: 0; text-align: center; }

.hd-result { padding-top: 40px; display: grid; gap: 28px; }
.hd-chart { display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .hd-chart { grid-template-columns: minmax(0, 360px) 1fr; gap: 48px; } }
.hd-graph { margin: 0 auto; width: min(340px, 82vw); }
.hd-svg { display: block; width: 100%; height: auto; }
.hd-facts { text-align: center; }
@media (min-width: 760px) { .hd-facts { text-align: start; } }
.hd-type { margin-top: 12px; font-size: clamp(40px, 6vw, 60px); line-height: 1.2; }
.hd-meta { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 760px) { .hd-meta { justify-content: flex-start; } }
.hd-meta div { padding: 10px 18px; border-radius: var(--fortune-radius-medium); background: color-mix(in srgb, var(--fortune-surface-container-high) 70%, transparent); border: 1px solid var(--fortune-outline-variant); }
.hd-meta dt { font-size: 12px; letter-spacing: .1em; color: var(--fortune-on-surface-variant); }
.hd-meta dd { margin: 2px 0 0; font: 400 20px/1.4 var(--display); }

.hd-reading { border-radius: var(--fortune-radius-extra-large); padding: 26px 22px; }
@media (min-width: 760px) { .hd-reading { padding: 36px 44px; } }
.hd-reading h2 { margin-top: 10px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.4; }
.hd-reading p:last-child { margin-top: 14px; font-size: 16px; line-height: 2; white-space: pre-line; }

.hd-share { text-align: center; }
.hd-share h2 { justify-content: center; }
/* Two equal columns whatever the labels' length: a long label wraps inside its pill; an odd last button spans both. */
.hd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 14px auto 0; }
.hd-actions .pill { cursor: pointer; border: 1px solid var(--glass-edge); padding: 10px 14px; text-wrap: balance; }
.hd-actions > :nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
.hd-actions .pill:disabled { opacity: .6; cursor: progress; }
.hd-link { display: block; width: 100%; max-width: 520px; margin: 12px auto 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--fortune-outline-variant);
  background: var(--fortune-surface-container-high); color: var(--fortune-on-surface); font: 400 14px/1.4 system-ui, sans-serif; }
.hd-status { min-height: 1.5em; margin-top: 10px; font-size: 14px; color: var(--fortune-tertiary); }

.hd-cta { border-radius: var(--fortune-radius-extra-large); padding: 30px 22px; text-align: center; }
@media (min-width: 760px) { .hd-cta { padding: 44px 56px; } }
.hd-cta h2 { margin-top: 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; }
.hd-cta > p:not(.kicker) { max-width: 600px; margin: 14px auto 0; color: var(--fortune-on-surface-variant); }
.hd-cta .cta { margin-top: 24px; }
.hd-again { text-align: center; }
.hd-again .pill { cursor: pointer; border: 1px solid var(--glass-edge); }

.hd .foot { position: relative; z-index: 1; }