/* The full Human Design report on the web: the result page's unlock box, the report page and the pricing page,
   on top of fortune.css and hd.css. Colours come from tokens.css. */

.hd-unlock { border-radius: var(--fortune-radius-extra-large); padding: 30px 22px; display: grid; gap: 14px; }
@media (min-width: 760px) { .hd-unlock { padding: 40px 48px; } }
.hd-unlock h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3; }
.hd-unlock .lede { color: var(--fortune-on-surface-variant); }
.hd-unlock-sub { font-size: 18px; margin-top: 6px !important; }
.hd-outline { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 8px; }
.hd-outline li { line-height: 1.6; }
.hd-outline b { font-weight: 500; color: var(--fortune-on-surface); }
.hd-outline span { display: block; font-size: 14px; color: var(--fortune-on-surface-variant); }
.hd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 6px; }
.hd-price b { font: 400 34px/1.2 var(--display); color: var(--fortune-tertiary); }
.hd-price span { font-size: 14px; color: var(--fortune-on-surface-variant); }
#hd-unlock-buy, #hd-unlock-need { display: grid; gap: 14px; }
.hd-waiver { align-items: flex-start; font-size: 14px; line-height: 1.7; }
.hd-waiver input { flex: none; margin-top: 3px; }
.hd-unlock .pill { border: 0; cursor: pointer; justify-self: start; }
.hd-unlock .pill.tonal { border: 1px solid var(--glass-edge); }
.hd-unlock .pill:disabled { opacity: .5; cursor: progress; }
.hd-unlock .pill[aria-disabled="true"] { opacity: .5; }
.hd-unlock .hd-error { min-height: 0; }
.hd-unlock .fine { margin-top: 0; }

/* Report text is the server library's, which the page's font subsets cannot cover: system fonts. */
.hdr-state { margin: 48px auto 0; max-width: 640px; padding: 22px 24px; border-radius: var(--fortune-radius-large); text-align: center; }
.hdr-save { border-radius: var(--fortune-radius-large); padding: 22px; display: grid; gap: 10px; justify-items: start; }
.hdr-save .pill { cursor: pointer; border: 1px solid var(--glass-edge); }
.hdr-save .hd-link { margin: 0; }
.hdr-chapter { border-radius: var(--fortune-radius-extra-large); padding: 24px 18px; display: grid; gap: 10px; }
@media (min-width: 760px) { .hdr-chapter { padding: 34px 40px; } }
.hdr-chapter h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.3; }
.hdr-chapter h3 { margin-top: 14px !important; }
#hdr-chapters { display: grid; gap: 24px; }
.hdr-item { border-top: 1px solid var(--fortune-outline-variant); padding: 12px 0; font-family: system-ui, -apple-system, sans-serif; }
.hdr-item summary { cursor: pointer; display: grid; gap: 2px; list-style: none; }
.hdr-item summary::-webkit-details-marker { display: none; }
.hdr-item summary::after { content: "+"; justify-self: end; margin-top: -1.6em; color: var(--fortune-tertiary); }
.hdr-item[open] > summary::after { content: "−"; }
.hdr-label { font-size: 13px; color: var(--fortune-tertiary); padding-inline-end: 1.5em; }
.hdr-title { font-size: 18px; line-height: 1.5; color: var(--fortune-on-surface); padding-inline-end: 1.5em; }
.hdr-gist { font-size: 15px; line-height: 1.7; color: var(--fortune-on-surface-variant); }
.hdr-meta { margin-top: 8px; font-size: 13px; color: var(--fortune-on-surface-variant); }
.hdr-body { margin-top: 10px; font-size: 16px; line-height: 1.9; white-space: pre-line; }
.hdr-note { margin-top: 8px; font-size: 13px; color: var(--fortune-tertiary); }
.hdr-children { margin-top: 8px; padding-inline-start: 14px; border-inline-start: 2px solid var(--fortune-outline-variant); }
.hdr-children .hdr-title { font-size: 16px; }

.hd-doc { max-width: 760px !important; padding-top: 48px !important; display: grid; gap: 24px; }
.hd-doc h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.25; }
.hd-doc .lede { color: var(--fortune-on-surface-variant); }
.hd-doc section { border-radius: var(--fortune-radius-extra-large); padding: 26px 22px; display: grid; gap: 12px; }
@media (min-width: 760px) { .hd-doc section { padding: 34px 40px; } }
.hd-doc h2 { font-size: 22px; margin-top: 8px !important; }
.hd-doc ul { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; }
.hd-doc .pill { justify-self: start; }