/* ═══════════════════════════════════════════════════════════════════════════
   rails.css — the ONE place that decides where the app's action buttons live.

   History, because it explains every rule below.

   The buttons used to be a vertical rail on the right edge of each card. It was
   measured on production (390×844, Book tab, "More" expanded) and it was broken
   in two ways at once:

     rail of card 1 ... y197 → y741, with "4.4 (136)" at y665 under the Talk
                        pill, "Share" y728 under the page, "Earn"/"Filter" off
                        the bottom of the screen entirely
     rail of card 2 ... y775, a SECOND identical column, half behind the tab bar

   Fixing that took reserving the bottom furniture (tab bar 56 + Talk pill 46+12
   + summary 26 + CTA 52) and letting only the on-screen card keep its rail —
   the rails sit at z-index 25/8990/8998 while the orange CTA is 10001, so
   raising them would only have hidden the CTA. Geometry, not layering.

   The owner then chose a different shape: one horizontal row that side-scrolls,
   above the bottom navigation, in the white style Reels and Book already use,
   with each tab keeping its own buttons. That row is defined below, and the
   reasoning about the bottom furniture carries straight over — it is what
   decides how high the row has to sit.

   If you need to move a row, change it HERE. A second opinion in another file
   is what produced the overlap in the first place, and tests/one-right-rail
   enforces that this file stays the only one with an opinion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Only the card you are looking at owns the row ─────────────────────────
   Every card carries its own rail, and with the row fixed to the screen they
   would stack on the same 72px. rails.js marks the dominant card
   `sg-card-live`; until it has run nothing is hidden, because a row you cannot
   see is worse than one row too many. */
.tt-view.sg-rails-arbitrated .tt-card:not(.sg-card-live) .tt-actions {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE BAND (owner's call, 2026-09-17; position corrected 2026-09-18)

   The buttons move off the right edge and become ONE horizontal row that
   side-scrolls, in the same white style Reels and Book already use. Each tab
   keeps its own buttons — this file only decides where the row lives and how
   it behaves, never what is in it.

   WHERE, exactly (owner, 2026-09-18): "Between bottom navigation and Ask AI
   orange CTA button". Stacking from the bottom of the screen upwards:

     tab bar ......... nav, 56px on production
     ── THE ROW ──     here
     orange CTA ...... "Book this gym" / "Ask AI"
     price summary ... the line that explains the CTA
     Talk pill ....... floats above the whole stack

   An earlier pass put the row ABOVE the CTA and the pill, on the reasoning
   that the pill sat in this gap and would cover the row's last buttons. That
   was true of the old vertical rail, which nothing docked. It is not true now:
   sg-dock.js owns the bottom edge, and it has been taught to count the row as
   the first thing above the nav — so the CTA, the summary and the pill all
   stack ON TOP of the row and cannot reach it. The gap is the row's.

   That is also why this file no longer hardcodes 174px. The dock measures the
   nav and publishes `--sg-nav-h` / `--sg-safe-b`; the row is defined in terms
   of those, so a taller nav or a device with a home bar moves the row with it
   instead of leaving it floating or buried.

   Because it scrolls sideways, nothing has to hide any more: the "More"
   collapse the vertical rail needed is switched off here, so every button is
   reachable by swiping the row. rails.js adds `sg-rail-scrollable` when there
   is more to the right, and the arrow below is that indication.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Height of the row itself (44px circle + 11px label + breathing room). */
  --sg-band-height: 72px;
  /* Breathing room between the nav and the row. */
  --sg-band-gap: 4px;
  /* The row sits directly above the bottom navigation. sg-dock.js measures the
     nav every pass and publishes these; the fallbacks are production's numbers
     for the frame before the dock's first pass. */
  --sg-band-bottom: calc(var(--sg-nav-h, 56px) + var(--sg-safe-b, 0px) + var(--sg-band-gap));
  /* A .tt-card lives inside .tt-view, which already stops above the nav, so a
     card rail must not reserve it — or its safe area — twice. */
  --sg-band-bottom-card: var(--sg-band-gap);
  --sg-band-pad: 12px;
}

/* ── WHERE THE ROW SITS (fixed 2026-09-17, second pass) ───────────────────
   The first pass made every row `position: fixed`. On Book and Partner that
   put the row in the MIDDLE of the photo instead of above the CTA, and the
   cause is not the carousel's transform but containment: app.ctr576.js ships
   `.tt-card{contain:layout style paint}` and `.tt-carousel{contain:strict}`,
   and a contained element is a containing block for its fixed descendants.
   So `bottom: 174px` was measured from the bottom of the CARD, which is
   min-height:100% of a scroll-snap strip, not from the screen.

   Fixing it by removing containment would hand back the paint budget those
   two rules were added for. So each row is pinned to the bottom of whatever
   is genuinely full-screen:

     .tt-actions   card rails       absolute inside .tt-card — the card fills
                                    .tt-view, which already stops above the
                                    nav, so it only needs the gap
     .reel-actions reel slides      absolute inside .reel, a full 100dvh slide
     the three floating rails       body-level, so fixed and clearing the nav

   Every one of them still reads the SAME band variables; only the reference
   frame differs, and that is the whole reason this file exists.
   ───────────────────────────────────────────────────────────────────────── */

.tt-actions,
.reel-actions,
#sg-reels-rail,
#sg-sv-rail.sv-float,
#sg-profile-rail,
.sg-pr-host-capped {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: var(--sg-band-height) !important;
  max-height: var(--sg-band-height) !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 0 var(--sg-band-pad) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 26;
  /* Fade the right edge so a half-cut button reads as "there is more". */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}

/* Body-level rails: fixed, clearing the whole stack. */
#sg-reels-rail,
#sg-sv-rail.sv-float,
#sg-profile-rail,
.sg-pr-host-capped {
  position: fixed !important;
  bottom: var(--sg-band-bottom) !important;
}

/* ── Profile has TWO rails, and only one of them was ever styled ───────────
   profile-rail.js floats `#sg-profile-rail` only when the app has no rail of
   its own; when the app DOES render one, it extends that native rail instead
   and marks it `sg-pr-host-capped`. That host is the app's own element, so
   none of the rules above reached it: measured on production 2026-09-18,
   Profile was a VERTICAL column at x330-380, y92-696 (Sign Up, Find Gym,
   Pricing, Creator, Help, Connect, Telegram) while every other tab had the
   row. Which rail you get depends on app state, so the tab looked fixed in
   one check and unfixed in the next.
   The host joins the band on the same terms as the others. Its own
   `max-height: calc(100vh - 240px)` and `overflow-y: auto` are what made it a
   tall scrolling column, so both are overridden here. */
/* `html body` because profile-rail.js injects its own
   `.sg-pr-host-capped{overflow-y:auto!important}` from a <style> appended at
   init — later in the document, so with equal specificity it wins. Measured
   2026-09-18: max-height applied, overflow-y did not. */
html body .sg-pr-host-capped {
  max-height: var(--sg-band-height) !important;
  overflow-y: hidden !important;
  padding: 0 var(--sg-band-pad) !important;
  margin: 0 !important;
}
/* The column stacked its children vertically with a wrapper in the middle. */
.sg-pr-host-capped #sg-profile-rail-ext {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 0 !important;
}

/* Card and reel rails: absolute, pinned to the bottom of their full-screen
   parent. Same band, measured from the right edge of the world. */
.tt-actions {
  position: absolute !important;
  bottom: var(--sg-band-bottom-card) !important;
}
.reel-actions {
  position: absolute !important;
  bottom: var(--sg-band-bottom) !important;
}

.tt-actions::-webkit-scrollbar,
.reel-actions::-webkit-scrollbar,
#sg-reels-rail::-webkit-scrollbar,
#sg-sv-rail.sv-float::-webkit-scrollbar,
#sg-profile-rail::-webkit-scrollbar,
.sg-pr-host-capped::-webkit-scrollbar { display: none; }

/* A row that is fully visible should not be faded or arrowed. */
.tt-actions:not(.sg-rail-scrollable),
.reel-actions:not(.sg-rail-scrollable),
#sg-reels-rail:not(.sg-rail-scrollable),
#sg-sv-rail.sv-float:not(.sg-rail-scrollable),
#sg-profile-rail:not(.sg-rail-scrollable),
.sg-pr-host-capped:not(.sg-rail-scrollable) {
  -webkit-mask-image: none;
  mask-image: none;
}

.tt-actions > *,
.reel-actions > *,
#sg-reels-rail > *,
#sg-sv-rail.sv-float > *,
#sg-profile-rail > *,
.sg-pr-host-capped > *,
.sg-pr-host-capped #sg-profile-rail-ext > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Sideways scrolling makes hiding pointless: show every button, drop "More". */
.tt-actions .tt-action.sgi-x { display: flex !important; }
.tt-actions .tt-action.sgi-more { display: none !important; }

/* The indication: an arrow pinned to the right edge of a row that has more.
   `position: sticky` keeps it in place while the row scrolls under it, and it
   disappears once the end is reached (the class is re-evaluated on scroll). */
.sg-rail-scrollable::after {
  content: '›';
  position: sticky;
  right: 0;
  flex: 0 0 auto;
  align-self: center;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px 0 6px;
  color: rgba(255, 255, 255, .75);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}

/* The same arrow on the LEFT once the row has been scrolled (owner,
   2026-09-30: "arrow only right side not left side"). Pulled out of the flow
   with a negative margin so it appearing never shifts the buttons. Both arrows
   are tappable: rails.js pages the row when a tap lands on either edge. */
.tt-actions.sg-rail-scroll-left::before,
.sg-rail-scroll-left::before {
  content: '\2039';
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: -22px;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, .75);
  background: rgba(13, 16, 25, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}

/* ── No half-built rail on screen ──────────────────────────────────────────
   A gym card renders with the app's raw rail: emoji icons, every item
   expanded. sg-rail-ui.js turns that into the white 4 + More rail and stamps
   it `data-sgi`. Until it does, the raw version is a second, different-looking
   column of the same buttons — what the owner saw as "white button and emoji
   button on the right side".

   So: while sg-rail-ui.js is confirmed alive (`sg-rail-ui-ready` on <html>,
   set only after it has decorated a rail), an undecorated rail stays
   invisible. It is still laid out and measurable — only unpainted — so nothing
   jumps when it is decorated a frame later. If that script never runs, this
   rule never applies and the raw rail shows as before. */
.sg-rail-ui-ready .tt-actions:not([data-sgi]) {
  opacity: 0;
  pointer-events: none;
}
.tt-actions[data-sgi] {
  transition: opacity .12s linear;
}

/* ── The white the owner asked for ────────────────────────────────────────
   "Same white colour like reels and book tab buttons." Reels labels are solid
   #fff with a shadow; the card rails were rgba(255,255,255,.7) at 9px, which
   over a bright gym photo read as grey (measured on the Partner tab: the row
   was barely legible). One white, one shadow, everywhere. */
.tt-actions .tt-action-label,
.reel-actions .label,
#sg-reels-rail .sg-rr-label,
#sg-profile-rail .sg-rr-label,
.sg-pr-host-capped .sg-pr-label {
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85) !important;
}
.tt-actions .tt-action-btn,
.reel-actions .icon {
  opacity: 1 !important;
  color: #fff !important;
}

/* The row reads over any photo without darkening the picture itself. */
.tt-actions::before { content: none; }
.tt-actions,
.reel-actions,
#sg-reels-rail,
#sg-sv-rail.sv-float,
#sg-profile-rail,
.sg-pr-host-capped {
  background: linear-gradient(to top, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
}

/* A clearer "there is more than fits" than a lone chevron: the arrow sits in a
   small dark disc, so it is visible on a white-lit photo too. */
.sg-rail-scrollable::after {
  background: rgba(13, 16, 25, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0 0 2px 0;
}

/* ── The card tabs have to reach the nav, or the row cannot sit above it ──────
   Book and Partner draw their row INSIDE the card (`.tt-card` has
   `contain: content`, so a fixed child is impossible and anything sticking out
   is clipped). The card is as tall as `main.sg-tab-content`, and sg-rail-ui.js
   ends that container 134px above the bottom — room it reserves for the CTA and
   the price summary. Result on 2026-09-18: the row rendered 4px above the CARD,
   at y660–732, while the CTA sat at y656–708 and covered its icons; only the
   labels showed below it. Measured on production, 390×844.
   So the container owns the nav's edge and nothing else. The CTA, the summary
   and the Talk pill are `fixed`: sg-dock.js already stacks them above the
   reserved row, and they float over the photo the way they do on Reels.
   The class is repeated to win on specificity: sg-rail-ui.js injects
   `body.sg-r4-summary.sg-cb-active .sg-tab-content!important` (three classes),
   which is why the first attempt fixed Partner but not Book — Book is the tab
   that carries both body classes. Four classes here beats it, and because both
   are !important the later-injected sheet no longer decides. --sg-nav-h is 0 when the nav is hidden, so
   a full-bleed state still gets the whole viewport. */
html body main.sg-tab-content.sg-tab-content.sg-tab-content.sg-tab-content {
  bottom: calc(var(--sg-nav-h, 56px) + var(--sg-safe-b, 0px)) !important;
}

/* ── The Reels tab is an iframe, and it has to reach the nav too ────────────
   /reels is its own document; the SPA shows it in `.sg-reels-frame`. The frame
   is sized by app.ctr576.js, which ends it above the orange CTA
   (`body.sg-cb-active .sg-reels-frame{bottom:calc(56px+52px+safe)!important}`).
   The row inside the frame is pinned to the frame's bottom, so the order came
   out nav → CTA → row: measured on production 2026-09-18, row y660–730 with
   the CTA below it at y736–788. The owner wants the row directly above the nav
   on every tab.
   So the frame owns the nav's edge, exactly like the card tabs, and the CTA
   floats over it — sg-dock.js reserves the band for the frame because it
   cannot measure into another document. Three classes to beat the injected
   `body.sg-cb-active .sg-reels-frame !important`. */
html body .sg-reels-frame.sg-reels-frame.sg-reels-frame {
  bottom: calc(var(--sg-nav-h, 56px) + var(--sg-safe-b, 0px)) !important;
  height: calc(100dvh - var(--sg-nav-h, 56px) - var(--sg-safe-b, 0px)) !important;
}

/* The SPA's live path is not that one. It keeps a persistent wrapper,
   `#sg-reels-persistent`, which ALREADY ends at the nav (measured: 0→788), and
   puts `#sg-reels-iframe` inside it — but app.ctr576.js shortens the iframe to
   `calc(100vh - 56px - 52px - safe)` = 736px whenever the CTA is up. So the
   frame stopped 52px short of its own wrapper and the row went with it: row
   y660–732, CTA y656–708 on top of it. The iframe fills its wrapper instead;
   the wrapper is the thing that knows about the nav.
   The id is written twice on purpose: the injected rule is
   `body.sg-cb-active #sg-reels-iframe` — one id AND a class — so a single id
   here loses and the first attempt (v1.6) changed nothing on screen. */
html body #sg-reels-iframe#sg-reels-iframe {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE ORANGE CTA JOINS THE ROW (owner's call, 2026-09-18, second decision)

   Until now the bottom of the screen had three layers: nav 56 + row 72 + the
   full-width orange bar 52, plus the price summary and the Talk pill floating
   over them — 188px of chrome before any content. The owner asked for the
   orange CTA to move INTO the row with the other buttons, one strip per tab.

   It stays the SAME element, `#sg-continue-banner`. Everything that makes it
   work — the tap handler, the checkout flow, the per-tab label ("Book this gym
   · £5.49", "Find gyms near me", "Start Earning", "Continue"), the loading
   spinner sg-rail-ui.js puts in it — is bound to that id, so re-parenting or
   rebuilding it would mean re-testing checkout on every tab. Instead it is
   restyled into a pill and parked at the left end of the band, where a row's
   first item would be, and the rows are given a left inset so their circles
   start after it. Same pixels as a real first item, none of the risk.

   `sg-cta-in-row` is set by rails.js, not hardcoded here, so the whole change
   can be turned off from one line if the booking rate dips.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The pill matches the white circles' 44px so the row reads as one strip. */
  --sg-cta-h: 44px;
  /* Published by rails.js once the pill has been measured; the rows read it to
     know how far in to start. 0 until then, which is the old full-width look
     for one frame rather than a gap where the buttons should be. */
  --sg-cta-w: 0px;
}

/* The id twice, for the same reason as the Reels iframe above: sg-dock.js and
   app-patches.js both write `#sg-continue-banner` rules, and the dock also
   sets an inline `bottom` — it is taught to leave this element alone while the
   class is on (see sg-dock.js), but the specificity still has to hold. */
html body.sg-cta-in-row #sg-continue-banner#sg-continue-banner {
  left: var(--sg-band-pad) !important;
  right: auto !important;
  width: auto !important;
  /* Measured 2026-09-18: with no cap, "Ask AI \"How much have I made this
     week\"" made the pill 293px of a 390px screen on Partner and 312px on
     Profile, leaving one clipped circle and nothing to swipe. The pill takes
     at most 58% and the label ellipsises; the row keeps the rest. */
  max-width: 58% !important;
  overflow: hidden !important;
  height: var(--sg-cta-h) !important;
  /* Centred in the band, so the pill and the circles share a midline. */
  bottom: calc(var(--sg-band-bottom) + (var(--sg-band-height) - var(--sg-cta-h)) / 2) !important;
  padding: 0 18px !important;
  border-radius: calc(var(--sg-cta-h) / 2) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45) !important;
  /* A pill over a photo needs its own edge; the full-width bar never did. */
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

/* 16px was sized for a full-width bar. In a pill it pushes "Book this gym ·
   £5.49" wider than half the screen and leaves no room to swipe the row. */
/* Measured 2026-09-18: capping the pill made flexbox shrink the FIRST child,
   so "Ask AI" rendered as "As..." and "Continue" as "Co...". The primary word
   is the whole point of the button, so it never shrinks; the quoted sub-label
   ("How much have I made this week") is what gives way. */
body.sg-cta-in-row #sg-continue-banner .sg-cb-text {
  font-size: 14px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
body.sg-cta-in-row #sg-continue-banner .sg-cb-sub {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.sg-cta-in-row #sg-continue-banner .sg-cb-price {
  font-size: 12px !important;
  white-space: nowrap !important;
}


/* The rows start after the pill. Later than the `padding: 0 var(--sg-band-pad)`
   rule above and equally !important, so this wins without another class. */
/* MARGIN, not padding. Padding lives INSIDE the scroller, so the moment
   anything scrolls the row (sg-rail-ui scrolls the active chip into view, and
   these rows overflow by design) the padding scrolls away with it and the
   first buttons slide UNDER the fixed pills: measured on Book with
   padding-left 124px and scrollLeft 124, "Near Me" sat at x0-44 beneath a
   button at x12-54. A margin shortens the scroller itself, so there is no
   space under the pills for content to reach. */
body.sg-cta-in-row .tt-actions,
body.sg-cta-in-row .reel-actions,
body.sg-cta-in-row #sg-reels-rail,
body.sg-cta-in-row #sg-sv-rail.sv-float,
body.sg-cta-in-row #sg-profile-rail,
body.sg-cta-in-row .sg-pr-host-capped {
  margin-left: calc(var(--sg-cta-w) + var(--sg-band-pad) + 14px) !important;
  padding-left: var(--sg-band-pad) !important;
}

/* Inside the Reels iframe the pill is in the PARENT document and cannot be
   measured, so rails.js posts its width across and the framed copy of this
   file applies the same inset. Nothing else about the row changes. */


/* ═══════════════════════════════════════════════════════════════════════════
   ONE ROW, ONE STYLE (owner, 2026-09-18, third decision)

   "No orange button — looks same like other white button in row", and the
   floating Talk pill joins the row too. After this there is nothing floating
   over the content: the whole bottom is nav + one strip.

   The buttons keep their ids and handlers for the same reason as before —
   `#sg-continue-banner` owns checkout, and each tab's Talk pill
   (#bchat-fab … #chat-fab, one per chat personality) owns the voice agent.
   Only their looks and their place change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The main button loses the orange and takes the row's glass-circle look:
   same background, border, blur and shadow as .sg-pr-circle / .tt-action-btn. */
html body.sg-cta-in-row #sg-continue-banner#sg-continue-banner {
  background: rgba(0, 0, 0, .4) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
}

/* The Talk pill sits next in the row, after the main button. rails.js
   publishes where that is, because the main button's width changes with its
   label. Its own sheet pins it `right: 14px; z-index: 9100`, so both are
   overridden here. */
/* Each id twice. book-by-tap.css pins the pill with
   `body.sg-cb-active #bchat-fab.show{left:auto!important;right:12px!important}`
   — id + TWO classes — so the first attempt (v2.2) recoloured the pill but
   left it at the right edge, sitting on top of the row's buttons: measured
   Talk at x301-378 over the first button at x335-379. Two ids beat it. */
body.sg-cta-in-row #bchat-fab#bchat-fab,
body.sg-cta-in-row #pchat-fab#pchat-fab,
body.sg-cta-in-row #schat-fab#schat-fab,
body.sg-cta-in-row #rchat-fab#rchat-fab,
body.sg-cta-in-row #mchat-fab#mchat-fab,
body.sg-cta-in-row #chat-fab#chat-fab {
  position: fixed !important;
  left: var(--sg-talk-left, 12px) !important;
  right: auto !important;
  bottom: calc(var(--sg-band-bottom) + (var(--sg-band-height) - var(--sg-cta-h)) / 2) !important;
  height: var(--sg-cta-h) !important;
  padding: 0 14px !important;
  border-radius: calc(var(--sg-cta-h) / 2) !important;
  background: rgba(0, 0, 0, .4) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  /* Above the row's own scroll strip, below the nav. */
  z-index: 27 !important;
  animation: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ONE ROW, ONE SHAPE (owner, 2026-09-18, fourth decision — chose option A)

   "Yes but this are not same size or same looking like other buttons in same
   row." Correct: v2.3 gave both pills the row's colour but not its shape —
   the main button measured 218px wide and Talk 74px, next to 42px circles
   with a 10px label under them.

   So the main button and Talk become that same icon-and-label item. The words
   go: "Book this gym · £5.00" becomes a 💳 circle labelled "Book". The owner
   was told the price and the Ask AI prompt stop showing on screen and chose
   this over keeping the text, because it also frees ~250px — every button in
   the row now fits without the chevron.

   Ids and handlers are untouched, as before: only looks and place change.
   Revert = drop CTA_IN_ROW in rails.js.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The row's own metrics, read off .tt-action-btn.sgi in sg-rail-ui.js and
     the measured live rects: circle 42px, 10px label 3px under it. --sg-row-
     lift is the gap from the band's bottom to the circle's bottom, so both
     new items line up with the buttons already in the row. */
  /* 44px, not the measured 42px: at 42 the Gyms / Talk / Sign in circles were
     the only controls in the app under the 44px minimum tap target. */
  --sg-row-ico: 44px;
  --sg-row-cap: 12px;
  --sg-row-lift: 23px;
}

/* The main button is now a column: circle on top, label under. Its own box
   carries nothing visible — the circle inside it does — so the glass look set
   by the third decision above is switched back off here. */
html body.sg-cta-in-row #sg-continue-banner#sg-continue-banner {
  left: var(--sg-band-pad) !important;
  right: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  bottom: calc(var(--sg-band-bottom) + var(--sg-row-lift) - var(--sg-row-cap) - 3px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The label text the button used to show is what made it 218px wide. */
html body.sg-cta-in-row #sg-continue-banner .sg-cb-text,
html body.sg-cta-in-row #sg-continue-banner .sg-cb-sub,
html body.sg-cta-in-row #sg-continue-banner .sg-cb-price,
html body.sg-cta-in-row #sg-continue-banner .sg-cb-arrow {
  display: none !important;
}

/* rails.js puts these two in: the glyph and the short caption. */
html body.sg-cta-in-row #sg-continue-banner .sg-cb-ico {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--sg-row-ico) !important;
  height: var(--sg-row-ico) !important;
  border-radius: 50% !important;
  /* one-button.css owns the look of every circle in this row; this one used to
     carry its own darker glass and a thinner border. */
  background: var(--sg-btn-bg, rgba(0, 0, 0, .40)) !important;
  border: var(--sg-btn-border-width, 1.5px) solid var(--sg-btn-border-color, rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: var(--sg-btn-blur, blur(12px));
  backdrop-filter: var(--sg-btn-blur, blur(12px));
  box-shadow: var(--sg-btn-shadow, 0 2px 10px rgba(0, 0, 0, .25)) !important;
  font-size: var(--sg-btn-icon, 20px) !important;
  color: #fff !important;
  line-height: 1 !important;
}
html body.sg-cta-in-row #sg-continue-banner .sg-cb-ico svg {
  width: var(--sg-btn-icon, 20px) !important;
  height: var(--sg-btn-icon, 20px) !important;
  display: block;
}
html body.sg-cta-in-row #sg-continue-banner .sg-cb-cap {
  display: block !important;
  color: var(--sg-btn-label-color, #fff) !important;
  font-size: var(--sg-btn-label-size, 10px) !important;
  font-weight: var(--sg-btn-label-weight, 600) !important;
  line-height: var(--sg-row-cap) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85) !important;
}

/* Talk, same treatment. Its text is a bare node inside the button, not an
   element, so it cannot be hidden with a selector: `font-size: 0` collapses
   it and the glyph and caption come from pseudo-elements. Each id twice, for
   the book-by-tap.css reason noted above. */
body.sg-cta-in-row #bchat-fab#bchat-fab,
body.sg-cta-in-row #pchat-fab#pchat-fab,
body.sg-cta-in-row #schat-fab#schat-fab,
body.sg-cta-in-row #rchat-fab#rchat-fab,
body.sg-cta-in-row #mchat-fab#mchat-fab,
body.sg-cta-in-row #chat-fab#chat-fab {
  left: var(--sg-talk-left, 12px) !important;
  bottom: calc(var(--sg-band-bottom) + var(--sg-row-lift)) !important;
  width: var(--sg-row-ico) !important;
  min-width: 0 !important;
  height: var(--sg-row-ico) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--sg-btn-bg, rgba(0, 0, 0, .40)) !important;
  border: var(--sg-btn-border-width, 1.5px) solid var(--sg-btn-border-color, rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: var(--sg-btn-blur, blur(12px)) !important;
  backdrop-filter: var(--sg-btn-blur, blur(12px)) !important;
  box-shadow: var(--sg-btn-shadow, 0 2px 10px rgba(0, 0, 0, .25)) !important;
  font-size: 0 !important;
  overflow: visible !important;
}
body.sg-cta-in-row #bchat-fab#bchat-fab > *,
body.sg-cta-in-row #pchat-fab#pchat-fab > *,
body.sg-cta-in-row #schat-fab#schat-fab > *,
body.sg-cta-in-row #rchat-fab#rchat-fab > *,
body.sg-cta-in-row #mchat-fab#mchat-fab > *,
body.sg-cta-in-row #chat-fab#chat-fab > * {
  display: none !important;
}
body.sg-cta-in-row #bchat-fab#bchat-fab::before,
body.sg-cta-in-row #pchat-fab#pchat-fab::before,
body.sg-cta-in-row #schat-fab#schat-fab::before,
body.sg-cta-in-row #rchat-fab#rchat-fab::before,
body.sg-cta-in-row #mchat-fab#mchat-fab::before,
body.sg-cta-in-row #chat-fab#chat-fab::before {
  content: '\1F3A4' !important;
  font-size: 19px !important;
  line-height: 1 !important;
}
body.sg-cta-in-row #bchat-fab#bchat-fab::after,
body.sg-cta-in-row #pchat-fab#pchat-fab::after,
body.sg-cta-in-row #schat-fab#schat-fab::after,
body.sg-cta-in-row #rchat-fab#rchat-fab::after,
body.sg-cta-in-row #mchat-fab#mchat-fab::after,
body.sg-cta-in-row #chat-fab#chat-fab::after {
  content: 'Talk' !important;
  position: absolute !important;
  top: calc(100% + 3px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: var(--sg-btn-label-color, #fff) !important;
  font-size: var(--sg-btn-label-size, 10px) !important;
  font-weight: var(--sg-btn-label-weight, 600) !important;
  line-height: var(--sg-row-cap) !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE PILLS ARE IN THE ROW (owner, 2026-09-18, fourth decision)

   "These buttons are not moved in with other scrolling buttons." rails.js now
   moves the main button and the Talk pill into `.sg-row-slot`, the first item
   of the row's own scroller, so they scroll and clip with every other button.
   Everything below undoes the fixed positioning those elements carry from
   sg-dock.js / book-by-tap.css / the parked rules above, which still apply
   whenever `sg-cta-rides-row` is absent.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-row-slot {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;                    /* the row's own gap, between the two pills */
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* A slot with nothing in it must take no space, or every other row holds a gap
   open for pills that are in the live row. */
.sg-row-slot:empty { display: none !important; }

/* The space is inside the scroller now, so the rows keep only the band's pad.
   Later and equally !important, so it beats the inset rule above. */
body.sg-cta-in-row.sg-cta-rides-row .tt-actions,
body.sg-cta-in-row.sg-cta-rides-row .reel-actions,
body.sg-cta-in-row.sg-cta-rides-row #sg-reels-rail,
body.sg-cta-in-row.sg-cta-rides-row #sg-sv-rail.sv-float,
body.sg-cta-in-row.sg-cta-rides-row #sg-profile-rail,
body.sg-cta-in-row.sg-cta-rides-row .sg-pr-host-capped {
  margin-left: 0 !important;
  padding-left: var(--sg-band-pad) !important;
}

/* In the row they are ordinary flex items: no fixed corner, no own offsets,
   no z-index above the content they now sit inside. Ids doubled and `html`
   prefixed because this has to beat the parked rules above, sg-dock.js and
   book-by-tap.css. */
html body.sg-cta-rides-row .sg-row-slot > #sg-continue-banner#sg-continue-banner,
html body.sg-cta-rides-row .sg-row-slot > #bchat-fab#bchat-fab,
html body.sg-cta-rides-row .sg-row-slot > #pchat-fab#pchat-fab,
html body.sg-cta-rides-row .sg-row-slot > #schat-fab#schat-fab,
html body.sg-cta-rides-row .sg-row-slot > #rchat-fab#rchat-fab,
html body.sg-cta-rides-row .sg-row-slot > #mchat-fab#mchat-fab,
html body.sg-cta-rides-row .sg-row-slot > #chat-fab#chat-fab {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE SAME THREE BUTTONS, THE SAME LOOK, EVERY TAB (owner, 2026-09-18)

   rails.js builds Book / Talk / Ask AI from the app's own row markup, so they
   inherit the circles' size and colour wherever `.tt-actions` styles reach.
   These rules repeat that look for the rows that are NOT .tt-actions — the
   Profile rail, the ScanSquad float, the Reels strip — so the strip is one set
   of identical buttons on all five tabs instead of five near-misses.
   ═══════════════════════════════════════════════════════════════════════════ */

.sg-row-slot .tt-action.sg-row-trio {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--sg-btn-gap, 3px) !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* The circle is one-button.css's, read through var() rather than restated here:
   the numbers this block used to carry (42px, rgba(13,16,25,.62), border .10, no
   blur) were a copy of the Book rail's, and by 2026-09-19 the copy no longer
   matched anything on screen. Fallbacks are one-button.css's own values. */
.sg-row-slot .sg-row-trio > .tt-action-btn {
  width: var(--sg-btn-size, 44px) !important;
  height: var(--sg-btn-size, 44px) !important;
  border-radius: 50% !important;
  background: var(--sg-btn-bg, rgba(0, 0, 0, .40)) !important;
  border: var(--sg-btn-border-width, 1.5px) solid var(--sg-btn-border-color, rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: var(--sg-btn-blur, blur(12px)) !important;
  backdrop-filter: var(--sg-btn-blur, blur(12px)) !important;
  box-shadow: var(--sg-btn-shadow, 0 2px 10px rgba(0, 0, 0, .25)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--sg-btn-icon, 20px) !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.sg-row-slot .sg-row-trio > .tt-action-btn svg {
  width: var(--sg-btn-icon, 20px) !important;
  height: var(--sg-btn-icon, 20px) !important;
  stroke: currentColor !important;
  color: #fff !important;
}

.sg-row-slot .sg-row-trio > .tt-action-btn:active { transform: scale(.9) !important; }

/* Caption, same source. It was 72% white here and 100% everywhere else, which is
   why Book / Talk / Ask AI read greyer than the buttons beside them. */
.sg-row-slot .sg-row-trio > .tt-action-label {
  display: block !important;
  font-size: var(--sg-btn-label-size, 10px) !important;
  font-weight: var(--sg-btn-label-weight, 600) !important;
  color: var(--sg-btn-label-color, #fff) !important;
  letter-spacing: var(--sg-btn-label-tracking, .2px) !important;
  text-shadow: var(--sg-btn-label-shadow, 0 1px 4px rgba(0, 0, 0, .8)) !important;
  white-space: nowrap !important;
  max-width: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.1 !important;
}

/* The main bar and the floating Talk pill are the same doors as Ask AI and
   Talk, which are now items in the strip. Left where they were they simply sat
   on top of the new items: measured live on Book (the orange bar over "Book"
   and "Talk") and on Reels (the parent's "Gyms" pill over the framed row). So
   once the strip exists they are hidden — not removed, so every flow bound to
   them still works, and the sign-in case keeps its place in the strip via
   `.sg-cb-in-strip`. */
html body.sg-cta-rides-row #sg-continue-banner#sg-continue-banner:not(.sg-cb-in-strip),
html body.sg-cta-rides-row #bchat-fab#bchat-fab,
html body.sg-cta-rides-row #pchat-fab#pchat-fab,
html body.sg-cta-rides-row #schat-fab#schat-fab,
html body.sg-cta-rides-row #rchat-fab#rchat-fab,
html body.sg-cta-rides-row #mchat-fab#mchat-fab,
html body.sg-cta-rides-row #chat-fab#chat-fab {
  display: none !important;
}

/* In the strip the bar is an ordinary item again, so the rule above must not
   catch it: same specificity, later, and only when it is actually in there. */
html body.sg-cta-rides-row .sg-row-slot > #sg-continue-banner#sg-continue-banner {
  display: flex !important;
}


/* A row emptied into the host must not keep holding space or a background in
   the band; it is left in the DOM so whatever re-renders it still finds it. */
.sg-row-merged {
  display: none !important;
}

/* The card's own text — price, rating, opening hours — was written for a band
   with a 124px gap at its left. With the strip starting at the edge the two
   overlapped: measured live on Book, "£5.48/day" and "4.4 (136)" sat across the
   Book and Talk labels. The card's text ends above the band instead. */
body.sg-cta-rides-row .tt-info,
body.sg-cta-rides-row .tt-chips {
  padding-bottom: calc(var(--sg-band-height, 62px) + 4px) !important;
}

/* ── Content has to be able to scroll clear of the row ───────────────────────
   The containers above end at the nav and the row floats over them, which is
   right for a photo but wrong for a page that ends in text: on the Profile tab
   the closing line and the Channels section sat underneath the buttons (owner
   screenshot, 2026-09-19). Reserve the row's height at the end of the scroll,
   from the same variables the row is positioned with. */
/* …but a full-bleed card tab must NOT reserve it. Book and Partner draw a card
   that is `height: 100%` of this container, so the reserved 84px became dead
   space between the button row and the nav — the card, its name and its address
   all ended ~84px short of the bottom (owner screenshots, 2026-09-19 19:18).
   Reserve the band only on tabs that actually scroll text. `.sg-fullbleed` is
   set by rails.js; the `:has()` rule does the same where it is supported, so
   neither one alone has to win. */
html body main.sg-tab-content.sg-tab-content.sg-tab-content:not(.sg-fullbleed) {
  padding-bottom: calc(var(--sg-band-height, 72px) + 12px) !important;
}
html body main.sg-tab-content.sg-tab-content.sg-tab-content.sg-fullbleed,
html body main.sg-tab-content.sg-tab-content.sg-tab-content:has(.tt-card) {
  padding-bottom: 0 !important;
}

/* ── One bar per view, even across two documents ─────────────────────────────
   While the Reels frame is the view, the row is inside it and so is the frame's
   own copy of the bar. This document's bar has nothing to ride and used to stay
   fixed on top of the framed row's first button (owner screenshot, 2026-09-19).
   rails.js sets the class only while a painted reels frame is on screen and no
   row of this document's own is. */
html body.sg-cta-frame-owns #sg-continue-banner#sg-continue-banner {
  display: none !important;
}

/* Home and Create: the floating Talk pill and the main bar stay hidden whether
   or not a row has been built yet (rails.js#quietPills). The sign-in bar is
   the one exception and never gets .sg-cb-quiet. */
html body.sg-quiet-pills #sg-continue-banner#sg-continue-banner.sg-cb-quiet,
html body.sg-quiet-pills #bchat-fab#bchat-fab,
html body.sg-quiet-pills #pchat-fab#pchat-fab,
html body.sg-quiet-pills #schat-fab#schat-fab,
html body.sg-quiet-pills #rchat-fab#rchat-fab,
html body.sg-quiet-pills #mchat-fab#mchat-fab,
html body.sg-quiet-pills #chat-fab#chat-fab {
  display: none !important;
}

/* rails.js#paintTrio: an item this tab does not show. Same specificity as the
   flex rule above plus the class, and later, so it wins. */
.sg-row-slot .tt-action.sg-row-trio.sg-row-hidden {
  display: none !important;
}


/* ── THE ROW IS A RECTANGLE (owner, 2026-09-30) ─────────────────────────────
   "Home / Create / Shop / Profile are inside a fixed rectangle — make another
   fixed rectangle just above it for the other buttons." The band stops being a
   transparent strip over the video: it is a solid bar that touches the tab
   bar, and the reel (video, title, progress line, prompt chip) ends above it,
   so nothing is ever behind or on top of a button. */
:root {
  --sg-band-gap: 0px;
  --sg-band-height: 56px;
}
.tt-actions,
.reel-actions,
#sg-reels-rail,
#sg-sv-rail.sv-float,
#sg-profile-rail,
.sg-pr-host-capped {
  background: rgba(8, 8, 18, .98) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  box-sizing: border-box !important;
  /* Above the tab pages (Create Studio is fixed at 8995 and used to cover the
     type row completely), below the bottom bar (8999) and the tab bar (9000). */
  z-index: 8996 !important;
}

/* ── AND IT LOOKS LIKE THE TAB BAR (owner, 2026-09-30, second pass) ──────────
   Same height (56px), same glass, buttons spread evenly as flat icon + label —
   a second tab bar, not a cluster of circles on a dark strip. */
.tt-actions,
.reel-actions,
#sg-reels-rail,
#sg-sv-rail.sv-float,
#sg-profile-rail,
.sg-pr-host-capped {
  justify-content: space-around !important;
  gap: 0 !important;
  padding: 0 !important;
  /* No blur: the bar is 98% opaque, and a 24px backdrop blur over a playing
     video is the single most expensive effect a phone GPU can be asked for
     (owner, 2026-09-30: "switching tabs is very slow"). */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.tt-actions > *,
.reel-actions .reel-action,
#sg-reels-rail > *,
#sg-profile-rail > *,
.sg-pr-host-capped > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 6px 4px !important;
}
.tt-actions .tt-action-btn,
.reel-actions .icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 20px !important;
}
.tt-actions .tt-action-btn svg,
.reel-actions .icon svg {
  width: 22px !important;
  height: 22px !important;
}
.tt-actions .tt-action-label,
.reel-actions .label,
#sg-reels-rail .sg-rr-label,
#sg-profile-rail .sg-rr-label,
.sg-pr-host-capped .sg-pr-label {
  font-size: 11px !important;
  letter-spacing: .2px !important;
  color: rgba(255, 255, 255, .62) !important;
  text-shadow: none !important;
}

/* ── EVERY BUTTON IN THE BAR IS FLAT, AND EVERY PAGE ENDS ABOVE THE BARS ─────
   (owner, 2026-09-30, third pass). Ask AI / Book / Talk (rails.js trio), the
   Create type buttons (squad-create.js) and the Profile rail all drop their
   circles and take the tab-bar look; the page underneath stops at the top of
   the button bar on every tab that has one. */
.tt-actions .sg-row-slot,
.reel-actions .sg-row-slot,
#sg-reels-rail .sg-row-slot,
#sg-sv-rail.sv-float .sg-row-slot,
#sg-profile-rail .sg-row-slot,
.sg-pr-host-capped .sg-row-slot {
  display: contents !important;
}
.sg-row-slot .tt-action.sg-row-trio,
#sg-sv-rail.sv-float .sg-sv-btn,
#sg-profile-rail > *,
.sg-pr-host-capped > * {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 6px 4px !important;
}
.sg-row-slot .sg-row-trio > .tt-action-btn,
.reel-actions .tt-action-btn,
#sg-sv-rail.sv-float .sv-circle,
#sg-profile-rail .sg-rr-circle,
.sg-pr-host-capped .sg-pr-circle {
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  /* app's tap-target rule `.tt-action-btn{min-height:44px}` kept the trio's
     24px box 44px tall, so Ask AI / Book / Talk sat 14px lower than the row
     (owner screenshot, 2026-09-30). The whole 56px button is the tap target. */
  min-height: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 20px !important;
  animation: none !important;
}
.sg-row-slot .sg-row-trio > .tt-action-btn svg,
#sg-sv-rail.sv-float .sv-circle svg,
#sg-profile-rail .sg-rr-circle svg,
.sg-pr-host-capped .sg-pr-circle svg {
  width: 22px !important;
  height: 22px !important;
}
#sg-sv-rail.sv-float .sv-dot { display: none !important; }
.sg-row-slot .sg-row-trio > .tt-action-label,
#sg-sv-rail.sv-float .sv-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: rgba(255, 255, 255, .62) !important;
  text-shadow: none !important;
}
html body.sg-cta-rides-row .sg-tab-content:not(.reels-active) {
  bottom: calc(var(--sg-nav-h, 56px) + var(--sg-safe-b, 0px) + var(--sg-band-height, 56px)) !important;
}

/* ── PROFILE ROW, SAME LOOK AS EVERY OTHER ROW (owner, 2026-09-30) ──────────
   The app's own Book / Partner / Help circles (inline styles from
   sgRailCircle), the chatbot buttons (.sg-pr-circle, with live dots) and the
   in-row Sign in pill all take the flat tab-bar look. The row's own Book goes:
   the trio already has one (owner saw "Book Book"). */
.sg-pr-host-capped > :not(#sg-profile-rail-ext) > div:first-child,
.sg-pr-host-capped .sg-pr-circle,
#sg-profile-rail .sg-pr-circle,
#sg-profile-rail-ext .sg-pr-circle {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-size: 20px !important;
}
.sg-pr-host-capped > :not(#sg-profile-rail-ext) > div:first-child svg,
.sg-pr-host-capped .sg-pr-circle svg,
#sg-profile-rail .sg-pr-circle svg,
#sg-profile-rail-ext .sg-pr-circle svg {
  width: 22px !important;
  height: 22px !important;
}
.sg-pr-host-capped .sg-pr-dot,
#sg-profile-rail .sg-pr-dot,
#sg-profile-rail-ext .sg-pr-dot { display: none !important; }
.sg-pr-host-capped > * > span,
.sg-pr-host-capped .sg-pr-label,
#sg-profile-rail .sg-pr-label,
#sg-profile-rail-ext .sg-pr-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  color: rgba(255, 255, 255, .62) !important;
  text-shadow: none !important;
}
.sg-pr-host-capped > *,
.sg-pr-host-capped .sg-pr-btn,
/* Task 18 (owner, 2026-09-30): Book / Talk / Ask AI kept the generic
   `flex:1 1 0; min-width:0` rule, so in the scrolling Profile row they shrank
   to 8px and piled onto Facebook. Same box as every other Profile button. */
#sg-profile-rail .sg-row-slot .tt-action.sg-row-trio,
.sg-pr-host-capped .sg-row-slot .tt-action.sg-row-trio,
#sg-profile-rail .sg-pr-btn,
#sg-profile-rail-ext .sg-pr-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 64px !important;
  gap: 2px !important;
  padding: 6px 4px !important;
}
.sg-pr-host-capped > button[aria-label="Book a gym"] { display: none !important; }
.sg-row-slot > #sg-continue-banner.sg-cb-in-strip {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ── TASK 54: BOOK AND PARTNER GO LAST (owner, 2026-09-30) ──────────────────
   "Move book and partner button to last." The Profile row is one flex line
   (the trio slot is display:contents, so its Book is a direct flex item), so
   `order` moves both to the end without touching the markup that builds them. */
.sg-pr-host-capped > *,
.sg-pr-host-capped .sg-row-slot > * { order: 0; }
.sg-pr-host-capped .sg-row-slot > .sg-row-trio[data-sg-row-act="book"],
#sg-profile-rail .sg-row-slot > .sg-row-trio[data-sg-row-act="book"] { order: 90 !important; }
.sg-pr-host-capped > button[aria-label="Partner"] { order: 91 !important; }