/* 支持 Sandy (support.html), 「猫头」 (owner-picked 2026-10-12, docs/previews/support-redesign.html direction 3), restrained:
   "fresh, not greasy". Phones first; every colour is a token.
   ONE illustration: the round cat head (the owner's rounded ears, full face and soft chin) as one solid --color-key-soft
   block, and the promise (这个网站会 / 一直免费) and the Ko-fi button live INSIDE it. Sandy peeks over the
   top of the head between the ears (owner, 2026-10-12: the preview's peek pose, paws resting on its edge), one fish hangs over
   the chin. Everything else is type, white space and
   hairlines: 一直免费 is three short rows + the whole list in a fold, the volunteers get one key-soft panel, then the FAQ.
   One tint per screen. Ko-fi keeps its own blue. The sticker edge and the tap hop live in assets/more-art.css. */
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.7;
}
.support-app [hidden] { display: none !important; }
/* The frame: gutters on <main>; on wide screens nav.css adds the companion rail as padding-right, so Sandy's dock never
   sits on the column. One 860px column. */
.support-app { position: relative; width: calc(100% - 2 * var(--layout-gutter)); min-width: 0; margin: 0 auto; padding: var(--space-5) 0 calc(var(--space-6) * 2); overflow-x: clip; }
.support-app > * { width: min(860px, 100%); margin-inline: auto; }
.support-app > * + * { margin-top: 112px; }

/* ── hero: one grid; the text column and the art column are unwrapped (display: contents) so the title and the Ko-fi
   button can sit in the same area as the cat head (phone: head / sub / notes; wide: head on the left, the
   sub-line and the payment notes beside it). DOM order stays title → sub → button → notes → art. ── */
.support-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sub" "via" "wechat" "small"; padding-top: 8px; }
.support-hero-text, .support-hero .support-pay { display: contents; }
/* the promise in the head's forehead, centred under the ears */
.support-title { grid-area: head; z-index: 2; align-self: start; justify-self: center; margin: 160px 0 0; padding: 0 12px; font-size: 2.75rem; font-weight: 650; letter-spacing: .05em; line-height: 1.15; text-align: center; word-break: keep-all; line-break: strict; }
.support-l1 { display: block; margin-bottom: .18em; color: var(--ink-2); font-size: .4em; font-weight: 500; letter-spacing: .08em; }
.support-l2 { display: block; }
html[lang="en"] .support-title { font-size: 2.125rem; letter-spacing: 0; }
/* under the head, off to the right (asymmetric): the sub-line, then the payment notes */
.support-sub { grid-area: sub; justify-self: end; max-width: 17em; margin: 34px 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.75; text-align: right; word-break: keep-all; line-break: strict; }

.support-pay { display: grid; justify-items: start; gap: var(--space-2); margin-top: 40px; }
/* the button sits in the lower face, above the chin */
.support-hero .support-kofi, .support-hero .support-preparing { grid-area: head; z-index: 2; align-self: end; justify-self: center; margin-bottom: 58px; }
.support-via, .support-wechat-note, .support-small { justify-self: end; max-width: 32em; text-align: right; text-wrap: balance; word-break: keep-all; line-break: strict; }
.support-via { grid-area: via; margin-top: 10px; }
.support-small { grid-area: small; margin-top: 4px; }
.support-wechat-note { grid-area: wechat; }
.support-wechat-note { justify-content: flex-end; }
/* Ko-fi's own pill, in a darker Ko-fi blue so white text passes AA (#2f6fd6 on white text: 4.8:1). It stays Ko-fi blue in every
   palette: it's the payment provider's brand, not page chrome (the page's own primary is the apricot --color-primary). */
.support-kofi {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; max-width: 100%; padding: 12px 28px;
  border-radius: var(--radius-pill); background: #2f6fd6; color: #fff;
  font-size: 1.05rem; font-weight: 700; line-height: 1.4; text-decoration: none; text-align: center;
  box-shadow: 0 4px 12px rgb(47 111 214 / .16);
  transition: background-color .15s ease;
}
.support-kofi:hover { background: #255fbf; }
.support-kofi:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 3px; }
.support-kofi-cup { flex: 0 0 auto; width: 26px; height: 26px; }
/* the line under the donate button: says it's a payment, through Ko-fi (some people took Ko-fi for a social site) */
.support-via { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
/* In WeChat only: a quiet line under the button, with a copy-link text button (≥ 44px tall) */
.support-wechat-note { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.support-copy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--color-link); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.support-copy:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; }
.support-preparing { margin: 0; padding: var(--space-3) var(--space-5); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-pill); color: var(--ink-2); background: var(--surface); font-size: .92rem; }
.support-small { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* the art shares the head area: 70px of sky above the head for Sandy, then the head itself (.more-cathead in
   assets/more-art.css: the owner's rounder shape, one solid key-soft block) */
.support-hero-art { grid-area: head; position: relative; justify-self: center; width: 320px; height: 343px; margin-top: 8px; }
/* Sandy peeking over the top of the head, centred between the ears: her paws rest on the forehead's edge (the bottom of the
   drawing overlaps it a little). A tap on her → one hop (more-art.js); the Ko-fi tap → the same one happy hop (support.js) */
.support-s-sandy { z-index: 2; width: 112px; left: 104px; top: 54px; }
/* one fish hanging over the chin's left curve */
.support-s-fish { z-index: 3; width: 86px; left: -6px; bottom: 6px; rotate: -14deg; }

/* ── sections ── */
.support-section { position: relative; min-width: 0; }
.support-heading { margin: 0 0 var(--space-5); color: var(--ink); font-size: 1.375rem; font-weight: 600; line-height: 1.4; }

/* 一直免费: three short rows (the items' own words, before 「：」), then the whole list in one fold */
.support-free-short { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.support-free-short li { position: relative; padding: 16px 0 16px 22px; border-bottom: 1px solid var(--color-line); color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.6; }
.support-free-short li::before { content: ""; position: absolute; left: 2px; top: calc(16px + .8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-key); }
.support-free-all { border-bottom: 1px solid var(--color-line); }
.support-free-all summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; color: var(--ink-2); font-size: .95rem; font-weight: 500; cursor: pointer; list-style: none; }
.support-free-all summary::-webkit-details-marker { display: none; }
.support-free-all summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); background: var(--color-key-soft); font-weight: 500; }
.support-free-all[open] summary::after { content: "−"; }
.support-free-all summary:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }
.support-free-all .support-free { margin-bottom: var(--space-4); border-top: 0; }
/* the full list inside the fold: quiet rows, a small key dot before each line */
.support-free { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.support-free li { position: relative; min-width: 0; padding: 18px 0 18px 22px; border-bottom: 1px solid var(--color-line); color: var(--ink); font-size: .95rem; line-height: 1.75; }
.support-free li::before { content: ""; position: absolute; left: 2px; top: calc(18px + .875em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-key); }

/* Volunteers: the one tinted panel below the hero */
.support-tint { padding: 48px 48px 40px; border-radius: 28px; background: var(--color-key-soft); }
.support-band-in { max-width: 36em; }
.support-help { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: .95rem; line-height: 1.85; }
.support-help-link { margin: 0; }
.support-help-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); font-size: .95rem; font-weight: 500; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }
.support-help-link a:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }

/* QR codes (when enabled): one plain card */
.support-card { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--surface); }
.support-qr .support-heading { margin: 0; }
.support-qr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); }
.support-qr figure { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
.support-qr img { width: 200px; height: 200px; border-radius: 12px; background: #fff; }
.support-qr figcaption { color: var(--muted); font-size: .8rem; }

/* FAQ: two columns of hairline rows, a +/− disc on the key tint */
.support-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.support-faq { border-bottom: 1px solid var(--color-line); }
.support-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; color: var(--ink); font-size: .95rem; font-weight: 500; cursor: pointer; list-style: none; }
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); background: var(--color-key-soft); font-weight: 500; }
.support-faq[open] summary::after { content: "−"; }
.support-faq summary:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }
.support-faq p { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: .95rem; line-height: 1.8; }
.support-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Wide screens: the cat head on the left at full size, the sub-line and the payment notes beside it (lower right) */
@media (min-width: 1181px) {
  .support-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head sub" "head via" "head wechat" "head small"; grid-template-rows: 1fr auto auto auto; column-gap: 48px; padding-top: 40px; }
  .support-hero-art { justify-self: start; width: 440px; height: 466px; margin-top: 0; }
  .support-cathead { width: 440px; height: 376px; clip-path: var(--more-cathead-l); }
  .support-s-sandy { width: 132px; left: 154px; top: 82px; }
  .support-s-fish { width: 112px; left: -4px; bottom: 8px; }
  .support-title { justify-self: start; width: 440px; margin-top: 214px; font-size: 3.75rem; }
  html[lang="en"] .support-title { font-size: 2.75rem; }
  .support-hero .support-kofi, .support-hero .support-preparing { justify-self: start; width: max-content; margin-left: 0; margin-bottom: 84px; translate: calc(220px - 50%) 0; }
  .support-sub, .support-via, .support-wechat-note, .support-small { justify-self: start; text-align: left; }
  .support-sub { align-self: end; max-width: 20em; margin: 0 0 12px; font-size: 1.125rem; }
  .support-small { margin-bottom: 120px; }
  .support-wechat-note { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .support-app > * + * { margin-top: 80px; }
  .support-free { grid-template-columns: minmax(0, 1fr); }
  .support-free li { padding: 16px 0 16px 20px; font-size: .92rem; }
  .support-free li::before { top: calc(16px + .875em - 3px); }
  .support-tint { padding: 32px 24px 24px; border-radius: 24px; }
  .support-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .support-kofi { padding: 12px 22px; }
  .support-card { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .support-kofi { transition: none; }
}

/* ── small spot doodles, one per section (owner-picked option A without the envelope, 2026-10-12) ──
   decorative marker stickers sitting in white space, never on text; .stk gives the paper edge and the one tap hop */
.support-section { position: relative; }
.sd-doodle { position: absolute; }
.sd-matcha { width: 56px; right: 4px; top: -6px; rotate: 6deg; }                         /* 一直免费: take your time, it's free */
.sd-pencil { width: 84px; right: 16px; bottom: 10px; }                                   /* volunteers: Sandy writing to you */
.sd-yarn { width: 52px; left: calc(50% - 26px); bottom: 0; rotate: -6deg; }              /* the FAQ's full stop */
.support-faq-section { padding-bottom: 72px; }
/* phones: the link keeps clear of writing Sandy (English "Tell me how you'd like to help ›" is long) */
@media (max-width: 900px) { .support-tint { padding-bottom: 36px; } .support-tint a { display: inline-block; max-width: calc(100% - 96px); } }
@media (min-width: 1181px) {
  .sd-matcha { width: 64px; top: -10px; }
  .sd-pencil { width: 120px; right: 48px; bottom: 32px; }
  .sd-yarn { width: 60px; }
  .support-faq-section { padding-bottom: 104px; }   /* the two FAQ columns end at different heights; the yarn sits below both */
}