/* Georges Explore 卡片(georges-explore-sheet.php):11-11 13:09 Georges「有没有办法把explore页改为一个常驻底栏的卡片，再任何页面点击explore按钮就滑上来，
   点击空白处或者再点按钮就收起来。这个卡片不包含页头页尾，只有链接栏目这部分。一直往上滑会盖住页头，所以卡片的位置是在底栏下，但在其它页面之上」
   只在手机宽度(≤768,底栏出现时)起作用。层级:底栏 9999,卡片 9998,在页头和页面之上。
   整块是一个全屏滚动层:上面一段透明空白(= 页头高度,点了收起),下面接卡片;往上滑 = 卡片升起盖住页头,再滑 = 列表往上走;
   列表在顶部时往下拉由 sheet.v1.js 拖着卡片走。
   v2(11-11 14:13 Georges「explore卡片拉到最上面的时候，改为刚好不露出最下面的两条细灰线」):卡片底部留白 底栏高 + 14px → 底栏高 − 3px,
   拉到底时最后一行的两条分隔线刚好藏在底栏上沿往下 2px(底栏是毛玻璃,压在边上会糊出一道,所以多藏 2px),文字仍在底栏上面。
   列表样式照 Explore 页手机版(console.v13.css 末尾那组 ≤768 规则)抄过来,改那边记得这边也改。 */
#gxs-sheet{display:none}
@media (max-width:768px){
  #gxs-sheet{position:fixed;inset:0;z-index:9998;--gxs-ink:#141414;--gxs-muted:#737373;--gxs-line:#dedede;--gxs-yellow:#d7b859;--gxs-bar:70px}
  #gxs-sheet.is-open{display:block;view-transition-name:gxs-sheet}
  #gxs-sheet .gxs-dim{position:absolute;inset:0;background:rgba(20,20,20,.2);opacity:0;transition:opacity .3s ease}
  #gxs-sheet.is-shown .gxs-dim{opacity:1}
  #gxs-sheet.is-closing .gxs-dim{opacity:0;transition-duration:.24s}
  #gxs-sheet .gxs-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #gxs-sheet .gxs-scroll::-webkit-scrollbar{display:none}
  #gxs-sheet.is-closing .gxs-scroll{overflow-y:hidden}
  #gxs-sheet .gxs-gap{height:var(--gxs-top,97px)}
  #gxs-sheet .gxs-card{position:relative;min-height:calc(var(--gxs-vh,100vh) - var(--gxs-top,97px));background:#fff;border-radius:14px 14px 0 0;
    box-shadow:0 -1px 0 rgba(0,0,0,.04),0 -10px 32px rgba(0,0,0,.09);padding:0 16px calc(var(--gxs-bar) - 3px);
    font-family:quattrocento,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--gxs-ink);will-change:transform}
  #gxs-sheet .gxs-card:focus{outline:none}
  /* 拉手:卡片升到顶后贴在屏幕最上面(白底),列表从它下面滑过 */
  #gxs-sheet .gxs-grab{position:sticky;top:0;z-index:2;height:26px;margin:0 -16px;background:#fff;border-radius:14px 14px 0 0}
  #gxs-sheet.is-closing .gxs-grab{position:relative}   /* 从展开(列表已上滚)收起时,拉手回到卡片顶上跟着走,不留在列表中间 */
  #gxs-sheet .gxs-grab::before{content:"";position:absolute;left:50%;top:9px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#d9d9d9}
  #gxs-sheet ul.gxs-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;list-style:none;margin:0;padding:0}
  #gxs-sheet li.gxs-item{list-style:none;min-width:0;margin:0;padding:0;border-bottom:1px solid var(--gxs-line)}
  #gxs-sheet a.gxs-entry{display:grid;grid-template-columns:minmax(0,1fr) 15px;gap:5px 8px;align-content:center;position:relative;isolation:isolate;
    min-height:68px;padding:5px 0;color:var(--gxs-ink)!important;text-decoration:none!important;border:0!important;background:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
  #gxs-sheet .gxs-entry::before{content:"";position:absolute;inset:0 -8px;z-index:-1;background:var(--gxs-ink);transform:scaleX(0);transform-origin:left}
  #gxs-sheet .gxs-name{grid-column:1/-1;display:block;font-size:21px;line-height:1.1;letter-spacing:-.035em;white-space:nowrap}
  #gxs-sheet .gxs-label{grid-column:1;font-size:13px;line-height:1.55;letter-spacing:0;color:var(--gxs-muted)}
  #gxs-sheet .gxs-arrow{grid-column:2;align-self:center;display:block;width:15px;height:15px;color:var(--gxs-muted)}
  #gxs-sheet .gxs-arrow svg{display:block;width:15px;height:15px}
  /* 按下:同 Explore 页,黑底从左扫过来,英文变白、中文和箭头变主题黄 */
  #gxs-sheet .gxs-entry.is-pressed::before{transform:scaleX(1);animation:gxs-press .18s cubic-bezier(.4,0,.2,1) both}
  #gxs-sheet .gxs-entry.is-pressed .gxs-name{color:#fff}
  #gxs-sheet .gxs-entry.is-pressed .gxs-label,#gxs-sheet .gxs-entry.is-pressed .gxs-arrow{color:var(--gxs-yellow)}
  @keyframes gxs-press{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  ::view-transition-group(gxs-sheet){animation:none}
  ::view-transition-old(gxs-sheet){display:none}
  ::view-transition-new(gxs-sheet){animation:none}
}
@media (max-width:360px){
  #gxs-sheet ul.gxs-index{column-gap:20px}
  #gxs-sheet .gxs-label{font-size:12.5px}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  #gxs-sheet .gxs-dim{transition:none}
  #gxs-sheet .gxs-entry.is-pressed::before{animation:none}
}