/*
 * For You page styles.
 * Extracted from specs/v2-profile-prototype-APR-23.html (page-foryou block).
 * Uses tokens from tokens.css. Most card/star/kv styles are shared with Search
 * (see search.css); this file adds fit-badge coloring, the "gc-dim" modifier for
 * not-eligible cards, the profile-banner, and the complete-wizard empty state.
 */

/* For-You banner (prototype lines 125-126) */
.foryou-banner {
  background: var(--ugf-accent-tint);
  border: 1px solid var(--ugf-accent);
  border-radius: var(--ugf-radius-lg);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ugf-accent);
  line-height: 1.5;
}
.foryou-banner strong { font-weight: 600; }
.foryou-banner a {
  color: inherit;
  text-decoration: underline;
}

/* Fit badge coloring (prototype lines 102-106) */
.kv .v.fit-strong_fit {
  color: var(--ugf-fit-strong);
  font-weight: 500;
}
.kv .v.fit-possible {
  color: var(--ugf-fit-possible);
  font-weight: 500;
}
.kv .v.fit-not_eligible {
  color: var(--ugf-fit-none);
  font-weight: 500;
}
.kv .v.fit-unclear {
  color: var(--ugf-locked);
  font-weight: 500;
}
.kv .v .fit-dot {
  font-size: 0.5rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Why line (prototype line 110-111) */
.gc-why {
  font-size: 0.8125rem;
  color: var(--ugf-slate);
  line-height: 1.55;
  padding-top: 0.625rem;
  border-top: 1px solid var(--ugf-border);
  margin-bottom: 0.75rem;
}
.gc-why .why-lbl {
  font-weight: 600;
  color: var(--ugf-ink);
  margin-right: 0.25rem;
}

/* Not-eligible cards dim (prototype lines 91-92) */
.grant-card.gc-dim { opacity: 0.6; }
.grant-card.gc-dim:hover { opacity: 1; }

/* For-You status (loading / error) */
.foryou-status {
  font-size: 0.875rem;
  color: var(--ugf-text-soft);
  padding: 0.25rem 0.25rem 1rem;
  min-height: 1.25rem;
}
.foryou-status.is-error { color: var(--ugf-urgent); }

/* Complete-wizard empty state CTA */
.foryou-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--ugf-accent);
  color: var(--ugf-surface);
  border: none;
  border-radius: var(--ugf-radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.foryou-empty-cta:hover {
  background: var(--ugf-accent-ink);
}

/* T8: Inline locked question block (prototype lines 112-118). */
.lq-block {
  padding-top: 0.625rem;
  border-top: 1px solid var(--ugf-border);
  margin-bottom: 0.75rem;
}
.lq-overline {
  font-family: var(--gf-font-mono);
  font-size: 0.6875rem;
  color: var(--ugf-locked);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.lq-q {
  font-size: 0.875rem;
  color: var(--ugf-ink);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.lq-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.lq-row button {
  padding: 0.3rem 0.75rem;
  background: var(--ugf-surface);
  border: 1px solid var(--ugf-border);
  color: var(--ugf-ink);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.lq-row button:hover {
  border-color: var(--ugf-accent);
  color: var(--ugf-accent);
}
.lq-row button.skip {
  color: var(--ugf-text-soft);
}

/* T8: Locked cards get a subtle purple left-border accent so they stand out
 * from regular cards in the list. Matches the "purple accent" AC. */
.grant-card.gc-locked {
  border-left: 3px solid var(--ugf-locked);
  padding-left: calc(1.125rem - 2px);
}

/* T8: Card-body expand section (prototype lines 119-120). Hidden by default;
 * shown when the parent .grant-card has data-expanded="true". */
.grant-card .expand {
  display: none;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ugf-border);
}
.grant-card[data-expanded="true"] .expand { display: block; }

.exp-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.exp-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.exp-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ugf-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exp-text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ugf-ink);
  line-height: 1.5;
}

/* T8: pointer affordance on card body so users know it expands. The click
 * handler guards against star / CTA / lq-block clicks. */
.grant-card .card-body { cursor: pointer; }

/* T8: Re-rank transition. Quick opacity fade so the user perceives the list
 * refreshing without a jarring snap when an answer retiers multiple cards. */
.cards.cards-re-ranking {
  opacity: 0.35;
  transition: opacity 0.12s ease;
}