/* 013 recommended-view shared mobile shell.
   Scope: common top actions only. Page content and desktop composition stay owned
   by each page candidate. This file is injected only for ?013_view=... previews. */

/* 站长确认：全站公告只属于首页与看台。其他功能页即使上游公共脚本
   挂载了公告节点，也不让它进入视觉、布局或可访问性树。首页与看台的
   页面脚本会写入各自的 body 标记，因此只为这两个真实入口放行。 */
html[data-gfc013-navigation="recommended"] #gfcSiteAnnouncement {
  display: none !important;
}

html[data-gfc013-navigation="recommended"] body[data-gfc013="home-recommended"] #gfcSiteAnnouncement,
html[data-gfc013-navigation="recommended"] body[data-gfc013="terrace-mobile-recommended"] #gfcSiteAnnouncement {
  display: block !important;
}

@media (max-width: 720px) {
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) :is(#themeBtn, #btnLogin, #btnReg) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 0;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 5px;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
  }

  :is(.topfloat .topact, .mast-tools, .topfloat .inner) {
    min-width: 0;
  }

  :is(.topfloat .topact, .mast-tools) {
    gap: 5px;
  }

  .topfloat .inner {
    max-width: 100%;
  }

  .topfloat .inner > :is(.gfc-brand, .brand),
  .masthead > :is(.gfc-brand, .brand),
  .masthead .mast-inner > :is(.gfc-brand, .brand) {
    min-width: 0;
    flex-shrink: 1;
  }

  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) :is(#themeBtn, #btnLogin, #btnReg):focus-visible {
    outline: 3px solid var(--cy, var(--accent, #2f7554));
    outline-offset: 2px;
  }

  /* The builder portals its account/theme controls out of #strap and into a
     body-level popover. They still need the same mobile action floor, but must
     not inherit the 320px compact-label replacement used by the real topbar. */
  html body > #tbMorePop :is(#themeBtn, #btnLogin, #btnReg) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 12px;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #eef4f0 !important;
    background: #14231d !important;
    border-color: #557165 !important;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
  }

  html[data-v="b"] body > #tbMorePop :is(#themeBtn, #btnLogin, #btnReg) {
    color: #183b2b !important;
    background: #f6f1e6 !important;
    border-color: #9aab9f !important;
  }

  html body > #tbMorePop #btnReg { background: #173f30 !important; }
  html[data-v="b"] body > #tbMorePop #btnReg { background: #d4dfd0 !important; }

  html body > #tbMorePop :is(#themeBtn, #btnLogin, #btnReg):focus-visible {
    outline: 3px solid #57b889;
    outline-offset: 2px;
  }
}

@media (max-width: 350px) {
  /* At 320px the full three labels plus the brand cannot coexist without
     overflow. Keep the accessible name, but render compact, unambiguous marks. */
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) :is(#themeBtn, #btnLogin, #btnReg) {
    width: 44px;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    gap: 0;
    background: #14231d !important;
    border-color: #557165 !important;
  }

  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnReg {
    background: #173f30 !important;
  }

  html[data-v="b"] body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) :is(#themeBtn, #btnLogin, #btnReg) {
    background: #f6f1e6 !important;
    border-color: #9aab9f !important;
  }

  html[data-v="b"] body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnReg {
    background: #d4dfd0 !important;
  }

  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #themeBtn::before,
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnLogin::before,
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnReg::before {
    /* Do not depend on page-local --ink/--fg tokens: five legacy pages do not
       define them in night mode. data-v=b is the site's light scheme. */
    color: #eef4f0;
    font: 800 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  html[data-v="b"] body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) :is(#themeBtn, #btnLogin, #btnReg)::before {
    color: #183b2b;
  }

  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #themeBtn::before { content: "日夜"; }
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnLogin::before { content: "登录"; font-size: 12px; }
  html body :is(#lampzone, #strap, .topfloat, .mast-tools, .masthead, .header) #btnReg::before { content: "注册"; font-size: 12px; }

  /* The float-style shell mounts the brand independently from the action row.
     Give both a real row on 320px instead of letting them occupy the same hit
     area. Row-style page shells are unaffected. */
  html:has(.gfc-brand-float) .topfloat {
    top: 66px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#themeBtn, #btnLogin, #btnReg) {
    transition: none !important;
  }
}