/* ═══════════════════════════════════════════════════════════════════════════
   sg-row-theme.css — ONE definition of the see-through button row, for every
   tab (owner, 2026-10-04: "Every button is transparent or see through and at
   bottom … home and create tab button same theme").

   Why this file exists
   --------------------
   The glass look had grown three different recipes, so "same theme" was not
   true on the device:

     Home / Create rows ....... rgba(20,20,26,.20) + 1px rgba(255,255,255,.16) + blur(8px)
     sg-glass.css (chips) ..... rgba(255,255,255,.10) + 1px rgba(255,255,255,.22) + blur(14px)
     rails.css (SPA band) ..... rgba(0,0,0,.40)      + 1px rgba(255,255,255,.12) + blur(12px)

   The owner picked the Home/Create look, so those values are the tokens here
   and the other two files now read them instead of carrying their own. Change
   a row's colour HERE; a second opinion in another file is what produced the
   drift in the first place.

   What the research changed (proven practice, not taste)
   ------------------------------------------------------
   - Apple, "Adopting Liquid Glass" + WWDC25: the bar floats above content and
     stays pinned. That is the shape we already use.
   - backdrop-filter is the top cause of mobile scroll jank, and the area it
     samples grows ~3x the radius per side. So: blur lives on the *chrome*
     only — never on a scroll container or per card — and 8px, not 14-18px.
   - Always ship a fallback: @supports for browsers without backdrop-filter,
     and solid surfaces for prefers-reduced-transparency / prefers-contrast.
     Apple treats Reduce Transparency as a requirement, not a nicety.
   - Bottom bars clear env(safe-area-inset-bottom).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* the row itself */
  --sg-row-bg: rgba(20, 20, 26, .20);
  --sg-row-edge: rgba(255, 255, 255, .16);
  --sg-row-blur: blur(8px);
  --sg-row-radius: 999px;
  --sg-row-pad: 6px;

  /* a button inside the row */
  --sg-row-btn-bg: rgba(255, 255, 255, .07);
  --sg-row-btn-edge: rgba(255, 255, 255, .16);

  /* the selected state — the one place colour is allowed */
  --sg-row-on: rgba(255, 109, 0, .78);
  --sg-row-on-edge: rgba(255, 170, 100, .9);

  /* brand */
  --sg-orange: #FF6D00;
}

/* ── the utility every new screen uses ─────────────────────────────────────
   A row is: fixed, full width minus 8px either side, pinned above the tab bar,
   one glass layer, and it scrolls sideways instead of wrapping or squeezing. */
.sg-row {
  position: fixed;
  left: 8px;
  right: 8px;
  z-index: 26;
  display: flex;
  align-items: center;
  padding: var(--sg-row-pad);
  border-radius: var(--sg-row-radius);
  background: var(--sg-row-bg);
  border: 1px solid var(--sg-row-edge);
  -webkit-backdrop-filter: var(--sg-row-blur);
  backdrop-filter: var(--sg-row-blur);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.sg-row::-webkit-scrollbar { display: none; }
.sg-row > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Buttons in a row: see-through, never solid. */
.sg-row-btn {
  background: var(--sg-row-btn-bg);
  border: 1px solid var(--sg-row-btn-edge);
  color: #fff;
  /* 44px is the smallest reliable touch target on both platforms. */
  min-height: 44px;
  border-radius: var(--sg-row-radius);
}
.sg-row-btn[aria-selected="true"],
.sg-row-btn.on {
  background: var(--sg-row-on);
  border-color: var(--sg-row-on-edge);
}

/* The bottom-most row clears the home indicator / gesture bar. */
.sg-row.sg-row-bottom {
  bottom: calc(var(--sg-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
}

/* ── fallbacks ────────────────────────────────────────────────────────────
   1. No backdrop-filter (older Android WebView, Firefox without the flag):
      a translucent row over video is unreadable without the blur, so go
      opaque instead of pretending. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --sg-row-bg: rgba(16, 16, 22, .88);
    --sg-row-btn-bg: rgba(255, 255, 255, .12);
  }
}

/* 2. The user asked the OS for less transparency, or more contrast: give them
      solid surfaces and a brighter edge. Same geometry, no glass. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --sg-row-bg: #101016;
    --sg-row-edge: rgba(255, 255, 255, .34);
    --sg-row-btn-bg: rgba(255, 255, 255, .16);
    --sg-row-btn-edge: rgba(255, 255, 255, .34);
    --sg-row-blur: none;
    --sg-row-on: #FF6D00;
  }
  .sg-row,
  .tt-actions,
  .reel-actions,
  #sg-sv-rail.sv-float {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 3. Low-power / small screens: keep the blur but never let it grow. */
@media (max-width: 480px) {
  :root { --sg-row-blur: blur(8px); }
}

/* ── v3.0 · CTO Rule 8: ONE button, every tab ─────────────────────────────
   Live audit 2026-10-05 found the pills in the bottom rows still disagreed:
   Home 40px system-ui, Shop chips 29px Arial, Chats 40px -apple-system with a
   per-button blur(14px), Home icons colour emoji while every other row used
   white line icons. One recipe now, read from the tokens above:
   40px pill · 13px/600 one font · token glass · 1px token edge · no per-button
   blur (the row already blurs — per-button blur is the jank the research warns
   about) · white 16px line icon · orange only for the selected state.
   The Create row (#sg-sv-rail) is deliberately NOT listed: owner signed it off. */
:root { --sg-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; }
html body #reels-cat-rail button.reels-cat,
html body #actions button.chip,
html body #sg-chats-row .seg button,
html body #sg-chats-row .tabs#filters button {
  height: 40px !important; min-height: 40px !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 0 14px !important; border-radius: 999px !important;
  font: 600 13px/1 var(--sg-font) !important; color: #fff !important; text-shadow: none !important;
  background: var(--sg-row-btn-bg) !important; border: 1px solid var(--sg-row-btn-edge) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body #reels-cat-rail button.reels-cat[aria-selected="true"],
html body #actions button.chip[aria-selected="true"],
html body #sg-chats-row .seg button.on,
html body #sg-chats-row .tabs#filters button.on {
  background: var(--sg-row-on) !important; border-color: var(--sg-row-on-edge) !important;
}
html body #reels-search-button,
html body #sg-chats-row .hic button,
html body #sg-chats-row .fab {
  width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 999px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body #reels-search-button,
html body #sg-chats-row .hic button {
  background: var(--sg-row-btn-bg) !important; border: 1px solid var(--sg-row-btn-edge) !important; color: #fff !important;
}
html body #actions .act, html body #actions .act .lb { font-family: var(--sg-font); }
.sg-ci { display: inline-flex; width: 16px; height: 16px; }
.sg-ci svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }