/* NEXUS — 顶栏：品牌、搜索、状态与设置入口（S3-P0）
   ---------------------------------------------------------------------------
   搜索框外观仍然全部来自 components/field.css（.field .field--hero），
   这个文件只管顶栏的排布、吸顶、键盘提示与状态提示。
   手机上搜索独占一行 —— 首屏收窄时不把它塞进第二条工具栏。
   --------------------------------------------------------------------------- */

.zone--topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* 刘海 / 灵动岛：顶栏撑高一条安全区，内容整体压到状态栏以下 */
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) calc(var(--pad-x) + var(--safe-right)) 0
    calc(var(--pad-x) + var(--safe-left));
  /* 实色顶栏：滚过去的内容被盖住，不需要模糊与渐变 */
  background: var(--topbar-sheen-top);
  border-bottom: 1px solid var(--color-line-soft);
}

/* 桌面与横屏的品牌在侧栏里，顶栏不重复 */
.topbar__brand {
  display: none;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  color: inherit;
}

.topbar__brand .brand__name {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-brand);
}

/* ------------------------------------------------------------- 搜索 */
.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
}

/* 搜索框外观全部来自 components/field.css 的 .field .field--hero，
   这里只留键盘提示与「正在输入」的状态提示。 */
.search__input::-webkit-search-cancel-button { display: none; }

.search__kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-panel-border);
  background: var(--overlay-mid);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-faint);
  transition: opacity var(--dur) var(--ease-out);
}

.search.is-active .search__kbd { opacity: 0.35; }

.search__hint {
  position: absolute;
  left: 2px;
  top: calc(100% + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-faint);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.search__hint.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.search__hint--warn { color: var(--color-text-mute); }

/* -------------------------------------------------------- 状态与设置 */
.brand__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-left: auto;
}

.brand__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-panel-border);
  background: var(--overlay-veil);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-mute);
  white-space: nowrap;
}

.brand__pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-ice);

}

/* ============================================================ 响应式 */
/* 竖屏：侧栏让位给 tabbar，品牌回到顶栏 */
@media (max-width: 1000px) {
  .topbar__brand { display: flex; }
  .search { max-width: none; }
}

/* 手机：品牌与操作一行，搜索独占第二行 */
@media (max-width: 640px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: calc(10px + var(--safe-top)) calc(var(--pad-x) + var(--safe-right)) 12px
      calc(var(--pad-x) + var(--safe-left));
  }

  .topbar__brand { order: 1; }
  .brand__actions { order: 2; }
  .search { order: 3; flex: 0 0 100%; }

  .brand__pill { display: none; }
  .search__kbd { display: none; }
  .search__hint { position: static; margin-top: var(--space-2); }
}