/**
 * grant-cards.css — shared visual language for the "grant card" rendered by
 * grant-cards.js's renderGrantCard()/renderGrantList().
 *
 * Increment D.2, Parts 13-20 (presentation only — see grant-cards.js's own
 * header for the two small markup changes that came with this pass).
 *
 * BACKGROUND: this stylesheet previously existed only as an inline <style>
 * block duplicated inside nonprofits/grants.html. nonprofits/funding.html
 * renders the exact same .gc-card markup (Suggested tab, My Matches tab,
 * Shared Organisation Matches) but never linked that block, so every grant
 * card on funding.html has been rendering with ZERO styling since Increment
 * D shipped — plain unstyled <div>s and <span>s reading as one undifferen-
 * tiated block of text. This is almost certainly the concrete cause behind
 * the D.2 brief's Section 2(B) complaint ("the Suggested grants screen's
 * continuous-text presentation"). Extracting this into a shared stylesheet
 * both pages <link> to fixes that gap and gives both pages one definition to
 * keep in sync, instead of two copies that can silently drift.
 *
 * Every class name below is unchanged from the original inline block (or
 * additive) — grants.html's and funding.html's own JS query several of
 * these classes directly (.gc-card, .gc-save-btn, .gc-detail-btn), and two
 * Playwright suites (grants.spec.ts, funding.spec.ts) assert against them.
 * Nothing here renames a class, changes button text, or touches any data-*
 * attribute — visual treatment only.
 */

/* ── Card container ──────────────────────────────────────────────────────── */
.gc-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.gc-card:hover { border-color: rgba(82,183,136,.35); }

/* ── Title / funder / source badge — 5-second scan, step 1 ─────────────────
   Title first and boldest; funder + source badge immediately below it, per
   the brief's title → funder/source → status/amount/closing → … hierarchy. */
.gc-card-head { display: flex; flex-direction: column; gap: 2px; }
.gc-title {
  font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-funder { color: var(--text-secondary); font-size: .82rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gc-source-badge {
  display: inline-block; font-size: .72rem; font-weight: 600;
  color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 9px;
}

/* ── Status / amount / closing — 5-second scan, step 2 ──────────────────────
   Status is never colour-only: fmtStatus() always renders the literal word
   ("Open"/"Closed"/…) alongside the colour, and the small dot below is
   decorative (aria-hidden via ::before, not real content) so it never
   substitutes for the text a screen reader announces. */
.gc-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; row-gap: 6px; }
.gc-status {
  padding: 2px 9px 2px 7px; border-radius: 99px; font-size: .72rem; font-weight: 700;
  background: var(--bg); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 5px;
}
.gc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.gc-status-open { color: var(--domain-nonprofits-500,#52b788); border-color: rgba(82,183,136,.4); }
.gc-status-ongoing { color: #6ea8d8; border-color: rgba(110,168,216,.4); }
.gc-status-opening_soon { color: #c99a3a; border-color: rgba(201,154,58,.4); }
.gc-status-closed { color: var(--text-tertiary); }
.gc-status-unknown { color: var(--text-tertiary); }
.gc-amount { color: var(--text-primary); font-weight: 600; }
.gc-closing { color: var(--text-secondary); }
.gc-urgent { color: #e08a45; font-weight: 700; }

/* ── Match depth / score / evidence coverage — 5-second scan, step 3 ─────── */
.gc-depth-chip { padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600; border: 1px solid var(--border); }
.gc-depth-0 { color: var(--text-tertiary); }
.gc-depth-1 { color: #6ea8d8; border-color: rgba(110,168,216,.4); }
.gc-depth-2 { color: var(--domain-nonprofits-500,#52b788); border-color: rgba(82,183,136,.4); }
.gc-depth-3 { color: #c99a3a; border-color: rgba(201,154,58,.4); }

.gc-score { font-weight: 600; color: var(--text-primary); }
.gc-score-unscored { color: var(--text-tertiary); font-weight: 400; }

.gc-coverage-chip { color: var(--text-tertiary); font-size: .76rem; }
.gc-coverage-chip.gc-coverage-detailed { color: var(--domain-nonprofits-500,#52b788); }
.gc-coverage-chip.gc-coverage-moderate { color: #6ea8d8; }

/* ── CLASSIE badge — 2026-09-24 (ADR-0060) ──────────────────────────────────
   Marks a grant/section as matched via the organisation's ACNC-reported
   CLASSIE activity classification, rather than a generic keyword guess.
   Reused across grants.html (Explore Grants), funding.html (Suggested +
   Funders tabs). Same visual family as .gc-depth-2 (the site's existing
   "strong/authoritative" green), so it reads as a trust signal, not a
   decorative label. */
.gc-classie-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600;
  color: var(--domain-nonprofits-500,#52b788); border: 1px solid rgba(82,183,136,.4);
  background: rgba(82,183,136,.08);
}

/* ── "Why this may be relevant" — checklist, 5-second scan, step 4 ─────────
   Bullets rendered as checkmarks purely for scannability; the reasons
   themselves are exactly what grant-scoring.js computed, unchanged. */
.gc-why { font-size: .82rem; color: var(--text-secondary); }
.gc-why strong { color: var(--text-primary); font-size: .8rem; }
.gc-why ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gc-why li { padding-left: 20px; position: relative; line-height: 1.5; }
.gc-why li::before { content: '✓'; position: absolute; left: 0; color: var(--domain-nonprofits-500,#52b788); font-weight: 700; }

/* ── Watch-outs / restricted-opportunity block — 5-second scan, step 5 ─────
   Always rendered inline on the card (never behind an expand/collapse) so a
   material eligibility caveat can never be missed. */
.gc-restricted {
  background: rgba(224,138,69,.08); border: 1px solid rgba(224,138,69,.3);
  border-radius: 8px; padding: 10px 12px; font-size: .82rem;
}
.gc-watchouts-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #e08a45; margin-bottom: 4px;
}
.gc-restricted-label { font-weight: 700; color: #e08a45; }
.gc-restricted-detail { color: var(--text-secondary); margin-top: 2px; }
.gc-restricted-status { color: #e08a45; margin-top: 4px; font-weight: 600; font-size: .78rem; }

/* ── Links + actions — 5-second scan, step 6 ────────────────────────────────
   Add to My Matches = primary action; View grant = secondary; View original
   grant / View guidelines = tertiary (ghost). */
.gc-links { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.gc-actions .ni-btn, .gc-links .ni-btn { min-height: 34px; }

.gc-empty { padding: 24px; text-align: center; }

/* ── Relevance feedback (Increment F.1, §10) ─────────────────────────────
   Mirrors grant.html's .gd-feedback-row (same visual language: quiet ghost
   buttons, one turns solid green once selected) so the same "Was this
   useful?" interaction pattern reads consistently whether it's asked on the
   grant detail page (eligibility_usefulness) or here on a Suggested-tab
   card (suggestion_relevance). */
.gc-feedback-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: .82rem; flex-wrap: wrap; color: var(--text-secondary); }
.gc-feedback-row .ni-btn-sm.selected { background: var(--domain-nonprofits-500,#52b788); color: #0d1f16; }
/* "No" selected is a negative confirmation, not a success -- muted grey, not the same green as Yes/Partly. */
.gc-feedback-row .gc-relevance-feedback-btn[data-feedback-value="no"].selected { background: var(--text-tertiary,#8a8f98); color: #fff; }

/* ── "Marked not relevant" card state (2026-09-17) ────────────────────────
   Demoted to the bottom of the Suggested list (funding.html, via
   GrantCards.sortNotRelevantLast) and visually muted so a returning visitor
   can tell at a glance why it's still here rather than assuming a bug. */
.gc-card-not-relevant { opacity: .68; }
.gc-card-not-relevant:hover, .gc-card-not-relevant:focus-within { opacity: 1; }
.gc-not-relevant-note { margin: 8px 0; padding: 6px 10px; border-radius: 6px; background: var(--surface-2,#f1f2f4); color: var(--text-secondary); font-size: .82rem; font-style: italic; }

/* ── Loading / error state polish (Increment D.2, Part 22-23) ────────────
   funding.html already defines .fg-loading/.fg-error/.fg-note inline (its
   own rules win by cascade order and are unchanged); grants.html used these
   same classes with NO matching CSS anywhere, so its loading/error states
   were rendering as bare unstyled text. Defining them here — the one
   stylesheet both grant-surface pages already link — fixes that gap without
   duplicating rules into a second page-specific <style> block. Presentation
   only: no change to when/why either state is shown. */
.fg-loading, .fg-error {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 16px 18px; font-size: .875rem;
}
.fg-loading {
  color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border);
}
.fg-loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--domain-nonprofits-500,#52b788);
  animation: gc-spin .8s linear infinite;
}
@keyframes gc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fg-loading::before { animation: none; }
}
.fg-error {
  color: var(--c-error, #991b1b); background: rgba(153,27,27,.06); border: 1px solid rgba(153,27,27,.25);
}
.fg-error::before { content: '⚠️'; flex-shrink: 0; }
.fg-note { font-size: .75rem; color: var(--text-tertiary); }

/* ── Mobile — comfortable touch targets, single-column stacking ──────────── */
@media (max-width: 640px) {
  .gc-card { padding: 14px 16px; }
  .gc-title { font-size: .95rem; }
  .gc-meta-row { row-gap: 8px; }
  .gc-actions, .gc-links { flex-direction: column; align-items: stretch; }
  .gc-actions .ni-btn, .gc-links .ni-btn { min-height: 40px; justify-content: center; }
}

/* ── Increment E: eligibility chip / Detailed Funding Fit line ───────────
   Only ever present once a caller has genuinely run an assessment (see
   grant-cards.js's renderEligibilityChip/renderFundingFitLine header) — no
   card shows these by default. */
.gc-eligibility-chip { padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600; border: 1px solid var(--border); }
.gc-eligibility-eligible, .gc-eligibility-likely_eligible { color: var(--domain-nonprofits-500,#52b788); border-color: rgba(82,183,136,.4); }
.gc-eligibility-needs_confirmation { color: #c99a3a; border-color: rgba(201,154,58,.4); }
.gc-eligibility-not_eligible { color: #c0392b; border-color: rgba(192,57,43,.4); }
.gc-fit-line { color: var(--text-primary); font-weight: 600; font-size: .8rem; }

/* ── Increment E: assessment modal ─────────────────────────────────────── */
.gc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.gc-modal {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px;
  max-width: 620px; width: 100%; padding: 22px 24px 26px; position: relative;
}
.gc-modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--text-tertiary); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px;
}
.gc-modal-close:hover { color: var(--text-primary); }
.gc-assess-head { margin-bottom: 12px; padding-right: 24px; }
.gc-assess-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.gc-assess-section h4 { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin: 0 0 4px; }
.gc-assess-note { font-size: .76rem; color: var(--text-tertiary); margin: 2px 0 8px; }
.gc-assess-checklist, .gc-assess-dims { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .82rem; }
.gc-check-pass { color: var(--text-primary); }
.gc-check-pass::marker { color: var(--domain-nonprofits-500,#52b788); }
.gc-check-fail { color: #c0392b; }
.gc-check-unknown { color: var(--text-tertiary); }
.gc-assess-dims li { color: var(--text-secondary); }
.gc-assess-loading { color: var(--text-tertiary); font-size: .82rem; }
.gc-assess-error { color: #c0392b; font-size: .82rem; }
.gc-assess-billing { margin-top: 10px; font-size: .72rem; color: var(--text-tertiary); }

/* ── Increment F: application effort chip + pursuit status control ───────
   Opt-in via opts.showApplicationEffort/showPursuitStatus (see
   grant-cards.js renderGrantCard) — never present on a Suggested/Search
   card unless the caller explicitly turns it on (My Matches, grant.html). */
.gc-effort-chip { padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); }
.gc-effort-low { color: var(--domain-nonprofits-500,#52b788); border-color: rgba(82,183,136,.4); }
.gc-effort-medium { color: #c99a3a; border-color: rgba(201,154,58,.4); }
.gc-effort-high { color: #c0392b; border-color: rgba(192,57,43,.4); }
.gc-pursuit-row { margin-top: 8px; }
.gc-pursuit-select {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: .8rem; color: var(--text-primary); width: 100%; max-width: 220px;
}