/* =================================================
Source: CC
Save: NavcorX_Web/NavcroX/stock/nx-shell.css
Task: CC_0806_06 G1/G4/G7 全站頁首導覽 + 相依腳本失敗的降級畫面
      CC_0807_03 #10 左上角「回首頁」做成看得出來的按鈕 / #6 App 版登入說明
      CC_0807_04 股票卡動作列（儲存 + 刪除這支）
Date: 2026-08-06（CC_0807_03 / CC_0807_04 修訂 2026-08-07）
Status: production
Scope: /stock/ 底下所有頁面共用的「殼」樣式：頁首導覽列、當前位置標記、
       相依腳本沒載到時的錯誤畫面、未儲存變更的固定列
Out of Scope: 各頁內容樣式（在 nx-pages.css / 各頁 inline style）、
              webpush 元件樣式（自帶於 nx-webpush.js）、戰情室（自成一套）
=================================================

為什麼另開一支檔而不是塞進 nx-pages.css：

1. nx-pages.css 是全站共用檔，同期常有其他卡在改，整檔覆寫會互相洗掉
   （見 shared-shell-concurrent-card-clobber 教訓；nx-webpush.js 也是為此自帶樣式）。
2. /stock/index.html 沒有引用 nx-pages.css（它自帶 inline style），
   但它同樣需要這套頁首。獨立一支檔才能讓兩種頁面共用同一份定義。

⚠️ 導覽的「可用性」不依賴這支檔。頁首是純 <a>，這支檔只負責長相；
   就算 CSS 整支掛掉，連結仍然點得動、仍然走得回去。G1 的硬要求。
*/

/* ---------------------------------------------------------------
   CC_0820_03 §Group C-2｜左右 safe-area 防護
   --------------------------------------------------------------- */
/* [MOD][CC][20260820] CC_0820_03 XC_0820_01 查證：全站原本只有 .wx-unsaved 這條
   固定列用了 env(safe-area-inset-bottom)，頁面本體（body）左右完全沒有 safe-area
   防護，且各頁 viewport meta 都缺 viewport-fit=cover —— 兩者必須成對做，只加
   viewport-fit=cover 不補 safe-area 反而讓內容更容易進到邊緣區。放在這支
   全站共用「殼」檔（而非 nx-pages.css，同期常有其他卡在改）一次到位，
   不要只給 prefs 貼一張膠布。safe-area-inset-* 在沒有 viewport-fit=cover 或
   非瀏海裝置時恆為 0，對現有版面零影響。 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ---------------------------------------------------------------
   頁首導覽
   --------------------------------------------------------------- */
.wx-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 觸控目標 ≥44px（G8 同一條標準）。padding 撐出來的高度就是可點範圍，
   不是只有文字那幾個 px。 */
.wx-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--wx-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--wx-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.wx-nav__link:hover { color: var(--wx-accent); }

/* 當前頁：標出來但**不移除**連結。
   移除連結會讓「這一頁在哪」在不同頁之間閃動位置，也讓鍵盤操作少一個落點。 */
.wx-nav__link[aria-current="page"] {
  color: var(--wx-accent);
  border-color: var(--wx-accent-edge);
}

/* 品牌區：在 index.html 原本是 <div>，全站統一改成 <a>（G1）。
   這裡只補「它現在是連結了」需要的幾條，字體/字級仍由各頁既有的 .wx-brand 決定。

   [MOD][CC][20260807] CC_0807_03 #10 讓它看起來像一顆按鈕。
   改動前左上角只有一行暗色純文字「NAVCORX // WATCHX · 股票」，它是連結，
   但看起來像標題 —— PM 2026-08-07 實測：使用者根本不知道那裡點得下去，
   困在內頁時沒有出路。份量比照右側「通知設定」那顆（同樣 44px 觸控高度、
   同樣的框線語言），並在文字尾端補「首頁」二字，不要讓人從英文品牌名去猜。

   ⚠️ 選擇器刻意用 a.wx-brand（0,1,1）而不是 .wx-brand（0,1,0）：
   /stock/index.html 自帶 inline <style> 且它宣告在 <link nx-shell.css> **之後**，
   同分時後者會贏。多帶一個標籤名就不必去動 index.html 那段 inline 樣式。 */
a.wx-brand,
a.wx-brand:link,
a.wx-brand:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--wx-accent-edge, #C97A0E);
  color: var(--wx-accent, #FF9F1C);
  text-decoration: none;
}
a.wx-brand:hover {
  color: var(--wx-accent-soft, #FFB845);
  border-color: var(--wx-accent, #FF9F1C);
}
/* 「首頁」：用一條分隔線跟品牌名分開，讓它讀起來是「目的地」而不是品牌名的一部分。 */
.wx-brand__home {
  padding-left: 9px;
  border-left: 1px solid var(--wx-accent-edge, #C97A0E);
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
}

@media (max-width: 430px) {
  /* [MOD][CC][20260812] CC_0812_07 頁首多了「通知紀錄」之後，login / signup / reset
     這幾頁變成四個 .wx-nav__link：390px 用原本的 padding:0 7px 實測整排會延伸到 x=384，
     壓掉頁首右側 22px 留白、最後一顆離螢幕邊緣只剩 6px（與 CC_0807_02 當時實測數字一致）。
     這裡把窄螢幕的左右內距與字距各收一點，讓四個連結仍然排成一列且不越界。
     ⚠️ 只收「左右」內距 —— 觸控目標高度由 min-height:44px 決定，一律不動。 */
  .wx-nav__link { padding: 0 4px; font-size: 10.5px; letter-spacing: .02em; }
  /* 安全網：萬一某些裝置的字體量測比實測更寬，就換行靠右，而不是溢出螢幕。
     flex-shrink 維持 0 的話這個 flex item 永遠不會被壓到、也就永遠不會換行，所以一起改。 */
  .wx-nav { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; }
  /* 窄螢幕：品牌名（.wx-brand__full「NAVCORX // 」）已由各頁的 CSS 收起來，
     這裡再把左右內距與字距收一點，讓「首頁」擠得進同一行。 */
  a.wx-brand, a.wx-brand:link, a.wx-brand:visited { padding: 0 8px; gap: 7px; letter-spacing: .08em; }
  .wx-brand__home { padding-left: 7px; letter-spacing: .06em; }
}

/* ---------------------------------------------------------------
   CC_0807_03 #6｜從桌面圖示開啟時的說明
   --------------------------------------------------------------- */
/* 不是錯誤也不是成功，是一段「這件事只會發生一次」的說明，
   所以既不用 --err 的紅、也不用 --ok 的綠，走 accent。 */
.wx-msg--app {
  border-color: var(--wx-accent-edge, #C97A0E);
  color: var(--wx-accent, #FF9F1C);
}

/* ---------------------------------------------------------------
   G4｜相依腳本沒載到時的降級畫面
   --------------------------------------------------------------- */
/* 刻意不用 var() 以外的花招，也刻意讓它在「tokens.css 也沒載到」時仍然看得見：
   顏色都給了實色 fallback。這一塊出現的前提本來就是「有東西沒載進來」，
   不能假設別的檔案是好的。 */
.wx-boot-error {
  margin: 22px;
  padding: 18px 16px;
  border: 1px solid var(--nx-red, #E8543D);
  background: var(--wx-surface, #111111);
  color: var(--wx-ink, #ECE6D7);
  font-family: var(--wx-font-body, system-ui, sans-serif);
}
.wx-boot-error[hidden] { display: none !important; }
.wx-boot-error__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-red, #E8543D);
}
.wx-boot-error__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--wx-ink-2, #BDB6A5);
}
.wx-boot-error__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--wx-accent, #FF9F1C);
  border: 1px solid var(--wx-accent, #FF9F1C);
  color: #16120A;
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 14px;
  cursor: pointer;
}
.wx-boot-error__btn:hover { background: var(--wx-accent-soft, #FFB845); }
/* 技術細節給的是「哪一支沒載到」，對使用者沒用但對回報問題有用，所以小字放最後。 */
.wx-boot-error__detail {
  margin: 12px 0 0;
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--wx-muted, #6F6A5F);
  word-break: break-all;
}
.wx-boot-error__detail:empty { display: none; }

/* ---------------------------------------------------------------
   G5｜未儲存變更
   --------------------------------------------------------------- */
/* 固定在畫面底部。standalone PWA 下 beforeunload 未必觸發，
   所以「還有東西沒存」必須在畫面上看得見，不能只靠離開時的對話框。 */
.wx-unsaved {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--wx-surface-2, #181818);
  border-top: 1px solid var(--wx-accent-edge, #C97A0E);
}
.wx-unsaved[hidden] { display: none !important; }
.wx-unsaved__count {
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--wx-accent, #FF9F1C);
}
.wx-unsaved__btn {
  min-height: 44px;
  padding: 10px 18px;
  background: var(--wx-accent, #FF9F1C);
  border: 1px solid var(--wx-accent, #FF9F1C);
  color: #16120A;
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.wx-unsaved__btn:hover:not(:disabled) { background: var(--wx-accent-soft, #FFB845); }
.wx-unsaved__btn:disabled { opacity: .55; cursor: default; }

/* 頁面底部留白，免得固定列蓋住最後一張卡的儲存鈕。 */
body.has-unsaved-bar { padding-bottom: 84px; }

/* 有未儲存變更的卡片：左緣加一條 accent，並在卡上掛一個小標。
   單靠顏色不夠（色覺差異 + 低亮度螢幕），所以同時有「邊框」與「文字」兩個訊號。 */
.wx-stockcard[data-dirty="true"] {
  border-left: 2px solid var(--wx-accent, #FF9F1C);
}
.wx-stockcard__dirty {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--wx-accent-edge, #C97A0E);
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--wx-accent, #FF9F1C);
  vertical-align: middle;
}
.wx-stockcard__dirty[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   CC_0807_04｜股票卡的動作列（儲存 + 刪除這支）
   --------------------------------------------------------------- */
/* .wx-btn 是 width:100%，兩顆按鈕直接並排會各佔一整行，所以包一層 flex。
   儲存吃掉剩下的寬度、刪除固定寬 —— 主要動作永遠比破壞性動作大一號。 */
.wx-stockcard__acts {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.wx-stockcard__acts .wx-btn { width: auto; flex: 1 1 auto; }
/* ⚠️ 這一條的特異性必須壓過上面那條（兩個都是 .wx-btn）。
   少了 .wx-stockcard__acts 前綴的話，刪除鍵也會吃到 flex:1 1 auto，
   變成兩顆等寬 —— 實測 390px 下兩顆都是 165px，與「主要動作大一號」相反。 */
.wx-stockcard__acts .wx-btn--danger { flex: 0 0 auto; width: auto; }

/* 破壞性次要動作：平常是安靜的框線鈕，hover / focus 才轉紅。
   一進畫面就滿版紅色會讓人以為這張卡出事了。 */
.wx-btn--danger {
  padding: 0 16px;
  background: none;
  color: var(--wx-ink-2, #BDB6A5);
  border: 1px solid var(--wx-rule-2, #353535);
  font-weight: 400;
}
.wx-btn--danger:hover:not(:disabled),
.wx-btn--danger:focus-visible {
  background: none;
  border-color: var(--nx-red, #E8543D);
  color: var(--nx-red, #E8543D);
}

@media (max-width: 340px) {
  /* 極窄機的保險。實測 375px（iPhone SE）兩顆並排仍然放得下，
     所以斷點壓到 340px —— 不要為了想像中的窄螢幕，讓真的存在的機型走降級版面。 */
  .wx-stockcard__acts { flex-direction: column; }
  .wx-stockcard__acts .wx-btn,
  .wx-stockcard__acts .wx-btn--danger { width: 100%; flex: 1 1 auto; }
}

/* G6｜還沒選的那一組，標出來但不擋儲存（只選一項是允許的） */
.wx-grp-todo {
  display: block;
  margin-top: 6px;
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--wx-muted, #6F6A5F);
}
.wx-grp-todo[hidden] { display: none !important; }

/* ---------------------------------------------------------------
   G8｜登出
   --------------------------------------------------------------- */
/* 原本在頁尾、10.5px、和說明小字一樣暗 —— 比旁邊的說明文字還小。
   移到設定區塊裡並給正常字級與 ≥44px 觸控區。 */
.wx-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 0;
  margin-top: 18px;
  border-top: 1px solid var(--wx-rule, #262626);
}
/* display:flex 會蓋掉 [hidden] 的 display:none —— <div hidden> 實測仍然看得見。
   同一個坑 nx-pages.css:266、nx-webpush.js 的 .wx-wp__btn 都踩過。
   沒有這一條的話，相依腳本掛掉時（登入狀態根本沒解出來）畫面上會出現一顆
   按了沒有反應的「登出」。 */
.wx-account[hidden] { display: none !important; }
.wx-account__who {
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--wx-muted, #6F6A5F);
  word-break: break-all;
}
.wx-account__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 88px;
  padding: 10px 18px;
  background: none;
  border: 1px solid var(--wx-rule-2, #353535);
  color: var(--wx-ink-2, #BDB6A5);
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 13px;
  cursor: pointer;
}
.wx-account__btn:hover { border-color: var(--nx-red, #E8543D); color: var(--nx-red, #E8543D); }

/* ---------------------------------------------------------------
   G9｜其他通知方式（ntfy 收合區的外層）
   --------------------------------------------------------------- */
/* ntfy 本身一行都沒動。這一塊只決定「誰會看到它」：
   還沒用過 ntfy、也還沒訂閱過的新使用者預設收起來，需要的人仍然找得到。 */
.wx-altchan {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--wx-rule, #262626);
}
.wx-altchan__lbl {
  display: block;
  margin-bottom: 10px;
  font-family: var(--wx-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wx-muted, #6F6A5F);
}