/* site-support.css — "Keep the Toolkit free" (site-support.js). House tokens from house.css. */

/* header button: same height and pill as the other header controls, with a soft gold fill */
html body header .support-header-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  min-height: 44px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(242,191,94,.45); background: rgba(242,191,94,.10);
  color: var(--h-gold-1, #FFE09A); font: 500 .84rem/1 var(--h-sans, Inter, system-ui, sans-serif); letter-spacing: .02em;
  cursor: pointer; transition: background .2s, border-color .2s;
}
html body header .support-header-btn svg { width: 17px; height: 17px; color: var(--h-gold-2, #F2BF5E); }
html body header .support-header-btn:hover { background: rgba(242,191,94,.18); border-color: rgba(242,191,94,.7); }
html body header .support-header-btn:focus-visible { outline: 2px solid var(--h-gold-2, #F2BF5E); outline-offset: 2px; }
/* the word shows whenever the header has room; site-support.js adds .is-compact (heart only) when it would overflow */
html body header .support-header-btn.is-compact { width: 44px; padding: 0; justify-content: center; }
html body header .support-header-btn.is-compact svg { fill: rgba(242,191,94,.35); }
html body header .support-header-btn.is-hidden { display: none !important; }
/* phone bottom bar: Support as a fifth item */
html body .mobile-bottom-nav.has-support { grid-template-columns: repeat(5, 1fr); }
html body .mobile-bottom-nav [data-support-open] { color: var(--h-gold-2, #F2BF5E); }
html body .mobile-bottom-nav [data-support-open] svg { fill: rgba(242,191,94,.22); }
html body header .support-header-btn.is-compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shared gold button */
html body :is(.support-band-btn, .support-thanks-btn, .support-about-btn, .support-kofi) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(242,191,94,.55); background: rgba(242,191,94,.12);
  color: var(--h-gold-1, #FFE09A); font: 600 .9rem/1.2 var(--h-sans, Inter, system-ui, sans-serif);
  text-decoration: none; transition: background .2s, border-color .2s;
}
html body :is(.support-band-btn, .support-thanks-btn, .support-about-btn, .support-kofi):hover { background: rgba(242,191,94,.2); border-color: rgba(242,191,94,.8); }
html body :is(.support-band-btn, .support-thanks-btn, .support-kofi) svg { width: 18px; height: 18px; flex-shrink: 0; }

/* dialog */
html body .support-dialog { max-width: 520px; }
html body .support-dialog p { margin: 0 0 12px; }
html body .support-dialog .support-lead { color: var(--h-text, #EDE6D8); }
html body .support-dialog .support-teachers { padding: 12px 14px; border: 1px solid var(--h-line, rgba(242,191,94,.14)); border-radius: 12px; background: var(--h-panel-2, #1B1815); }
html body .support-dialog .support-kofi { margin-top: 6px; width: 100%; padding: 13px 18px; font-size: 1rem; background: linear-gradient(180deg, #FFE09A 0%, #F2BF5E 52%, #C7832C 100%); color: #1A1206; border-color: transparent; }
html body .support-dialog .support-kofi:hover { filter: brightness(1.06); }
html body .support-dialog .support-fine { margin-top: 10px; font-size: .84rem; color: var(--h-text-3, #A39A8B); }

/* footer band */
html body .site-footer { flex-wrap: wrap; }
html body .site-footer .footer-msg, html body .site-footer .footer-donate { display: none !important; }
html body .site-footer .support-band {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 980px; margin: 0 auto 14px; padding: 16px 20px;
  border: 1px solid var(--h-line-2, rgba(242,191,94,.3)); border-radius: 16px; background: rgba(242,191,94,.05);
}
html body .site-footer .support-band p { margin: 0; flex: 1 1 320px; text-align: left; color: var(--h-text-2, #CFC6B6); font-size: .95rem; line-height: 1.55; }
html body .site-footer .support-band strong { color: var(--h-text, #EDE6D8); }

/* About dialog section */
html body #toolkitInfo #support .support-about-btn { margin-top: 4px; }

/* thank-you line (unit summary, finished practice set) */
html body .support-thanks {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 6px; padding: 14px 18px;
  border: 1px solid var(--h-line, rgba(242,191,94,.14)); border-radius: 14px; background: rgba(242,191,94,.04);
}
html body .support-thanks p { margin: 0; flex: 1 1 280px; color: var(--h-text-2, #CFC6B6); font-size: .95rem; line-height: 1.55; }
html body .support-thanks-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html body .support-thanks-hide {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--h-text-3, #A39A8B); font: 500 .85rem/1 var(--h-sans, Inter, system-ui, sans-serif);
}
html body .support-thanks-hide:hover { color: var(--h-text, #EDE6D8); border-color: var(--h-line, rgba(242,191,94,.14)); }

@media (max-width: 480px) {
  html body .site-footer .support-band { padding: 14px; }
  html body .site-footer .support-band-btn, html body .support-thanks-btn { width: 100%; }
  html body .support-thanks-actions { width: 100%; }
  html body .support-thanks-hide { margin-left: auto; }
}
@media print { html body :is(.support-header-btn, .support-band, .support-thanks) { display: none !important; } }