/* Installer faces (Mac vs Windows) and phone Send to computer. No tutorial. */

/*
 * Default is Windows. Almost every download is. Mac is the opt-in: the head
 * bootstrap sets html[data-fb-download-os=macos] before first paint on a
 * Macintosh UA. Both faces stay in the tree so a Mac visitor never flashes
 * "Download for Windows".
 */
a[data-fb-desktop-download] [data-fb-download-mark='macos'],
a[data-fb-desktop-download] [data-fb-download-label='macos'] {
  display: none !important;
}
html[data-fb-download-os='macos'] a[data-fb-desktop-download] [data-fb-download-mark='windows'],
html[data-fb-download-os='macos'] a[data-fb-desktop-download] [data-fb-download-label='windows'] {
  display: none !important;
}
html[data-fb-download-os='macos'] a[data-fb-desktop-download] [data-fb-download-mark='macos'],
html[data-fb-download-os='macos'] a[data-fb-desktop-download] [data-fb-download-label='macos'] {
  display: unset !important;
}

/*
 * The other platform, as a text link. Default is Windows, so the Mac link
 * is the one that shows until the head bootstrap says otherwise.
 */
a[data-fb-download-alt] {
  display: none !important;
}
html:not([data-fb-download-os]) a[data-fb-download-alt='macos'],
html[data-fb-download-os='windows'] a[data-fb-download-alt='macos'],
html[data-fb-download-os='macos'] a[data-fb-download-alt='windows'] {
  display: inline !important;
}

a[data-fb-desktop-download] [data-fb-download-busy] {
  display: none !important;
}
a[data-fb-desktop-download][aria-busy='true'] {
  pointer-events: none;
  cursor: progress;
}
a[data-fb-desktop-download][aria-busy='true'] [data-fb-download-mark],
a[data-fb-desktop-download][aria-busy='true'] [data-fb-download-label] {
  display: none !important;
}
a[data-fb-desktop-download][aria-busy='true'] [data-fb-download-busy] {
  display: inline-flex !important;
}
a[data-fb-download-alt][aria-busy='true'] {
  pointer-events: none;
  cursor: progress;
}

@keyframes fb-download-spin {
  to { transform: rotate(360deg); }
}
a[data-fb-desktop-download] [data-fb-download-busy] {
  align-items: center;
  gap: 8px;
}
a[data-fb-desktop-download] [data-fb-download-spinner] {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fb-download-spin 0.7s linear infinite;
}

/*
 * Phone vs computer download. 768px is Tailwind `md`, the same cut the
 * marketing rail already uses (`max-md:hidden`). A phone-sized window must
 * show "Send to my computer" even when the UA still says desktop — that is
 * how the button is tested, and how a resized browser looks. User-agent
 * handheld (iPad landscape) is applied as `html[data-fb-handheld]` from
 * overlay.js, because that device is wider than 768 and still cannot install.
 *
 * Never show both send buttons. Brave on iPhone often spoofs a desktop UA
 * and may block the detector script; `-webkit-touch-callout` is an iOS
 * WebKit engine feature (Safari, Chrome, Brave, Firefox on iPhone) and
 * survives that. Android Chrome does not implement it.
 */
[data-fb-send-computer],
[data-fb-send-hint] {
  display: none !important;
}
@media (max-width: 767px) {
  a[data-fb-desktop-download],
  [data-fb-download-alts],
  a[data-fb-download-alt] {
    display: none !important;
  }
  @supports (-webkit-touch-callout: none) {
    html:not([data-fb-send-os]) a[data-fb-send-computer][data-fb-send-os='macos'] {
      display: inline-flex !important;
    }
    html:not([data-fb-send-os]) footer a[data-fb-send-computer][data-fb-send-os='macos'] {
      display: inline !important;
    }
    html:not([data-fb-send-os]) [data-fb-send-hint='macos'] {
      display: block !important;
    }
  }
  @supports not (-webkit-touch-callout: none) {
    html:not([data-fb-send-os]) a[data-fb-send-computer][data-fb-send-os='windows'] {
      display: inline-flex !important;
    }
    html:not([data-fb-send-os]) footer a[data-fb-send-computer][data-fb-send-os='windows'] {
      display: inline !important;
    }
    html:not([data-fb-send-os]) [data-fb-send-hint='windows'] {
      display: block !important;
    }
  }
  html[data-fb-send-os='macos'] a[data-fb-send-computer][data-fb-send-os='macos'] {
    display: inline-flex !important;
  }
  html[data-fb-send-os='macos'] footer a[data-fb-send-computer][data-fb-send-os='macos'] {
    display: inline !important;
  }
  html[data-fb-send-os='macos'] [data-fb-send-hint='macos'] {
    display: block !important;
  }
  html[data-fb-send-os='windows'] a[data-fb-send-computer][data-fb-send-os='windows'] {
    display: inline-flex !important;
  }
  html[data-fb-send-os='windows'] footer a[data-fb-send-computer][data-fb-send-os='windows'] {
    display: inline !important;
  }
  html[data-fb-send-os='windows'] [data-fb-send-hint='windows'] {
    display: block !important;
  }
}
html[data-fb-handheld] a[data-fb-desktop-download],
html[data-fb-handheld] [data-fb-download-alts],
html[data-fb-handheld] a[data-fb-download-alt] {
  display: none !important;
}

/*
 * The homepage sign-up card is the mirror of the installer above: it appears
 * exactly where the installer cannot, and nowhere else. Owner, 2026-09-09.
 *
 * On a computer the card had no job. The download works signed out — 429 of
 * the 440 download-intent rows all-time were made signed out — and the account
 * is what the *app* needs, because Director will not run without one and the
 * app asks for it itself. So a desktop visitor who signed up here had not
 * moved forward: they were already on the machine that can install, and the
 * page asked for an address instead of handing over the file. The fortnight to
 * 9 Sep: 155 desktop homepage visitors, 14 download clicks, and of 31 accounts
 * made only 8 ever asked for the file. Both paid sign-ups who became real app
 * users downloaded first and signed up afterwards.
 *
 * A phone keeps it, unchanged. There the address is the only way the file
 * reaches a machine that can run it.
 *
 * ## Why this rule lives here and not in Tailwind
 *
 * `md:hidden` on the card would be a width test, and width is not the
 * question — "can this machine install Flockbay" is, and the answer three
 * lines up is width OR user-agent handheld. An iPad in landscape is wider than
 * 768 and still cannot install, so a width-only rule would take the card away
 * from the one device left with nothing else to click. Keeping both halves in
 * one file is what stops them drifting apart; the same argument put the
 * installer's own 768 here rather than in a third opinion.
 *
 * The card starts hidden and `overlay.js` reveals it on a handheld a moment
 * later, never the other way round. The wrong flash to have is the one every
 * desktop visitor sees.
 *
 * If `overlay.js` never runs, an iPad landscape gets the installer and no
 * card — the same degraded state that rule already had before this one
 * existed, and not an empty column.
 */
@media (min-width: 768px) {
  html:not([data-fb-handheld]) [data-fb-homepage-auth] {
    display: none !important;
  }
}

html[data-fb-handheld][data-fb-send-os='macos'] a[data-fb-send-computer][data-fb-send-os='macos'] {
  display: inline-flex !important;
}
html[data-fb-handheld][data-fb-send-os='macos'] footer a[data-fb-send-computer][data-fb-send-os='macos'] {
  display: inline !important;
}
html[data-fb-handheld][data-fb-send-os='macos'] [data-fb-send-hint='macos'] {
  display: block !important;
}
html[data-fb-handheld][data-fb-send-os='windows'] a[data-fb-send-computer][data-fb-send-os='windows'] {
  display: inline-flex !important;
}
html[data-fb-handheld][data-fb-send-os='windows'] footer a[data-fb-send-computer][data-fb-send-os='windows'] {
  display: inline !important;
}
html[data-fb-handheld][data-fb-send-os='windows'] [data-fb-send-hint='windows'] {
  display: block !important;
}