/*
 * One button look, everywhere. (owner, 2026-09-19)
 *
 * WHY
 * "Why in reels tab below button are not same colour, same looking like share
 *  button or search button — book button, talk button, ask AI button? Same in
 *  book tab, scansquad tab, partner tab."
 *
 * Because five different places each painted their own circle, and no two of
 * them agreed. Read off the source, not guessed:
 *
 *   reels/index.html  .reel-action .icon   44px  rgba(0,0,0,.4)      border 1.5px .12  blur 12px  22px SVG
 *   sg-rail-ui.js     .sg-rr-circle        44px  rgba(20,20,35,.72)  border 1px   .14  blur 12px  20px SVG
 *   sg-rail-ui.js     .tt-action-btn.sgi   42px  rgba(13,16,25,.62)  border 1px   .09  blur  6px  20px SVG
 *   sg-scansquad.js   .creator-side-btn    42px  purple/green/orange tints, inline   blur  8px  COLOUR EMOJI
 *   rails.js          .sg-row-trio         42px  rgba(13,16,25,.62)  border 1px   .10  no blur   COLOUR EMOJI
 *
 * and two more rails found on the second pass, once he said "all remaining
 * button also":
 *
 *   profile-rail.js   .sg-pr-circle        44px  rgba(0,0,0,.4)      border 1px   .12  blur 12px  22px SVG
 *   squad-create.js   .sv-circle           44px  rgba(255,109,0,.18) border 1px orange  blur 12px  19px EMOJI + orange glow
 *
 * plus three caption styles: 10px/600 full white (Reels), 9px/700 full white
 * (ScanSquad, reels rail), 10px/600 at 72% white (Book / Talk / Ask AI). So the
 * trio always read bigger, greyer and — because of the emoji — in a different
 * colour family from the Share, Save, Search, Near me and Verify buttons sitting
 * right beside it, and ScanSquad's rail was four different colours at once.
 *
 * rails.css already carried a "THE SAME THREE BUTTONS, THE SAME LOOK, EVERY TAB"
 * section (2026-09-18). It could not deliver that, because it *restated* the
 * numbers for one row instead of sharing them: every one of the differences
 * above is a copy that drifted from the copy it was taken from.
 *
 * THE RULE
 * The circle and its caption are defined once — here — as custom properties.
 * Every row consumes them with var(). Changing the strip's look is changing one
 * number in one file, and no row can be "nearly" the same again.
 *
 * WHICH LOOK WON
 * Reels' Share/Save, because that is the button he is comparing everything to
 * and because the buttons over video are the hardest case: 44px, real blur,
 * full-white caption. The flatter 42px Book/Partner circle is the one that
 * looked cheap next to it.
 *
 * WHAT IS NOT DECIDED HERE
 * Position, band size, which buttons exist, and who is orange. Those stay in
 * rails.css, sg-rail-ui.js and one-orange.css. This file decides only what a
 * strip button looks like once something else has put it there.
 *
 * WHY THE !important BELOW IS ONLY ON TWO BLOCKS
 * The rows that live in stylesheets read these properties directly, so they need
 * no override at all. The two that do are ScanSquad's rail, which writes its
 * colours into style attributes from JS, and nothing else — an inline style can
 * only be beaten with !important.
 *
 * REVERSIBILITY
 * One file, one <link> per document. Delete the link and every row falls back to
 * the var() fallbacks next to it, which are this file's values, so the app stays
 * consistent even without it; nothing is unwired and no button moves.
 */

:root {
  /* The circle. */
  --sg-btn-size: 44px;
  --sg-btn-bg: rgba(0, 0, 0, .40);
  --sg-btn-border-width: 1.5px;
  --sg-btn-border-color: rgba(255, 255, 255, .12);
  --sg-btn-blur: blur(12px);
  --sg-btn-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  /* 20px, the owner's call (2026-09-19). Reels' Share/Save were drawn at 22px
     and every rail behind them at 20px, so one of the two had to move; the
     smaller icon is the one four of the six rows already used. */
  --sg-btn-icon: 20px;           /* the SVG; also the emoji size where one is left */
  --sg-btn-gap: 3px;             /* circle → caption */

  /* The caption. Full white: 72% white over a bright frame of video is the one
     that disappears, which is why the Reels labels were already at 100%. */
  --sg-btn-label-size: 10px;
  --sg-btn-label-weight: 600;
  --sg-btn-label-color: #fff;
  --sg-btn-label-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  --sg-btn-label-tracking: .2px;
}

/* ─── ScanSquad's creator rail ──────────────────────────────────────────────
   Five buttons, five inline tints: orange Sign in, purple Get link, green
   Withdraw, orange Deep link, white More — each with its own border and its own
   glow. It was the least consistent row in the app and the reason the tab does
   not look like Reels. The tints carry no meaning (they are not status; the
   green Withdraw is not "successful"), so they go, and the buttons become the
   same button as everywhere else. Inline styles, so !important is the only
   lever. */
.creator-side-btn {
  width: var(--sg-btn-size) !important;
  height: var(--sg-btn-size) !important;
  border-radius: 50% !important;
  background: var(--sg-btn-bg) !important;
  background-image: none !important;
  border: var(--sg-btn-border-width) solid var(--sg-btn-border-color) !important;
  -webkit-backdrop-filter: var(--sg-btn-blur) !important;
  backdrop-filter: var(--sg-btn-blur) !important;
  box-shadow: var(--sg-btn-shadow) !important;
  color: #fff !important;
  font-size: var(--sg-btn-icon) !important;
  letter-spacing: 0 !important;
}

.creator-side-btn svg {
  width: var(--sg-btn-icon) !important;
  height: var(--sg-btn-icon) !important;
  stroke: currentColor !important;
}

/* ─── The "More" button is a strip button, not a brand surface ──────────────
   sg-rail-ui.js painted it orange (rgba(255,109,0,.2)) in one rule and
   neutralised it again in a later one — two rules, opposite answers, same file,
   and whichever one the reader found first was wrong. Both are deleted there;
   this is the single answer, and it is the same one every other button gets. */
.tt-action.sgi-more .tt-action-btn {
  background: var(--sg-btn-bg);
  border: var(--sg-btn-border-width) solid var(--sg-btn-border-color);
}

/* ─── Two rails that were missed on the first pass ──────────────────────────
   profile-rail.js had the right values already, arrived at separately: same
   44px, same rgba(0,0,0,.4), same blur — with a 1px border instead of 1.5px and
   a 22px icon. Being right by coincidence is still a copy, so it reads the
   properties now like everything else.

   squad-create.js's button was orange-tinted with an orange glow, which made it
   read as the primary action on a screen where it is not, and collided with the
   one-orange rule (the voice pill is the orange thing). The live/soon dot still
   carries its state — the tint never did. */
.sg-pr-circle,
#sg-profile-rail .sg-pr-circle {
  width: var(--sg-btn-size);
  height: var(--sg-btn-size);
  background: var(--sg-btn-bg);
  border: var(--sg-btn-border-width) solid var(--sg-btn-border-color);
  -webkit-backdrop-filter: var(--sg-btn-blur);
  backdrop-filter: var(--sg-btn-blur);
  box-shadow: var(--sg-btn-shadow);
}

.sg-pr-circle svg,
#sg-profile-rail .sg-pr-circle svg {
  width: var(--sg-btn-icon);
  height: var(--sg-btn-icon);
}

.sv-circle {
  width: var(--sg-btn-size) !important;
  height: var(--sg-btn-size) !important;
  background: var(--sg-btn-bg) !important;
  border: var(--sg-btn-border-width) solid var(--sg-btn-border-color) !important;
  -webkit-backdrop-filter: var(--sg-btn-blur) !important;
  backdrop-filter: var(--sg-btn-blur) !important;
  box-shadow: var(--sg-btn-shadow) !important;
  font-size: var(--sg-btn-icon) !important;
  color: #fff !important;
}

.sv-circle svg {
  width: var(--sg-btn-icon) !important;
  height: var(--sg-btn-icon) !important;
  stroke: currentColor !important;
}

/* ─── Deliberately NOT in here ──────────────────────────────────────────────
   chat-agent.js's .pchat-rnd (the mic and send buttons in the chat composer).
   They are 44px circles too, but they sit on a solid #0b0b14 sheet inside a
   panel, not over content: glass has nothing to blur there, and send is the
   primary action of that panel. Same for avatars, unread dots, spinners, the
   voice pill (one-orange.css) and the admin and partner dashboards, which are
   desktop surfaces with their own buttons. This file governs the round action
   buttons that sit over the app's content. */

/* ─────────────────────────────────────────────────────────────────────────
 * Tap targets and text size on the horizontal pill rows (Photos, Trainer).
 *
 * Audited live on www.scangym.com at 390x844: every pill in `.sg-pills-row`
 * measured 36px tall, and the Trainer row's labels were 11px — the only text
 * in the app under 12px. Both numbers are written inline by the render
 * functions in app.ctr576.js (one per tab, drifted from each other), so they
 * are corrected here in the one place that owns button looks rather than in
 * two template strings.
 *
 * !important is required: the sizes being overridden are inline styles.
 * Minimum tap target 44x44 (Apple HIG / Material), minimum body text 12px.
 * ───────────────────────────────────────────────────────────────────────── */
.sg-pills-row button {
  min-height: 44px !important;
  font-size: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}