/* ==========================================================================
   Homepage "check your idea with AI" popup (public/js/idea-check.js).
   Loaded only on index.html. Built on the same tokens as styles.css — no
   new colors/type/spacing scale, just new layout for this one surface.
   ========================================================================== */

body.idea-modal-lock { overflow: hidden; }

/* Staggered fade+rise for [data-unlock-reveal] / [data-unlock-reveal-group]
   children — app.css defines the same utility for the authenticated app
   shell, but index.html (this popup's only home) never loads app.css, so
   this popup needs its own copy or the reveal classes idea-check.js sets
   are inert. Kept in sync with app.css's version by hand since there's no
   shared partial between the public site and the app shell. */
[data-unlock-reveal] { animation: xy-unlock-in var(--dur-slow) var(--ease-out) both; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(1) { animation-delay: 0ms; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(2) { animation-delay: 80ms; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(3) { animation-delay: 160ms; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(4) { animation-delay: 240ms; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(5) { animation-delay: 320ms; }
[data-unlock-reveal-group] [data-unlock-reveal]:nth-child(6) { animation-delay: 400ms; }
@keyframes xy-unlock-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-unlock-reveal] { animation: none; }
}

.idea-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.idea-modal-overlay.is-open {
  display: flex;
  opacity: 1;
}

.idea-modal {
  position: relative;
  background:
    radial-gradient(480px 260px at 105% -10%, rgba(147, 113, 47, 0.14), transparent 65%),
    radial-gradient(420px 240px at -8% 108%, rgba(47, 111, 158, 0.11), transparent 65%),
    var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 640px;
  width: 100%;
  padding: var(--space-5) var(--space-5);
  margin: var(--space-5) 0;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  animation: idea-modal-in var(--dur-slow) var(--ease-out) forwards;
}
@keyframes idea-modal-in {
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .idea-modal { animation: none; transform: none; opacity: 1; }
  .idea-modal-overlay { transition: none; }
}

.idea-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 50%;
}
.idea-modal__close:hover { color: var(--ink); background: var(--surface-alt); }
.idea-modal__close svg { width: 16px; height: 16px; }

.idea-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.idea-modal__eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }

.idea-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin-top: var(--space-1);
}

.idea-modal__lede, .idea-modal__summary {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: 1.6;
}

.idea-modal__note {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Intro-screen teaser: a preview of the colorful result rings (example
   scores, not real ones) so the payoff is visible before someone commits to
   the form — "try it" is a much easier ask when you can already see roughly
   what you'll get. Rings sweep in via animatePreview() in idea-check.js,
   same mechanism as the real result. */
.idea-modal__preview-wrap { margin-top: var(--space-4); }
.idea-modal__preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.idea-modal__preview-ring { display: inline-flex; flex-shrink: 0; }
.idea-ring--xs { width: 34px; height: 34px; }
.idea-ring--xs .idea-ring__track, .idea-ring--xs .idea-ring__fill { stroke-width: 4; }
.idea-modal__preview-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-left: 0.35rem;
}

.idea-modal__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.idea-modal__actions--secondary { margin-top: var(--space-2); justify-content: center; }

.idea-modal__link {
  background: none;
  border: none;
  padding: 0.4rem 0.2rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.idea-modal__link:hover { color: var(--ink); }

/* ---- Form ---- */
.idea-modal__form .field { margin-bottom: var(--space-2); }
.idea-modal__form textarea { min-height: 78px; }

/* Scoped to .idea-modal rather than added to the shared .stage-pill rule in
   styles.css — this popup is the only surface whose pills carry an icon
   (apply.html's and onboarding-chat.js's plain-text pills render fine as-is
   and shouldn't gain unrequested layout changes). */
.idea-modal .stage-pill { display: inline-flex; align-items: center; gap: 0.4rem; }
.stage-pill__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
.stage-pill.is-selected .stage-pill__icon { color: var(--white); }

/* Each stage pill picks up one of the same five hues as the result rings
   when selected, instead of every stage collapsing to the same ink-black —
   a small bit of color payoff earlier in the flow, not just at the end. */
.idea-modal .stage-pill[data-stage-value="Idea"].is-selected { background: #6a5b8c; border-color: #6a5b8c; }
.idea-modal .stage-pill[data-stage-value="Prototype"].is-selected { background: #2f6f9e; border-color: #2f6f9e; }
.idea-modal .stage-pill[data-stage-value="MVP"].is-selected { background: #93712f; border-color: #93712f; }
.idea-modal .stage-pill[data-stage-value="Launched"].is-selected { background: #3f6b4f; border-color: #3f6b4f; }
.idea-modal .stage-pill[data-stage-value="Revenue"].is-selected { background: #a4485f; border-color: #a4485f; }

.idea-pitch-field { position: relative; }
/* Specificity needs to clearly beat styles.css's .field input[type="text"]
   padding rule (0,2,1) — confirmed live: a plain ".idea-pitch-field input"
   (0,1,1) silently lost to it and the counter sat on top of typed text. */
.idea-modal .idea-pitch-field input[type="text"] { padding-right: 3.75rem; }
.idea-pitch-field__count {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--text-faint);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ---- Loading: a skeleton preview of the result screen's own shapes ----
   Five small rings (one per factor, same colors as the real result) drop in
   one by one, a text-line placeholder appears beside each, the rings fill
   in sequence, then the big overall-score ring and its summary lines fade
   in — see runLoadingAnimation() in idea-check.js for the exact timing. */
.idea-skel { padding-block: var(--space-2); }
.idea-skel .idea-modal__title { margin-bottom: var(--space-4); }

.idea-skel-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  margin-inline: auto;
}
.idea-skel-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(6px);
  animation: idea-skel-row-in var(--dur-slow) var(--ease-out) forwards;
}
.idea-skel-row__ring { flex-shrink: 0; }
.idea-skel-row__line {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: idea-skel-fade-in var(--dur-base) var(--ease-out) forwards;
}
.idea-skel-row__line::after,
.idea-skel-big__line::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(11, 11, 12, 0.06), transparent);
  animation: idea-skel-shimmer 1.6s ease-in-out infinite;
}

.idea-skel-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-5);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: idea-skel-big-in var(--dur-slow) var(--ease-out) forwards;
}
.idea-skel-big__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
  width: 100%;
  max-width: 280px;
}
.idea-skel-big__line {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
}
.idea-skel-big__line--w1 { width: 85%; }
.idea-skel-big__line--w2 { width: 60%; }

@keyframes idea-skel-row-in { to { opacity: 1; transform: translateY(0); } }
@keyframes idea-skel-fade-in { to { opacity: 1; } }
@keyframes idea-skel-big-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes idea-skel-shimmer { to { transform: translateX(100%); } }

/* Once the entrance sequence has had time to finish, everything holds —
   except if the real API response still hasn't arrived, in which case a
   slow breathing pulse on the rings signals "still working" instead of
   the screen looking frozen or done. */
.idea-skel.is-settled .idea-ring__fill { animation: idea-skel-pulse 1.8s ease-in-out infinite; }
@keyframes idea-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .idea-skel-row, .idea-skel-row__line, .idea-skel-big,
  .idea-skel-row__line::after, .idea-skel-big__line::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Result ---- */
.idea-modal__result { text-align: center; }
.idea-modal__result .idea-modal__eyebrow { justify-content: center; }
.idea-modal__result .idea-modal__summary { text-align: left; max-width: 46ch; margin-inline: auto; }

/* ---- Circular gauges (shared SVG ring, two sizes) ---- */
.idea-ring { transform: rotate(-90deg); transform-origin: 50% 50%; overflow: visible; }
.idea-ring__track { fill: none; stroke: var(--surface-alt); }
.idea-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1100ms var(--ease-out);
}
.idea-ring--lg { width: 148px; height: 148px; }
.idea-ring--lg .idea-ring__track, .idea-ring--lg .idea-ring__fill { stroke-width: 9; }
.idea-ring--sm { width: 56px; height: 56px; }
.idea-ring--sm .idea-ring__track, .idea-ring--sm .idea-ring__fill { stroke-width: 5; }
.idea-ring--sm .idea-ring__fill { stroke: var(--accent-deep); transition-duration: 900ms; }

/* One distinct hue per factor (see FACTOR_RING_CLASS in idea-check.js) —
   muted/desaturated to match the site's restrained palette rather than
   going neon, but clearly different colors so five factor cards don't all
   read as identical gold circles. */
.idea-ring--blue .idea-ring__fill { stroke: #2f6f9e; }
.idea-ring--green .idea-ring__fill { stroke: #3f6b4f; }
.idea-ring--gold .idea-ring__fill { stroke: #93712f; }
.idea-ring--rose .idea-ring__fill { stroke: #a4485f; }
.idea-ring--violet .idea-ring__fill { stroke: #6a5b8c; }
@media (prefers-reduced-motion: reduce) {
  .idea-ring__fill { transition: none; }
}

.idea-score-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}
.idea-score-wrap__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--ink);
}
.idea-score-wrap__value { font-size: 2.75rem; font-weight: 700; line-height: 1; }
.idea-score-wrap__max { font-size: 0.875rem; color: var(--text-faint); font-weight: 500; margin-top: 0.1rem; }

.idea-factors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  text-align: left;
}
.idea-factor-card { display: flex; gap: 0.75rem; align-items: flex-start; }
.idea-factor-card__ring { position: relative; flex-shrink: 0; }
.idea-factor-card__score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}
.idea-factor-card__label { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.idea-factor-card__note { margin-top: 0.2rem; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

/* ---- Error ---- */
.idea-modal__error { text-align: center; }

@media (max-width: 640px) {
  .idea-factors-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .idea-modal { padding: var(--space-3); margin: var(--space-3) 0; }
  .idea-ring--lg { width: 120px; height: 120px; }
  .idea-score-wrap__value { font-size: 2.25rem; }
}