/* Layer 4 · 全局导航：品牌、菜单、下载与行业工具入口 */

.navbar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--layer4-navbar);
  pointer-events: none;
  --nav-backdrop: 0;
  /* 底色不在本体上，铺在下面的 ::before —— 原因见那一段 */
}

.navbar-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: var(--bp-gradient-brand);
  border-bottom: var(--bp-stroke-hairline) solid var(--bp-border-on-brand-subtle);
  opacity: var(--nav-backdrop);
  /* 短过渡（120ms）只为抹平两类跳变：切页时浓度整段重算、滚动到边界时的小抖动。
     ⚠ 不能用长过渡：浓度本身已逐帧跟随滚动，长过渡会让它一直追不上，像蒙了一层迟钝的膜。 */
  transition: opacity var(--bp-dur-fast) var(--bp-ease);
}

.navbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--bp-space-4);
  /* 与首页内容列、下载页、插件窗口及页脚共用左右对齐线。 */
  max-width: calc(var(--bp-layout-content-max) + var(--bp-layout-gutter) + var(--bp-layout-gutter));
  margin: 0 auto;
  padding: var(--bp-space-3) var(--bp-layout-gutter);
  height: var(--stage-navbar-h);
  box-sizing: border-box;
  /* 供中间菜单绝对居中定位（菜单不随左右两侧宽度不等而偏移） */
  position: relative;
  /* 桌面导航的品牌、菜单和右侧按钮共用 32px 高度与同一垂直中线。 */
  --nav-item-h: var(--bp-space-6);
}

/* ─── 内容面 ─── */

.navbar--content {
  justify-content: space-between;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  /* 与菜单、下载、行业工具同高（见 .navbar 的 --nav-item-h），四块上下边齐平。
     不给垂直 padding：高度已定，靠 flex 居中——留 padding 反而会把内容区压小。 */
  height: var(--nav-item-h);
  box-sizing: border-box;
  white-space: nowrap;
  /* 品牌区可点击回主页（见 components/layer-4/navigation） */
  cursor: pointer;
  border-radius: var(--bp-radius-sm);
  transition: opacity var(--bp-dur-fast) var(--bp-ease),
    transform var(--bp-dur-fast) var(--bp-ease);
}

.navbar__brand:hover {
  opacity: .9;
}

.navbar__brand:active {
  opacity: 1;
  transform: translateY(1px) scale(.99);
}

/* 品牌文字：主标题（中文）+ 副标题（中文业务词，极简白） */
.navbar__brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-1);
  line-height: 1;
}

.navbar__brand-title {
  font-size: var(--bp-font-size-md);
  font-weight: var(--bp-font-weight-bold);
  color: var(--bp-content-on-brand);
  letter-spacing: 1px;
  line-height: 1;
}

.navbar__brand-sub {
  font-size: var(--bp-font-size-xs);
  font-weight: var(--bp-font-weight-medium);
  color: var(--bp-content-on-brand);
  letter-spacing: 3px;
  line-height: 1;
  opacity: .72;
}

/* 品牌 logo 与两行品牌文字块、右侧按钮共用视觉高度。 */
.navbar__logo {
  height: var(--nav-item-h);
  width: auto;
  display: block;
  flex: none;
}

.navbar__menu {
  display: flex;
  gap: var(--bp-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.navbar__item {
  display: flex;
}

.navbar__link,
.navbar__download,
.navbar__apps {
  /* 菜单以品牌内容高为基准，右侧操作在 .navbar__actions 中提升至标准控件高。
     高度显式给定 + border-box，避免边框让下载按钮比行业工具多出 2px。 */
  height: var(--nav-item-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

.navbar__link {
  position: relative;
  border: none;
  background: transparent;
  font-size: var(--bp-font-size-sm);
  color: var(--bp-content-on-brand-muted);
  cursor: pointer;
  /* 只给左右内边距（高度已定，上下靠 flex 居中） */
  padding: 0 var(--bp-space-2);
  transition: color var(--bp-dur-fast) var(--bp-ease),
    transform var(--bp-dur-fast) var(--bp-ease);
}

.navbar__link:hover {
  color: var(--bp-content-on-brand);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: var(--bp-space-2);
  right: var(--bp-space-2);
  bottom: 0;
  height: 2px;
  border-radius: var(--bp-radius-round);
  background: var(--bp-content-on-brand);
  transform: scaleX(0);
  transition: transform var(--bp-dur-fast) var(--bp-ease), box-shadow var(--bp-dur-fast) var(--bp-ease);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

.navbar__link:active {
  color: var(--bp-content-on-brand);
  transform: translateY(1px);
}

.navbar__link.is-active {
  color: var(--bp-content-on-brand);
  font-weight: var(--bp-font-weight-bold);
}

.navbar__link.is-active::after {
  transform: scaleX(1);
  background: var(--bp-accent);
  box-shadow: none;
}

/* 右侧主要入口：白底按钮配品牌蓝文字，金色只留给图标识别点。 */
.navbar__apps {
  gap: var(--bp-space-2);
  --industry-icon-accent: var(--bp-accent);
  border: var(--bp-stroke-hairline) solid var(--bp-surface-default);
  background: var(--bp-surface-default);
  color: var(--bp-content-action);
  font-size: var(--bp-font-size-sm);
  font-weight: var(--bp-font-weight-semibold);
  /* 只给左右内边距（高度已定，上下靠 flex 居中） */
  padding: 0 var(--bp-space-3);
  border-radius: var(--bp-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    border-color var(--bp-dur-fast) var(--bp-ease),
    box-shadow var(--bp-dur-fast) var(--bp-ease),
    transform var(--bp-dur-fast) var(--bp-ease);
}

/* 标志由共享内联组件渲染并直接读取全局语义；导航与插件列表不会分叉配色。 */
.navbar__apps-icon {
  width: var(--bp-font-size-lg);
  height: var(--bp-font-size-lg);
  flex-shrink: 0;
  opacity: 1;
}

.navbar__apps:hover {
  background: var(--bp-surface-selected);
  border-color: var(--bp-surface-selected);
  box-shadow: none;
  transform: none;
}

.navbar__apps:active {
  background: var(--bp-surface-sunken);
  border-color: var(--bp-surface-sunken);
  transform: translateY(1px) scale(.98);
}

/* 右侧按钮组（下载 + 行业工具）：整体靠右，与中间菜单分开 */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  margin-left: auto;
  /* 顶到最右 */
}

.navbar__actions > button {
  height: var(--nav-item-h);
}

/* 下载是次要入口：与行业工具等高、同圆角，用清楚的描边保持按钮感。 */
.navbar__download {
  border: var(--bp-stroke-hairline) solid var(--bp-border-on-brand);
  background: transparent;
  color: var(--bp-content-on-brand);
  font-size: var(--bp-font-size-sm);
  font-weight: var(--bp-font-weight-regular);
  /* 只给左右内边距（高度已定，上下靠 flex 居中） */
  padding: 0 var(--bp-space-3);
  border-radius: var(--bp-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    color var(--bp-dur-fast) var(--bp-ease),
    border-color var(--bp-dur-fast) var(--bp-ease),
    opacity var(--bp-dur-fast) var(--bp-ease),
    transform var(--bp-dur-fast) var(--bp-ease);
}

.navbar__download:hover {
  background: var(--bp-surface-on-brand-faint);
  border-color: var(--bp-border-on-brand-strong);
  color: var(--bp-content-on-brand);
}

.navbar__download:active {
  background: var(--bp-surface-on-brand-hover);
  border-color: var(--bp-border-on-brand);
  color: var(--bp-content-on-brand);
  transform: translateY(1px) scale(.98);
}

/* 全局焦点环是品牌蓝，放在深蓝导航上对比不足；导航内统一以金色标记键盘焦点。 */
.navbar__brand:focus-visible,
.navbar__link:focus-visible,
.navbar__download:focus-visible,
.navbar__apps:focus-visible {
  outline-color: var(--bp-accent);
}

/* 移动端：只留品牌 + 行业工具，隐藏中间菜单（首页/关于我/设计案例/联系我）。
   断点走 #stage[data-breakpoint]（与 frame.mjs 的 BREAKPOINTS 同源），不写媒体查询 */
#stage[data-breakpoint="mobile"] .navbar {
  --nav-item-h: var(--bp-font-size-xl);
  height: var(--stage-navbar-h);
  padding: var(--bp-space-2) var(--bp-layout-gutter);
  gap: var(--bp-space-3);
}

#stage[data-breakpoint="mobile"] .navbar__actions {
  gap: var(--bp-space-1);
}

#stage[data-breakpoint="mobile"] .navbar__brand {
  font-size: var(--bp-font-size-md);
  min-height: var(--bp-touch-target);
}

/* 手机端：主标题与桌面同档，两端字号一致 */
#stage[data-breakpoint="mobile"] .navbar__brand-title {
  font-size: var(--bp-font-size-sm);
}

#stage[data-breakpoint="mobile"] .navbar__brand-text {
  gap: 2px;
}

/* 手机端品牌图形继续跟随统一内容高度；触控范围由品牌区自身承担。 */
#stage[data-breakpoint="mobile"] .navbar__logo {
  height: var(--nav-item-h);
}

#stage[data-breakpoint="mobile"] .navbar__brand-sub {
  /* 手机端再小半档、字距收紧以不增宽（保持与主标题等宽以内） */
  font-size: 10px;
  letter-spacing: 1px;
}

#stage[data-breakpoint="mobile"] .navbar__menu {
  display: none;
}

/* 手机端行业工具：只留图标，文字收起，按钮变方形（padding 均等）。
   右侧整体靠右由 .navbar__actions 的 margin-left:auto 负责，这里不再单独顶右 */
#stage[data-breakpoint="mobile"] .navbar__apps-text {
  display: none;
}

#stage[data-breakpoint="mobile"] .navbar__apps {
  padding: 0;
  height: var(--bp-touch-target);
  width: var(--bp-touch-target);
  border-color: transparent;
  background: transparent;
  --industry-icon-accent: var(--bp-accent);
  color: var(--bp-content-on-brand);
  justify-content: center;
  border-radius: var(--bp-radius-md);
  margin-right: calc((var(--nav-item-h) - var(--bp-touch-target)) / 2);
}

#stage[data-breakpoint="mobile"] .navbar__apps-icon {
  width: var(--nav-item-h);
  height: var(--nav-item-h);
}

#stage[data-breakpoint="mobile"] .navbar__apps:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
}

#stage[data-breakpoint="mobile"] .navbar__apps:active {
  border-color: transparent;
  background: var(--bp-surface-on-brand-hover);
  opacity: 1;
  transform: translateY(1px) scale(.94);
}

/* 手机端下载入口仍是文字按钮，保留描边；外盒 44px 是触控范围，
   描边由伪元素内缩到与 logo 同高（--nav-item-h），避免安全点击区直接变成笨重视觉块。 */
#stage[data-breakpoint="mobile"] .navbar__download {
  position: relative;
  padding: 0 var(--bp-space-2);
  border-color: transparent;
  font-size: var(--bp-font-size-sm);
  min-width: var(--bp-touch-target);
  height: var(--bp-touch-target);
  justify-content: center;
}

#stage[data-breakpoint="mobile"] .navbar__download::before {
  position: absolute;
  /* 上下内缩量 = (触控盒 - 内容高) / 2，使描边高度恰好等于 --nav-item-h
     （与 logo、行业工具图标等高）；不写死像素，改基准时自动跟随。 */
  inset: calc((var(--bp-touch-target) - var(--nav-item-h)) / 2) 0;
  border: var(--bp-stroke-hairline) solid var(--bp-border-on-brand-subtle);
  border-radius: var(--bp-radius-md);
  content: '';
  pointer-events: none;
}

#stage[data-breakpoint="mobile"] .navbar__download:hover {
  border-color: transparent;
  background: transparent;
}

#stage[data-breakpoint="mobile"] .navbar__download:active {
  border-color: transparent;
  background: var(--bp-surface-on-brand-hover);
  color: var(--bp-content-on-brand);
  transform: translateY(1px) scale(.98);
}

#stage[data-breakpoint="mobile"] .navbar__download:hover::before {
  border-color: var(--bp-content-on-brand-muted);
  background: var(--bp-surface-on-brand-faint);
}

#stage[data-breakpoint="mobile"] .navbar__download:active::before {
  border-color: var(--bp-border-on-brand);
  background: var(--bp-surface-on-brand-hover);
}

/* 纯触屏浏览器可能在点按后保留 :hover；不能让按钮长期停在“选中”色。
   即时反馈只交给 :active，抬手即恢复默认。 */
#stage[data-breakpoint="mobile"][data-input="touch"] .navbar__apps:hover {
  opacity: .95;
  background: transparent;
}

#stage[data-breakpoint="mobile"][data-input="touch"] .navbar__download:hover::before {
  border-color: var(--bp-border-on-brand-subtle);
  background: transparent;
}

#stage[data-breakpoint="mobile"][data-input="touch"] .navbar__brand:hover {
  opacity: 1;
}

/* :active 与 :hover 在触屏按住期间会同时成立；放在触屏去残留规则之后，保留即时按压反馈。 */
#stage[data-breakpoint="mobile"][data-input="touch"] .navbar__apps:active {
  background: var(--bp-surface-on-brand-hover);
  opacity: 1;
}

#stage[data-breakpoint="mobile"][data-input="touch"] .navbar__download:active::before {
  border-color: var(--bp-border-on-brand);
  background: var(--bp-surface-on-brand-hover);
}