/**
 * nav.css — 全域導覽列。
 *
 * 與原設計的差別:原本的 nav 是縮在容器裡的圓角膠囊,
 * 這裡改成**滿版寬度、置頂常駐**(position: sticky),
 * 只有內容受 --page-max 約束,底線橫貫整個螢幕。
 *
 * 每一頁都引用同一份,不隨頁面改動。
 */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
  /* 捲動時內容從底下透出來,不是硬邊 */
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--page-max);
  min-height: var(--nav-height);
  margin: 0 auto;
  padding: 0 26px;
}

.nav__spacer { flex: 1; }

/* ---------- 品牌 ---------- */

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

/* 標記本體。26px 是它的最小使用尺寸,八邊形的切角在這個尺寸下仍看得出來,
 * 再小就會糊成圓角方塊 —— 需要更小的場合(favicon)要另外簡化。 */
.nav__logo {
  width: 26px;
  height: 26px;
  flex: none;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--brand-warm) 45%, transparent));
}

/* wordmark:LOCAL 退一階,FORGE 是主體。
 * 兩個字等重的話,11 個字元加寬字距會把 nav 撐得太鬆。 */
.nav__name {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.nav__name-pre {
  margin-right: 0.42em;
  font-size: 0.7em;
  font-style: normal;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.nav__divider {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
}

.nav__tagline {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  white-space: nowrap;
}

/* ---------- 顯示卡用量 ---------- */

.gpu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}

.gpu__label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.gpu__model,
.gpu__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-mid);
}

.gpu__meter {
  position: relative;
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
  overflow: hidden;
}

/* 用量由 style="--used: 76%" 帶進來,改資料不必動 CSS */
.gpu__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--used, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-cool), var(--brand-warm));
}

/* ---------- 主題切換 ---------- */

.theme {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.theme__btn {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.theme__btn:hover { color: var(--text); }

/* 選中狀態由 theme.js 設 aria-pressed,樣式跟著它走 —— 不另外加 class */
.theme__btn[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

/* ---------- 窄螢幕:次要資訊先讓位 ---------- */

@media (max-width: 1080px) {
  .gpu__label,
  .gpu__value { display: none; }
}

/* ★ 這裡原本寫的是 .nav__tagline —— 但標記裡那顆用的 class 是 .nav__name,
 * `.nav__tagline` 只存在於一行被註解掉的舊標記中,**這條規則從第一天起就是死的**。
 * 於是「本地鍛造」在任何寬度都不會讓位:380px 時 nav 內容需要 407~410px,
 * 主題切換鈕被擠出視窗 27~30px(2026-08-31 量測,首頁與四個工作區頁皆然)。
 * 分隔線與它是一組,一起讓位才不會留下一條孤零零的豎線。 */
@media (max-width: 880px) {
  .nav__name--sub,
  .nav__divider { display: none; }
  .badge--safe { display: none; }
}

@media (max-width: 620px) {
  .gpu { display: none; }
  .nav__inner { padding: 0 18px; }
  /* wordmark 縮成 FORGE 一個字 —— 完整名稱在 <title> 與頁面其他地方仍在 */
  .nav__name-pre { display: none; }
}