/* hubbar.css — 全站统一顶栏（浮起卡片式横条）。
   2026-08-13 由 index.html 内嵌样式抽出，五页共用；配套 hubbar.js 注入 DOM。
   依赖 site.css 的设计令牌与 .brand 基础样式，须在其后引入。

   尺寸口径对齐 stock.askzheng.com 的 shell/TopBar：
   满宽不居中、定高 56px、圆角 12px、阴影只留一条 1px 底线（不做浮起感）。 */

.topwrap { padding: 12px 16px 8px; }
@media (min-width: 768px) { .topwrap { padding: 16px 24px 8px; } }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 56px;
  padding: 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--line);
}
@media (min-width: 768px) { header.topbar { padding: 0 20px; } }

/* 品牌尺寸对齐 stock 的 BrandMark（mark 28px + 字标 Georgia）。
   各页原副标题（「财经日历」「资讯简报」等）已撤 —— 导航高亮项已表明当前位置。 */
.topbar .brand { flex: 0 0 auto; gap: 9px; }
.topbar .brand-mark { height: 28px; }
.topbar .brand h1 { font-size: 17px; font-weight: 600; }

/* 中段：药丸导航。品牌与头像定住不压缩，宽度不足只由本段横滑吸收——
   宽度是连续量，不按断点分档（同 watch 的顶栏约定）。
   渐变提示挂在 wrapper 上而非滚动容器内，否则会跟着内容一起滚走。 */
.hubnav-wrap { position: relative; flex: 0 1 auto; min-width: 0; }
.hubnav {
  display: flex; align-items: center; gap: 4px;
  justify-content: flex-start;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  touch-action: pan-x; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.hubnav::-webkit-scrollbar { display: none; }
.hubnav-wrap::after {
  content: ""; position: absolute; inset-block: 0; right: 0; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity 0.18s;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--card));
}
.hubnav-wrap.spill::after { opacity: 1; }

/* 字号/字重/内距/圆角对齐 stock 的药丸导航（13px / 500 / 14px·8px / 12px） */
.hubnav a {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap;
  padding: 8px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  color: var(--muted-text); border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.hubnav a:hover { background: var(--bg-2); color: var(--ink); }
.hubnav a.on {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(217,119,87,.14), rgba(217,119,87,.04) 60%, rgba(74,138,92,.06));
  border-color: var(--accent-soft);
  box-shadow: 0 8px 24px -18px rgba(217,119,87,.55);
}
.hubnav a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hubnav a.on svg { color: var(--accent); }

/* 右段：无外框容器，仅并排 */
.hubdock { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 账户头像：圆形，登录态显邮箱首字符，点击展开菜单 */
.acct { position: relative; flex: 0 0 auto; }
.acct-btn {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  font-size: 13.5px; font-weight: 700; line-height: 1; text-transform: uppercase;
  color: #fff; background: var(--accent); border: 1px solid rgba(20,19,17,.06);
  transition: transform 0.18s, box-shadow 0.18s;
}
.acct-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(217,119,87,.7); }
.acct-btn.anon { color: var(--muted-text); background: var(--bg-2); }
.acct-btn.anon svg { width: 17px; height: 17px; }
.acct-menu {
  position: absolute; right: 0; top: 42px; z-index: 50; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; display: none;
}
.acct.open .acct-menu { display: block; }
.acct-mail { display: block; padding: 8px 10px 9px; font-size: 12px; color: var(--muted-text);
  word-break: break-all; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  font-weight: 500; color: var(--ink); text-decoration: none; }
.acct-menu a:hover { background: var(--bg-2); }

/* 窄屏不折行、不分档：品牌与头像定住，只有导航横滑。
   须显式覆盖 site.css ≤560px 的 flex-wrap:wrap（那是旧版为副标题折行留的）。 */
@media (max-width: 560px) {
  header.topbar { flex-wrap: nowrap; }
  .topbar .brand { flex-wrap: nowrap; }
}