/* "Support the developer" (10/25): the header button and its dialog, shared by the app, the landing page,
   /resources and /support. Words and the one link live in js/support.js.
   Blue halo ink, never gold: gold is for primary actions and easter eggs, and a tip jar is neither.
   Own tokens (same values as the app's --halo / --halo-ink / --surface) so every page looks the same whatever
   stylesheet it carries. All text pairs checked to WCAG AA (4.5:1). */
:root {
  --sd-ink: #2458b8;   /* text: 6.4:1 on white, 6.0:1 on #f4f6f9 */
  --sd-halo: #3d8bff;  /* the heart and the ring only, never text */
  --sd-ring: rgb(61 139 255 / .55);
  --sd-faint: rgb(61 139 255 / .08);
  --sd-surface: #ffffff;
  --sd-text: #10141c;
  --sd-soft: #5b6475;  /* 5.9:1 on white */
  --sd-line: #dfe4ec;
}
:root[data-theme="dark"] {
  --sd-ink: #8cc2ff; --sd-halo: #5aa9ff; --sd-ring: rgb(90 169 255 / .5); --sd-faint: rgb(90 169 255 / .1);
  --sd-surface: #111824; --sd-text: #e8edf5; --sd-soft: #8b96a8; --sd-line: #1f2939;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sd-ink: #8cc2ff; --sd-halo: #5aa9ff; --sd-ring: rgb(90 169 255 / .5); --sd-faint: rgb(90 169 255 / .1);
    --sd-surface: #111824; --sd-text: #e8edf5; --sd-soft: #8b96a8; --sd-line: #1f2939;
  }
}

/* ---------- The button: a quiet halo pill right of the wordmark ---------- */
.support-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 36px; padding: 0 12px 0 10px; margin: 0 auto 0 6px; /* margin-right auto: sits by the brand, not centered */
  border-radius: 999px; border: 1px solid var(--sd-ring); background: transparent;
  color: var(--sd-ink); font: inherit; font-size: .9rem; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.support-btn:hover { background: var(--sd-faint); }
.support-btn:focus-visible { outline: 2px solid var(--sd-halo); outline-offset: 2px; }
.support-btn .sd-heart { width: 16px; height: 16px; fill: var(--sd-halo); flex: 0 0 auto; }
.support-btn .sd-short { display: none; }
/* Phones: heart + "Support". The accessible name stays "Support the developer" (aria-label). */
@media (max-width: 767px) {
  .support-btn .sd-full { display: none; }
  .support-btn .sd-short { display: inline; }
}

/* App header (app.html .topbar): the landing pages put it inside their own header row the same way. */
.topbar .support-btn { margin-left: 4px; }
/* Signed in, the header also holds four 44px icons (Messages, Ward Bulletin, Settings, Profile), so on phones:
   under 520px the pill drops to the heart alone (36px circle, over the 24px target minimum), and under 430px
   the brand shows the "MoNomo" wordmark without the M mark (same button, same name, same seven-tap egg).
   That keeps every icon at 44px with its usual gap at 360px. Guests have no icons and keep the full brand
   and "Support". */
@media (max-width: 519px) {
  body:not(.guest):not(.auth) .topbar .support-btn { width: 36px; padding: 0; justify-content: center; }
  body:not(.guest):not(.auth) .topbar .support-btn .sd-short { display: none; }
}
@media (max-width: 429px) {
  body:not(.guest):not(.auth) .topbar .brand .logo-mark { display: none; }
}
/* The website's header rows (landing + /resources + guide pages .head-row, /support .site-header): brand, this,
   then the nav. On phones the nav already fills the row, so the pill drops to the heart alone and the row tightens.
   Three-link headers (/resources and the guide pages: Guides, Resources, Sign in) need it a little wider. */
.head-row .support-btn, .site-header .support-btn { margin-left: 2px; }
.head-row .brand { flex: 0 0 auto; } /* never squeeze the M mark to nothing (its img has max-width: 100%) */
@media (max-width: 519px) {
  .head-row .support-btn, .site-header .support-btn { width: 36px; padding: 0; justify-content: center; }
  .head-row .support-btn .sd-short, .site-header .support-btn .sd-short { display: none; }
}
@media (max-width: 599px) {
  .head-row:has(.head-nav > :nth-child(3)) .support-btn { width: 36px; padding: 0; justify-content: center; }
  .head-row:has(.head-nav > :nth-child(3)) .support-btn .sd-short { display: none; }
  .head-row { gap: 6px; }
  .head-row .brand { gap: 6px; }
  .head-row .nav-link { padding: 0 6px; }
  .head-row .btn-sm { padding: 0 10px; }
  .head-row .head-nav { gap: 0; }
}
/* Narrower still there is room for the M mark OR the wordmark, not both (before this button the landing page
   already squeezed its mark to zero width at 360px). Two-link headers keep "MoNomo" and drop the mark, the same
   call as the signed-in app; three-link headers have room only for the mark. The link keeps its "MoNomo home"
   name either way. */
@media (max-width: 429px) {
  .head-row:not(:has(.head-nav > :nth-child(3))) .brand picture { display: none; }
}
@media (max-width: 479px) {
  .head-row:has(.head-nav > :nth-child(3)) .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- The dialog body (the app's sheet and the pages' popover) ---------- */
.sd-body { text-align: left; }
.sd-body h2 { margin: 6px 0 10px; padding: 0; border: 0; text-align: center; font-size: 1.35rem; }
.sd-body h3 { margin: 22px 0 6px; font-size: 1rem; }
.sd-body p { margin: 0 0 10px; }
.sd-mark { display: grid; place-items: center; margin: 4px auto 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sd-faint); box-shadow: 0 0 0 1px var(--sd-ring), 0 0 18px var(--sd-faint); }
.sd-mark .sd-heart { width: 26px; height: 26px; fill: var(--sd-halo); }
.sd-note { color: var(--sd-soft); font-size: .92rem; }
/* "Coming soon": a dashed, disabled slot where the tip link will go. Full-contrast text, not faded. */
.sd-soon {
  display: block; width: 100%; min-height: 48px; margin: 14px 0 4px; border-radius: 999px;
  border: 1.5px dashed var(--sd-ring); background: none; color: var(--sd-ink);
  font: inherit; font-weight: 700; cursor: not-allowed;
}
.sd-soon-note { text-align: center; color: var(--sd-soft); font-size: .88rem; }
.sd-ways { margin: 0; padding-left: 1.2em; }
.sd-ways li { margin: 4px 0; }
.sd-ways a { color: var(--sd-ink); text-decoration-color: currentColor; }
.sd-close { margin-top: 18px; }
.sd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The static pages' popover (no script: Escape and a tap outside close it) ---------- */
.support-pop {
  position: fixed; inset: 0; margin: auto; box-sizing: border-box;
  width: min(26rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; height: fit-content;
  padding: 20px 20px 18px; border: 1px solid var(--sd-line); border-radius: 18px;
  background: var(--sd-surface); color: var(--sd-text); line-height: 1.55; font-size: 1rem;
  box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
.support-pop:focus { outline: none; }
.support-pop::backdrop { background: rgb(5 8 14 / .55); }
.support-pop .sd-close {
  display: block; width: 100%; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sd-line); background: transparent; color: var(--sd-text); font: inherit; font-weight: 700;
}
.support-pop .sd-close:hover { border-color: var(--sd-soft); }
.support-pop a:focus-visible, .support-pop .sd-close:focus-visible { outline: 2px solid var(--sd-halo); outline-offset: 2px; }
/* A browser too old for popovers would show the dialog loose on the page and a button that does nothing:
   hide both there. Popovers: Chrome 114, Safari 17, Firefox 125. */
@supports not selector(:popover-open) {
  .support-pop, .support-btn[popovertarget] { display: none; }
}

/* The app sheet: a readable column on wide screens (same cap as the podcast sheet). */
.sheet:has(> .sd-body) { max-width: 560px; margin-inline: auto; }