/* Canonical topbar + footer mobile rules.
 *
 * Injected into the <head> of EVERY page by functions/_middleware.js — not
 * linked by hand on individual pages. That's the point: before this file
 * existed, the same one-line mobile fix was written per-page and missed a
 * different subset of pages three rounds running (terms/privacy had no
 * external stylesheet at all; then setup/ask/payday-super turned out to
 * have the same problem; then record/upload too). A page that forgets to
 * link a stylesheet can't forget to receive a response.
 *
 * Fix mobile topbar/footer issues HERE, once. Do not re-add these rules to
 * styles.css, vertical.css, or an inline <style> block on any page —
 * that's exactly the pattern that produced the bug.
 */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; }
  .topbar-tag { font-size: 11.5px; order: 3; width: 100%; }
  .topbar a[href="/app/login"] {
    font-size: 15px !important;
    padding: 6px 12px;
    border: 1px solid #e3ddd0;
    border-radius: 8px;
    display: inline-block;
  }
  /* Two footer markup conventions exist across the site (.sitefoot on most
     inner pages, .foot / .foot-row on the homepage) — both covered here. */
  .sitefoot a, .foot-row a { display: inline-block; padding: 11px 4px; }
  .foot-row a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
