/* S370 · Liquid glass on phones (Steven's pick E, Nov 4; Figma: Culture Phone System · Buttons, components Phone Button,
   Glass Tab Bar, BCBP Tab Icon). Buttons keep their S368 sizes and layout; this file gives them the glass material.
   The tab bar floats as one glass capsule with the playful BCBP icons ("more on brand", "more playful"). */
@media (max-width:760px){
  /* ---- buttons: primary on blue or navy = white glass */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.s4-play,.s342h-read,.s342-play,.wr-nplay,form button[type=submit]),
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.s4-press,#press) .s4-more{
    background:linear-gradient(180deg,#fff,#eef3ff)!important;color:#0b1730!important;
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.9),0 14px 30px -12px rgba(11,23,48,.55)!important}
  /* secondary on blue or navy = clear glass with a bright top edge */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.hx-acts .s4-ghost,.s4-fbtn,.s342h-listen,.wr-nread){
    background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12))!important;color:#fff!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.6)!important;backdrop-filter:blur(18px) saturate(1.6)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.28),0 10px 26px -12px rgba(11,23,48,.45)!important}
  /* on light: secondary = white glass, primary = blue glass */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) .s4-more,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) .s4-ghost:not(.hx-acts .s4-ghost){
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.78))!important;color:#0b1730!important;
    -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(11,23,48,.08),0 10px 24px -14px rgba(11,23,48,.45)!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.s4-press,#press) .s4-more{color:#0b1730!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) .s4-solid{
    background:linear-gradient(180deg,#3d76ff,#1559f5)!important;color:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px -12px rgba(21,89,245,.6)!important}
  /* play circle: blue with a white triangle everywhere */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.s4-play .s4-ph,.s342h-listen .s342h-pb,.s342-play .s342-pb,.wr-nplay>span){
    width:30px!important;height:30px!important;background:#1559f5!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) :is(.s4-play .s4-ph,.s342h-listen .s342h-pb,.s342-play .s342-pb,.wr-nplay>span) svg{fill:#fff!important}
  /* the hero's Watch the film matches the white glass */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) header.hb .hb-film{
    background:linear-gradient(180deg,#fff,#eef3ff)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.9),0 14px 30px -12px rgba(11,23,48,.55)!important}

  /* ---- the tab bar: one floating glass capsule */
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs.sh-tabs{
    left:14px!important;right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;top:auto!important;
    height:66px!important;padding:0 6px!important;border:0!important;border-radius:999px!important;align-items:center!important;
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62))!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.8)!important;backdrop-filter:blur(28px) saturate(1.8)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 18px 40px -16px rgba(11,23,48,.45),0 2px 6px rgba(11,23,48,.06)!important}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    height:54px!important;min-height:54px!important;margin:0 2px!important;padding:0!important;border-radius:999px!important;
    color:#0b1730!important;transition:background .2s,transform .15s cubic-bezier(.22,1,.36,1)!important}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab span{font:500 13px/1 Rubik,system-ui,sans-serif!important;opacity:.85}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab svg{width:26px!important;height:26px!important;stroke-width:1.8!important}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab .sh-fill{fill:transparent}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab .sh-wheel{fill:#0b1730;stroke:#0b1730}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab[aria-current="page"]{color:#1559f5!important;background:rgba(21,89,245,.12)!important;box-shadow:inset 0 0 0 1px rgba(21,89,245,.16)}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab[aria-current="page"] span{opacity:1;font-weight:600!important}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab[aria-current="page"] .sh-fill{fill:#dce6ff}
  html.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab:active{transform:scale(.94)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){html.sh-on #sh-tabs .sh-tab{transition:none!important}}