/* Shared help footer (community QR + support mailbox).
   Ported from prod/radeon-manager. Two deliberate differences from that version:
   - Visibility is decided server-side (``help_footer_visible``), so there is no
     `hide-site-help-footer` class and no inline script reading location.
   - The rail width follows `--site-help-footer-rail`, which tokens.css aliases
     to the unified content rail. */
body.with-site-help-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
}
body.with-site-help-footer #root {
  flex: 1 0 auto;
  align-self: stretch;
  width: 100%;
  min-height: auto;
}

/* ---- locale selection ----------------------------------------------------
   The Chinese and English footers carry DIFFERENT CONTENT, not the same content
   translated (see partials/footers/help.html). Both bodies are server-rendered
   and this pair shows exactly one.

   Driven off html[lang], which is already authoritative: the pre-paint script in
   base.html sets it from localStorage before first paint, and i18n.set() updates
   it on every toggle. So the right footer is correct on load with no flash, and
   swaps instantly on the language switch — no JS in this path.

   `display:none` is right here, not an opacity trick. That
   one had to stay focusable for keyboard users; this one must be fully removed
   from the accessibility tree, or a screen reader would read out both footers.

   Matching `lang="zh-CN"` needs the ^= prefix operator — i18n.js writes the full
   subtag, so `[lang="zh"]` would never match. */
[data-footer-locale] { display: none; }
html[lang^="en"] [data-footer-locale="en"],
html[lang^="zh"] [data-footer-locale="zh"] { display: block; }

/* align-self:center is required: under a column flex + stretch, max-width alone
   leaves the rail stuck on the left instead of matching the centered content. */
.site-help-footer-wrap {
  align-self: center;
  width: min(100%, var(--site-help-footer-rail, var(--rail, 1200px)));
  max-width: var(--site-help-footer-rail, var(--rail, 1200px));
  margin: 0;
  box-sizing: border-box;
  padding: 0 var(--page-gutter) var(--space-6);
}

.site-help-footer {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-help-footer-qr {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-1);
  box-sizing: border-box;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-help-footer-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-help-footer-text {
  flex: 1 1 auto;
  min-width: 0;
}

.site-help-footer-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.site-help-footer-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.site-help-footer-desc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-help-footer-desc a:hover {
  color: var(--text);
}

/* RADEON-INTERNAL-RECONCILED
   Docs and feedback actions. Bordered so they read as things to press, but drawn
   in --text-muted on a hairline rather than the accent: the accent is reserved for
   launching an instance, and a footer that competes with it is a footer that has
   forgotten what it is for. */
.site-help-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.site-help-footer-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.site-help-footer-action:hover {
  border-color: var(--border-emphasis);
  color: var(--text);
  text-decoration: none;
}

.site-help-footer-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-help-footer-action { transition: none; }
}

@media (max-width: 640px) {
  .site-help-footer-wrap {
    padding-bottom: var(--space-5);
  }
  .site-help-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
    gap: var(--space-4);
  }
  .site-help-footer-qr {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 641px) {
  .site-help-footer-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); }
  .site-help-footer-title, .site-help-footer-desc, .site-help-footer-text .footer-brand { grid-column: 1; }
  .site-help-footer-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}