/* Additions to individual pages after the delivery (Annie's change requests). */
@layer components {
/* contact pages: WhatsApp link next to the phone number */
.link-whatsapp { color: var(--red); text-decoration: none; font-weight: 500; }

/* zh community page, "社区规则与承诺": desktop stays a table (topic | we promise |
   please); on phones first "我们承诺" with its 5 cards, then "也请你" with its 5 cards,
   each card headed by its topic (Annie, 2026-11-09). */
.pr-lbl { display: none; }
@media (max-width: 760px) {
  .pr-list { gap: 12px; }
  .pr-list .pr-row { display: contents; }
  .pr-row > span:first-child { display: none; }
  .pr-head > strong:nth-of-type(1) { order: 1; font-size: 19px; }
  .pr-row > div:nth-of-type(1) { order: 2; }
  .pr-head > strong:nth-of-type(2) { order: 3; font-size: 19px; margin-top: 24px; }
  .pr-row > div:nth-of-type(2) { order: 4; }
  .pr-row > div { flex-wrap: wrap; padding: 14px 16px; }
  .pr-row > div > span:last-child { flex: 1 1 0; min-width: 0; }
  .pr-lbl { display: block; order: -1; flex: 0 0 100%; font-size: 14.5px; font-weight: 700; color: var(--ink); }
}

/* Further reading (DE/EN) on phones: numbers stay next to their heading, no
   hyphenation in headings, tables become one card per row with the column heading
   above each value (data-label is written by the build). (Annie, 2026-11-09) */
[data-page="further-reading"] h2 { -webkit-hyphens: manual; hyphens: manual; }
[data-page="further-reading"] .flex-18 > span:first-child { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 760px) {
  [data-page="further-reading"] .round-2 { border: none; overflow: visible; }
  [data-page="further-reading"] table { min-width: 0; display: block; }
  [data-page="further-reading"] table thead { display: none; }
  [data-page="further-reading"] table tbody { display: flex; flex-direction: column; gap: 12px; }
  [data-page="further-reading"] table tr {
    display: block;
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--white);
  }
  [data-page="further-reading"] table td { display: block; padding: 4px 0; border: none; text-align: left; }
  [data-page="further-reading"] table td:first-child { font-weight: 700; font-size: 16px; padding-bottom: 8px; }
  [data-page="further-reading"] table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.02em;
  }
  [data-page="further-reading"] table td:not(:first-child) + td { margin-top: 6px; }
}

/* QR codes are links too (tap/click opens WeChat or Xiaohongshu) */
.qr-link { display: inline-block; line-height: 0; border-radius: 8px; }
.qr-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
}