/* Support (tip) CTAs. Uses the krzen tokens from style.css; fallbacks match them for pages with inline styles. */
.sup-block {
  max-width: 600px; margin: 2rem auto; padding: 20px 24px; text-align: left;
  background: var(--bg-card, #141414); border: 1px solid var(--border, #222); border-radius: var(--radius, 6px);
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif); color: var(--text, #e8e8e8);
}
.results .sup-block { max-width: none; margin: 20px 0 0; background: var(--bg, #0a0a0a); }
.sup-block .sup-h { font-family: var(--font-display, 'Space Mono', ui-monospace, monospace); font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 0 0 6px; color: var(--text, #e8e8e8); }
.sup-block p { font-size: 0.9rem; line-height: 1.6; color: #a3a3a3; margin: 0; }
.sup-block .sup-sign { color: var(--text, #e8e8e8); font-weight: 600; margin-top: 8px; }
.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.sup-btn, .sup-why { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.sup-btn {
  padding: 10px 18px; border-radius: var(--radius, 6px); text-decoration: none;
  color: var(--text, #e8e8e8); background: var(--bg-hover, #1a1a1a); border: 1px solid #3a3a3a;
}
.sup-btn:hover { border-color: var(--accent, #FB923C); text-decoration: none; }
.sup-why { color: var(--accent, #FB923C); padding: 0 4px; text-decoration: underline; text-underline-offset: 3px; }
.sup-btn:focus-visible, .sup-why:focus-visible { outline: 2px solid var(--accent, #FB923C); outline-offset: 2px; }
.sup-page { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.sup-page h1 { font-family: var(--font-display, 'Space Mono', monospace); font-size: 1.8rem; margin-bottom: 20px; }
.sup-page p { color: #a3a3a3; line-height: 1.7; margin: 0 0 14px; }
.sup-page .sup-note { font-size: 0.85rem; margin-top: 10px; }
.sup-page .sup-label { color: var(--text, #e8e8e8); font-weight: 600; margin: 28px 0 0; }
.sup-page .sup-label + .sup-actions { margin-top: 10px; }
.sup-page .sup-btn { min-width: 64px; justify-content: center; }
.sup-page .sup-free { color: var(--text, #e8e8e8); font-weight: 600; }
@media (max-width: 480px) { .sup-block { margin: 1.5rem 16px; padding: 18px; } .results .sup-block { margin: 20px 0 0; } }

/* v3: self-hosted portrait, stable copy space and wrapping payment options. */
[data-support-cta] { box-sizing: border-box; overflow-wrap: anywhere; }
[data-support-cta] *, [data-support-cta] *::before, [data-support-cta] *::after { box-sizing: border-box; }
[data-support-cta][hidden], [data-sct-variant][hidden] { display: none !important; }
[data-sct-variant] { min-height: 132px; }
.sct-portrait { display: inline-block; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
[data-support-cta] .sct-maker { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.sct-card-option { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; }
.sct-card-option small { font-size: 0.75rem; line-height: 1.5; color: #a3a3a3; }
.sct-dismiss { min-height: 44px; padding: 8px 12px; background: transparent; border: 0; color: #a3a3a3; font: inherit; text-decoration: underline; cursor: pointer; }
.sct-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sct-costs { display: table; width: 100%; border-collapse: collapse; margin: 16px 0; }
.sct-costs th, .sct-costs td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border, #333); white-space: normal; }
.sct-costs caption { text-align: left; color: #a3a3a3; }
@media(max-width:480px) {
 [data-sct-variant] { min-height: 180px; }
 [data-support-cta] .sct-card-option { width: 100%; }
 [data-support-cta] .sct-card-option a { width: 100%; flex: none; }
}
[data-support-cta] .sct-primary { border-color: var(--accent, #FB923C); }

/* GitHub Sponsors is the quiet third payment option. */
[data-support-cta] a.sct-github { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 8px 12px; background: transparent; border: 0; color: var(--text-muted, #a3a3a3); font: inherit; font-size: 0.85rem; line-height: 1.4; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
[data-support-cta] a.sct-github small { display: block; font-size: 0.75rem; }
[data-support-cta] a.sct-github:hover { color: var(--text, #e8e8e8); }
[data-support-cta] a.sct-github:focus-visible { outline: 2px solid var(--accent, #FB923C); outline-offset: 2px; }
[data-support-cta] .sct-github-prompt { margin: 16px 0 0; }