/* ============================================================================
   Feedback module — floating button + modal  (2026-08-11)
   The site's FOURTH shared asset (after theme.css, theme.js, gate-smash.js).
   Self-contained on purpose: light values and their dark overrides both live
   here, so a page only ever inserts one <link> and one <script>.

   Loads AFTER theme.css. Nothing in here touches nav/layout selectors, so it
   cannot disturb theme.css's load-bearing position in the cascade.

   House rules honoured: transform/opacity-only animation, no backdrop-filter,
   14px floor on mono/UI chrome, 16px floor on prose, radius scale
   (999px pills · 12px fields · 16px card · 4px submit), AA in both themes.
   ========================================================================= */

/* Scroll lock while the modal is up. `overflow` on html only — the gate's
   height:100% trick isn't needed here and would fight long pages. */
html.fb-lock { overflow: hidden; }

/* screen-reader-only text (the rating dots are drawn with ::before, so their
   labels need real text underneath) */
.fb-root .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 1 · Floating button ------------------------------------------ */

/* Sits above the dock (150) and the nav (100), below the SUC modal (1500) and
   index's cursor dot (9999). On the four gated pages the gate hides every body
   child that isn't `.gate`, so the button is covered while locked for free. */
.fb-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 160;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* entrance: held back until the JS adds .fb-ready, so the button doesn't
     compete with the hero on first paint */
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-fab.fb-ready { opacity: 1; transform: none; }
/* Out of the hero's way: the first viewport belongs to the hero (index: the
   stats bottom-right; case pages: the device visual), so the JS holds the fab
   in .fb-away until the reader scrolls past half the first screen — the dock's
   own hide-over-hero grammar. Must sit AFTER .fb-ready: same specificity, away
   wins. (The threshold is a scroll position, not the hero's own box — see the
   note in feedback.js; observing the hero broke the Work anchor.) */
.fb-fab.fb-away { opacity: 0; transform: scale(0.6) translateY(10px); pointer-events: none; }

/* The fab owns the bottom-right corner, so page footers get enough bottom
   clearance that their last line can never sit under it (measured overlapping:
   index footer-right at every width; case pages' Next-case link at ≤1100px).
   Scoped by load: this file only ships on pages that have the fab. */
footer { padding-bottom: 7.5rem; }
footer.cs-footer { padding-bottom: 10rem; }

.fb-fab-icon {
  display: block;
  width: 100%;
  height: 100%;
  /* contact shadow that lifts the glass badge off the page */
  filter: drop-shadow(0 6px 14px rgba(5, 40, 28, 0.28));
  will-change: transform;
}
/* Idle bob — the only thing that makes a static badge read as interactive
   before the cursor arrives. Transform-only, so it never repaints. */
.fb-fab.fb-ready .fb-fab-icon { animation: fbBob 3.6s ease-in-out infinite; }
@keyframes fbBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-2deg); }
}
.fb-fab:hover .fb-fab-icon,
.fb-fab:focus-visible .fb-fab-icon {
  animation: none;
  transform: scale(1.09) translateY(-3px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-fab:active .fb-fab-icon { transform: scale(0.95); transition-duration: 0.1s; }

.fb-fab:focus-visible {
  outline: 2px solid var(--teal-mid);
  outline-offset: 4px;
}

/* The glass badge is wordless, so the label is a pill that slides out on
   intent. Absolutely positioned
   and transform-animated — expanding the button itself would animate layout. */
.fb-fab-label {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FAFAF8;
  background: rgba(15, 15, 13, 0.92);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(6px) scale(0.94);
  transform-origin: right center;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-fab:hover .fb-fab-label,
.fb-fab:focus-visible .fb-fab-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

/* Dock clearance. The dock is bottom-centred and up to min(96vw, 880px) wide,
   so it only reaches under the button below ~1100px — measured, not guessed:
   overlap starts when (vw + min(96vw,880))/2 > vw - 84. `fb-dock` is set by
   feedback.js only on pages that actually have a .docknav. */
@media (max-width: 1100px) {
  html.fb-dock .fb-fab { bottom: 5.25rem; }
}
@media (max-width: 480px) {
  .fb-fab { width: 3.25rem; height: 3.25rem; right: 1rem; bottom: 1rem; }
  html.fb-dock .fb-fab { bottom: 4.75rem; }
}

/* ---------- 2 · Overlay + card ------------------------------------------- */

.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(15, 15, 13, 0.62);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fb-overlay.on { opacity: 1; }
/* while fading out (open -> close, .on removed but [hidden] not yet set for
   260ms) the transparent overlay must not swallow clicks on the page below */
.fb-overlay:not(.on) { pointer-events: none; }
.fb-overlay[hidden] { display: none; }

.fb-card {
  --fb-pad: clamp(1.35rem, 3vw, 2.15rem);
  position: relative;
  width: min(620px, 100%);
  max-height: min(88svh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 16px;
  /* no bottom padding — the sticky send bar supplies it */
  padding: var(--fb-pad) var(--fb-pad) 0;
  /* springs out of the button's corner — the same curve as the About speech
     bubble and the SUC card, so the site keeps one opening gesture */
  transform: scale(0.86) translateY(18px);
  transform-origin: bottom right;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-overlay.on .fb-card { transform: none; }

.fb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.fb-close:hover { transform: rotate(90deg); }

/* Completion rail. Fills as answers land — a quiet nudge toward finishing,
   and the only moving part that reports state. scaleX, so it never repaints. */
.fb-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.07);
}
.fb-progress i {
  display: block;
  height: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Gone on the thank-you screen — there is nothing left to complete, so a rail
   reporting progress is just a leftover. Driven off the done panel's own
   [hidden] rather than a class, so close()'s reset back to the form restores
   it with no second piece of state to keep in sync. */
.fb-card:has(.fb-done:not([hidden])) .fb-progress { display: none; }

/* ---------- 3 · Header ---------------------------------------------------- */

/* No badge here — the icon lives on the floating button; repeating it inside
   the card just crowded the heading (Chi's call, 2026-08-11). */
.fb-head {
  margin-bottom: 1.5rem;
  padding-right: 2.25rem; /* clears the close button */
}
.fb-eyebrow {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 0.4rem;
}
.fb-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.fb-title em { font-style: italic; color: var(--teal-text); }
.fb-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-mid);
  font-weight: 300;
}

/* ---------- 4 · Blocks + fields ------------------------------------------ */

.fb-block { border: 0; padding: 0; margin: 0 0 1.3rem; }
.fb-legend,
.fb-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
  padding: 0;
}
.fb-label .opt { text-transform: none; letter-spacing: 0.01em; }

.fb-field {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.fb-field { min-height: 4.75rem; }
.fb-field::placeholder { color: var(--ink-soft); opacity: 1; }
.fb-field:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18);
}

/* ---------- 5 · Role chips ----------------------------------------------- */

/* Chip language is lifted from .suc-step so the two modals feel like one system. */
.fb-roles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fb-roles input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fb-roles label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--ink-mid);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-roles label:hover { border-color: var(--teal); color: var(--teal-text); }
.fb-roles input:checked + label {
  background: var(--teal-light);
  border-color: transparent;
  color: var(--teal-text);
  transform: scale(1.04);
}
.fb-roles input:focus-visible + label { outline: 2px solid var(--teal-mid); outline-offset: 2px; }
/* the tick only exists once chosen — it pops in with the chip */
.fb-roles label::before {
  content: "";
  width: 0;
  height: 0.55rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease;
}
.fb-roles input:checked + label::before { width: 0.9rem; transform: rotate(-45deg) scale(1); }

/* ---------- 6 · Ratings --------------------------------------------------- */

.fb-rates { display: grid; gap: 0.65rem; }
/* The verdict column is a FIXED 6.5rem, not sized to its own word. Each row is
   its own grid, so an auto column let a long verdict ("Exceptional", "Calling
   now") eat the flexible label column and drag that row's dots left — the dots
   then stepped in and out row to row, and moved again as answers landed.
   6.5rem (104px) clears the widest word in RATINGS, measured at 91.8px, so the
   dots sit at one x on every row in every state. Re-measure if the words, the
   mono face or the 0.875rem label size change. */
.fb-rate {
  display: grid;
  grid-template-columns: 1fr auto 6.5rem;
  align-items: center;
  gap: 0.75rem;
}
.fb-rate-k {
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
}

/* Values run 1→5 in the DOM, so native radio arrow-keys and screen-reader
   order both match what's on screen. `:has()` supplies the fill-to-here that
   the reversed-DOM trick would otherwise buy at the cost of that ordering.
   Where :has() is missing the selector lists below are dropped and the dots
   degrade to a single filled marker — still readable, just not a bar. */
.fb-dots { display: flex; gap: 0.3rem; }
.fb-dots input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.fb-dots label {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
}
.fb-dots label::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.13);
  transition: background 0.18s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* kept in its own rule so it survives in engines without :has() */
.fb-dots input:checked + label::before { background: var(--teal); transform: scale(1.22); }
/* every dot before the chosen one */
.fb-dots label:has(~ input:checked)::before { background: var(--teal); }
/* Hover preview takes over the whole row, but only while the pointer is
   actually on a dot — resetting on any hover of the row made the dots blink
   grey when the cursor crossed the gaps. */
.fb-dots:has(label:hover) label::before { background: rgba(0, 0, 0, 0.13); transform: none; }
.fb-dots:has(label:hover) label:has(~ label:hover)::before,
.fb-dots:has(label:hover) label:hover::before { background: var(--teal); }
.fb-dots:has(label:hover) label:hover::before { transform: scale(1.3); }
.fb-dots input:focus-visible + label { outline: 2px solid var(--teal-mid); outline-offset: 1px; }

.fb-rate-v {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fb-rate-v.set { color: var(--teal-text); }

/* ---------- 8 · Footer + states ------------------------------------------ */

/* Sticky send bar. Seven questions don't fit a laptop viewport, and a submit
   button you have to scroll to find is a submit button people don't press —
   so the bar rides the bottom of the card while the form scrolls under it.
   It spans the card's side padding (negative margins) and supplies the card's
   bottom padding, which is why .fb-card sets padding-bottom to 0. */
.fb-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 1.5rem calc(-1 * var(--fb-pad)) 0;
  padding: 1rem var(--fb-pad) var(--fb-pad);
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fb-submit {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  /* --teal-text, not --teal: white on --teal is 3.39:1 and fails at this size */
  background: var(--teal-text);
  border: 0;
  border-radius: 4px;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fb-submit:hover { background: #12654B; transform: translateY(-2px); }
.fb-submit:active { transform: translateY(0); }
.fb-submit:focus-visible { outline: 2px solid var(--teal-mid); outline-offset: 3px; }
.fb-submit[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* sits ABOVE the sticky bar, so it can never be hidden behind it */
.fb-error {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #B14A37;
}
.fb-error a { color: inherit; font-weight: 500; }
.fb-error[hidden] { display: none; }

/* honeypot — visible to bots, gone for everyone else */
.fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- 9 · Thank-you --------------------------------------------------*/

.fb-done { text-align: center; padding: 1.5rem 0 var(--fb-pad); }
.fb-done[hidden], .fb-form[hidden] { display: none; }
.fb-burst {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
}
.fb-burst-disc {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--teal-light);
  display: grid;
  place-items: center;
  /* colour only matters if the emoji ever falls back to a text glyph */
  color: var(--teal-text);
  font-size: 1.75rem;
  animation: fbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes fbPop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* The 🙏 bows, rather than sitting there as a static emoji. Its own element so
   the gesture is independent of the disc's pop — two animations on one element
   would fight over `transform`. The cycle is one bow plus a long rest, so it
   reads as a repeated thank-you and not a fidget; origin at the wrists, which
   is what a bow pivots on. Transform-only, per the house rule. */
.fb-hands {
  display: block;
  line-height: 1;
  transform-origin: 50% 85%;
  animation: fbBow 2.8s 0.45s ease-in-out infinite;
}
@keyframes fbBow {
  0%   { transform: rotate(0) translateY(0) scale(1); }
  6%   { transform: rotate(-9deg) translateY(1px) scale(0.94); }  /* wind up */
  14%  { transform: rotate(3deg) translateY(3px) scale(1.04); }   /* the bow */
  22%  { transform: rotate(-2deg) translateY(-1px) scale(1.01); }
  30%  { transform: rotate(0) translateY(0) scale(1); }           /* settle */
  100% { transform: rotate(0) translateY(0) scale(1); }           /* rest */
}
/* six ✦ flung out on their own angles — the toggle's star motif, once more */
.fb-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--teal);
  font-size: 0.7rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: fbSpark 0.75s ease-out both;
  animation-delay: 0.12s;
}
@keyframes fbSpark {
  0%   { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.2); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-2.6rem) scale(1); opacity: 0; }
}
.fb-done h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.fb-done p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}
.fb-done .fb-submit { background: var(--teal-text); }

/* ---------- 10 · Small screens ------------------------------------------- */

/* Below 560 the card becomes a bottom sheet — thumb-reachable, and the slide-up
   matches where the button it came from lives. */
@media (max-width: 560px) {
  .fb-overlay { padding: 0; place-items: end stretch; }
  .fb-card {
    --fb-pad: 1.15rem;
    width: 100%;
    max-height: 92svh;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem var(--fb-pad) 0;
    transform: translateY(100%);
    transform-origin: bottom center;
  }
  .fb-progress { border-radius: 16px 16px 0 0; }
  .fb-head { margin-bottom: 1.25rem; }
  /* label + verdict word on one line, dots on their own row beneath — the
     three-column desktop row doesn't fit "Hiring confidence" plus 5 dots
     plus a word at 375, and the word stranded under the dots reads as
     belonging to nothing */
  .fb-rate { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
  .fb-rate-k { grid-column: 1; grid-row: 1; }
  .fb-rate-v { grid-column: 2; grid-row: 1; text-align: right; }
  .fb-dots { grid-column: 1 / -1; grid-row: 2; }
  .fb-rates { gap: 1rem; }
  .fb-foot { flex-direction: column; align-items: stretch; }
    .fb-submit { width: 100%; }
}

/* ---------- 11 · Dark ----------------------------------------------------- */

html[data-theme="dark"] .fb-card { background: var(--dk-card); }
html[data-theme="dark"] .fb-close { background: var(--dk-card); border-color: var(--dk-line); color: var(--ink); }
html[data-theme="dark"] .fb-progress { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .fb-progress i { background: var(--teal-mid); }
html[data-theme="dark"] .fb-field {
  background: #1B1A17;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}
html[data-theme="dark"] .fb-field:focus {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(93, 202, 165, 0.2);
}
html[data-theme="dark"] .fb-roles label { border-color: rgba(255, 255, 255, 0.18); }
/* .fb-roles input:checked + label needs nothing — --teal-light and --teal-text
   both flip on their own (deep pine surface, mint text) */
html[data-theme="dark"] .fb-dots label::before { background: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .fb-dots input:checked + label::before,
html[data-theme="dark"] .fb-dots label:has(~ input:checked)::before { background: var(--teal-mid); }
html[data-theme="dark"] .fb-dots:has(label:hover) label::before { background: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .fb-dots:has(label:hover) label:has(~ label:hover)::before,
html[data-theme="dark"] .fb-dots:has(label:hover) label:hover::before { background: var(--teal-mid); }
/* the bar is sticky, so its background has to match the card or the form
   would show through as it scrolls under */
html[data-theme="dark"] .fb-foot { background: var(--dk-card); border-top-color: var(--dk-line); }
/* mint on ink — the dock's active-pill pair; a dark teal fill can't carry white
   text against #23221E */
html[data-theme="dark"] .fb-submit,
html[data-theme="dark"] .fb-done .fb-submit { background: var(--teal-mid); color: #0F0F0D; }
html[data-theme="dark"] .fb-submit:hover { background: #7FDCBC; }
html[data-theme="dark"] .fb-error { color: #E8836B; }
html[data-theme="dark"] .fb-spark { color: var(--teal-mid); }
html[data-theme="dark"] .fb-burst-disc { color: var(--teal-mid); }
html[data-theme="dark"] .fb-fab-label { background: rgba(35, 34, 30, 0.95); }

/* ---------- 12 · Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .fb-fab, .fb-fab-icon, .fb-fab-label, .fb-overlay, .fb-card, .fb-close,
  .fb-progress i, .fb-roles label, .fb-roles label::before, .fb-dots label::before,
  .fb-submit, .fb-field {
    transition: none !important;
    animation: none !important;
  }
  .fb-fab.fb-ready { transform: none; }
  .fb-overlay.on .fb-card, .fb-card { transform: none; }
  .fb-burst-disc, .fb-spark, .fb-hands { animation: none !important; }
  .fb-spark { opacity: 0; }
}

/* ---------- 13 · Touch ---------------------------------------------------- */

/* the slide-out label is hover-only chrome; on touch the badge is the affordance */
@media (hover: none), (pointer: coarse) {
  .fb-fab-label { display: none; }
  .fb-fab.fb-ready .fb-fab-icon { animation: none; }
}