/* Hallmark · ghl_prompt page layouts (landing, question flow, result). Tokens: ghl_prompt.css. */

/* ---------- landing ---------- */
.gp-hero {
  display: grid; gap: var(--gp-space-2xl); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--gp-space-xl) var(--gp-space-3xl);
}
@media (min-width: 64rem) {
  .gp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gp-space-3xl); padding-top: var(--gp-space-2xl); }
}
.gp-optin { margin-top: var(--gp-space-xl); max-width: 32rem; }
.gp-optin__fields { display: grid; gap: var(--gp-space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .gp-optin__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.gp-optin__submit { width: 100%; margin-top: var(--gp-space-md); }
.gp-optin__note { margin: var(--gp-space-sm) 0 0; font-size: var(--gp-text-sm); }
.gp-optin[data-state="success"] .gp-optin__submit { background: var(--color-create-hover); }

.gp-inside { padding-block: var(--gp-space-3xl); border-top: 1px solid var(--color-rule); }
.gp-inside__list { list-style: none; margin: var(--gp-space-xl) 0 0; padding: 0; display: grid; gap: var(--gp-space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .gp-inside__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gp-inside__item h3 { margin: var(--gp-space-md) 0 var(--gp-space-xs); font-size: var(--gp-text-lg); line-height: 1.3; }
.gp-inside__item p { margin: 0; color: var(--color-ink-2); }
.gp-inside__mark { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--gp-radius-md); background: var(--color-brand-soft); color: var(--color-accent); }

.gp-again {
  display: flex; flex-wrap: wrap; gap: var(--gp-space-lg); align-items: center; justify-content: space-between;
  margin-bottom: var(--gp-space-3xl); padding: var(--gp-space-xl); border-radius: var(--gp-radius-lg);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule);
}

/* ---------- question flow ---------- */
.gp-flow { width: min(100% - 2 * var(--gp-space-md), 40rem); margin: 0 auto; padding-block: var(--gp-space-lg) var(--gp-space-3xl); }
.gp-progress { display: flex; gap: var(--gp-space-md); align-items: center; margin-bottom: var(--gp-space-xl); color: var(--color-muted); font-size: var(--gp-text-sm); font-weight: 500; }
.gp-progress__track { flex: 1; height: 4px; border-radius: 4px; background: var(--color-rule); overflow: hidden; }
.gp-progress__bar { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--color-accent); transform-origin: left center; transform: scaleX(0); }
.gp-greeting { margin: 0 0 var(--gp-space-xs); color: var(--color-accent); font: 600 var(--gp-text-base)/1.4 var(--font-sans); }
.gp-step { margin: 0 0 var(--gp-space-2xl); padding: 0; border: 0; min-width: 0; }
.gp-step__title { display: block; margin: 0 0 var(--gp-space-xs); padding: 0; font-family: var(--font-serif-display); font-weight: 600; font-size: var(--gp-text-2xl); line-height: 1.15; text-wrap: balance; }
.gp-step__help { margin: 0 0 var(--gp-space-lg); color: var(--color-ink-2); }
.gp-step__optional { display: inline-block; margin-left: var(--gp-space-xs); padding: 0.125rem var(--gp-space-xs); border-radius: 999px; background: var(--color-paper-2); color: var(--color-muted); font: 600 0.75rem/1.4 var(--font-sans); vertical-align: middle; }
.gp-step__extra { margin-top: var(--gp-space-lg); }
.gp-counter { margin: var(--gp-space-2xs) 0 0; color: var(--color-muted); font-size: var(--gp-text-sm); text-align: right; }
.gp-counter[hidden] { display: none; }

.gp-choices { display: grid; gap: var(--gp-space-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .gp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gp-choice { position: relative; display: block; cursor: pointer; }
.gp-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gp-choice__card {
  display: flex; gap: var(--gp-space-sm); align-items: center; min-height: 3.5rem; padding: var(--gp-space-md);
  border-radius: var(--gp-radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-strong);
  font-weight: 600; transition: box-shadow var(--gp-dur-fast) var(--gp-ease-out), background-color var(--gp-dur-fast) var(--gp-ease-out);
}
.gp-choice:hover .gp-choice__card { box-shadow: inset 0 0 0 1px var(--color-muted); }
.gp-choice input:checked + .gp-choice__card { background: var(--color-action-soft); box-shadow: inset 0 0 0 2px var(--color-action); }
.gp-choice__check { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin-left: auto; border-radius: 50%; background: var(--color-action); color: var(--color-action-ink); font-size: 0.75rem; transform: scale(0); transition: transform var(--gp-dur) var(--gp-ease-out); }
.gp-choice input:checked + .gp-choice__card .gp-choice__check { transform: scale(1); }
.gp-swatch { display: inline-flex; flex: none; gap: 2px; }
.gp-swatch i { display: block; width: 0.75rem; height: 1.75rem; border-radius: 3px; }

.gp-nav { display: flex; gap: var(--gp-space-md); align-items: center; justify-content: space-between; }
.gp-nav [data-gp-back][hidden] { display: none; }
.gp-nav__spacer { flex: 1; }

/* Stepped mode: JS shows one question at a time. Without JS every step shows and one submit sends all. */
.gp-flow--stepped .gp-step:not(.is-current) { display: none; }
.gp-flow:not(.gp-flow--stepped) [data-gp-back],
.gp-flow:not(.gp-flow--stepped) [data-gp-next] { display: none; }
.gp-flow--stepped [data-gp-submit]:not(.is-last) { display: none; }
.gp-flow--stepped .gp-step { margin-bottom: var(--gp-space-xl); }
@media (max-width: 47.99rem) {
  .gp-flow--stepped .gp-nav {
    position: sticky; bottom: 0; margin-inline: calc(-1 * var(--gp-space-md)); padding: var(--gp-space-sm) var(--gp-space-md) calc(var(--gp-space-sm) + env(safe-area-inset-bottom));
    background: var(--color-paper); box-shadow: 0 -1px 0 var(--color-rule);
  }
  .gp-flow--stepped .gp-nav .gp-button { flex: 1; }
}
.gp-alert { margin: 0 0 var(--gp-space-lg); padding: var(--gp-space-md); border-radius: var(--gp-radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-danger); }
.gp-alert:empty { display: none; }

/* ---------- result ---------- */
.gp-result { width: min(100% - 2 * var(--gp-space-md), 48rem); margin: 0 auto; padding-block: var(--gp-space-lg) var(--gp-space-2xl); }
.gp-result__title:focus { outline: none; }
.gp-prompt { margin-top: var(--gp-space-xl); border-radius: var(--gp-radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule), var(--gp-shadow); }
.gp-prompt__bar {
  position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--gp-space-sm); align-items: center; justify-content: space-between;
  padding: var(--gp-space-sm) var(--gp-space-md); border-radius: var(--gp-radius-lg) var(--gp-radius-lg) 0 0;
  background: var(--color-surface); box-shadow: 0 1px 0 var(--color-rule);
}
.gp-prompt__name { margin: 0; color: var(--color-muted); font-size: var(--gp-text-sm); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.gp-prompt__text {
  margin: 0; padding: var(--gp-space-lg) var(--gp-space-md); max-height: 32rem; overflow: auto;
  font: 400 0.9375rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-ink);
}
@media (min-width: 48rem) { .gp-prompt__text { padding: var(--gp-space-xl); max-height: none; } }
@media (max-width: 29.99rem) { .gp-copy { width: 100%; } }
.gp-copy[data-state="copied"] { background: var(--color-create-hover); }
.gp-copy__check { display: none; }
.gp-copy[data-state="copied"] .gp-copy__check { display: inline-block; }

.gp-steps { margin-top: var(--gp-space-3xl); }
.gp-steps__list { list-style: none; margin: var(--gp-space-lg) 0 0; padding: 0; display: grid; gap: var(--gp-space-lg); }
.gp-steps__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--gp-space-md); align-items: start; }
.gp-steps__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-accent); font-weight: 700; }
.gp-steps__item h3 { margin: 0.4rem 0 0; font-size: var(--gp-text-lg); line-height: 1.35; }
.gp-steps__aside { grid-column: 2; margin-top: 0; padding: var(--gp-space-md); border-radius: var(--gp-radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule); }
.gp-steps__aside p { margin: 0 0 var(--gp-space-sm); color: var(--color-ink-2); }
@media (max-width: 29.99rem) { .gp-steps__aside { grid-column: 1 / -1; } .gp-steps__aside .gp-button { width: 100%; } }
.gp-disclosure { display: block; margin-top: var(--gp-space-sm); color: var(--color-muted); font-size: 0.8125rem; line-height: 1.45; }

.gp-traffic {
  margin-top: var(--gp-space-3xl); padding-block: var(--gp-space-3xl);
  background: var(--color-surface); border-block: 1px solid var(--color-rule);
}
.gp-traffic__inner { display: grid; gap: var(--gp-space-2xl); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .gp-traffic__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gp-traffic .gp-button { margin-top: var(--gp-space-lg); }

/* Hallmark · guided result: P5 H4 E4 S4 R5 V4. Existing locked app tokens. */
.gp-guided {
  --gp-dur-fast: 300ms;
  --gp-dur: 500ms;
  --gp-dur-reveal: 700ms;
  --gp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-guided [id] { scroll-margin-block-start: var(--gp-space-xl); }
.gp-result__route { display: flex; flex-wrap: wrap; gap: var(--gp-space-xs) var(--gp-space-md); align-items: center; margin-top: var(--gp-space-lg); }
.gp-guided .gp-link { display: inline-flex; align-items: center; white-space: nowrap; }
.gp-guided .gp-button, .gp-guided .gp-link { transition: opacity var(--gp-dur-fast) var(--gp-ease-out), transform var(--gp-dur) var(--gp-ease-out); }
.gp-guided .gp-button:hover, .gp-guided .gp-link:hover { opacity: 0.85; }
.gp-guided .gp-button:hover { background: var(--color-action); }
.gp-guided .gp-button--quiet:hover { background: var(--color-surface); }
.gp-guided .gp-copy[data-state="copied"]:hover { background: var(--color-create-hover); }
.gp-guided .gp-link:hover { color: var(--color-ink-2); }
.gp-guided .gp-h2 { overflow-wrap: anywhere; min-width: 0; }
.gp-guided .gp-traffic__inner { max-width: 48rem; }
.gp-next-offer { border-top: 1px solid var(--color-rule); padding-top: var(--gp-space-xl); }
.gp-next-offer__title { font: 600 var(--gp-text-xl)/1.3 var(--font-sans); margin: 0; }
.gp-waitlist { margin-top: var(--gp-space-2xl); padding-top: var(--gp-space-lg); border-top: 1px solid var(--color-rule); font-size: var(--gp-text-sm); }
.gp-waitlist h3 { font-size: inherit; margin: 0; }
.gp-waitlist p { margin-bottom: 0; }
@media (max-width: 29.99rem) { .gp-result__route { flex-direction: column; align-items: flex-start; gap: 0; } .gp-result__route > span { display: none; } }
@media (min-width: 56rem) { .gp-guided .gp-traffic__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .gp-next-offer { border-top: 0; padding-top: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gp-guided .gp-button, .gp-guided .gp-link { transition: none; }
  .gp-guided .gp-button:active { transform: none; }
}