/* ══════════════════════════════════════════════════════════
   nav.css — 全站共用導覽列（Day 25E.1A，D8／D20）
   ──────────────────────────────────────────────────────────
   🧒 小孩版：同一份導覽列，依螢幕寬度換三種擺法——
     手機 < 768px：固定在畫面底部的分頁列（拇指好按）
     平板 768–1023px：左側一排小圖示
     桌機 ≥ 1024px：左側一整欄有字的選單
   規則：
   1. 只用 tokens.css 的語意層變數，不寫死色碼（verify_round.mjs 會檢查）。
   2. 本檔必須是每一頁「最後一個」載入的樣式表：body.has-app-nav 和各頁的
      body.discipline-page／body:not(.dictionary-page)／body.dictionary-page
      權重相同（都是 0,1,1），最後載入的才會生效。
   3. 讓位只設「單一方向」的 padding（padding-bottom 或 padding-left），
      不用 padding 簡寫，以免蓋掉各頁原本其他方向的 padding。
   ══════════════════════════════════════════════════════════ */

/* ── 共用（所有寬度） ───────────────────────────────────── */
.app-nav {
  position: fixed;
  z-index: var(--z-nav);
  box-sizing: border-box;
  /* 不透明背景：避免底下捲動的內容透出來影響閱讀 */
  background: var(--color-surface);
  font-family: var(--font-sans);
}

.app-nav *,
.app-nav *::before,
.app-nav *::after {
  box-sizing: border-box;
}

.app-nav__list,
.app-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav__item {
  position: relative;
}

/* 連結與停用按鈕共用同一個外觀；button 要清掉瀏覽器預設樣式 */
.app-nav__link {
  display: flex;
  align-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  margin: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.app-nav__link.is-disabled {
  color: var(--color-text-disabled);
  cursor: default;
}

.app-nav__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.app-nav__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.app-nav__link:focus-visible,
.app-nav__sublink:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 以下三樣只有桌機顯示（在桌機區段再打開） */
.app-nav__brand,
.app-nav__soon,
.app-nav__sublist {
  display: none;
}

/* 「即將推出」小氣泡（手機與平板點停用項目時出現 2 秒） */
.app-nav__bubble {
  position: absolute;
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-text-heading);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.app-nav__bubble[hidden] {
  display: none;
}

/* 讀屏軟體用的隱藏播報區：畫面上看不到，但讀屏軟體念得到 */
.app-nav__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 手機 < 768px：底部分頁列 ─────────────────────────── */
@media (max-width: 767px) {
  .app-nav {
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--nav-bottom-height) + env(safe-area-inset-bottom));
    /* iPhone 底部 Home 橫線的安全區域：背景延伸過去，按鈕留在上方 */
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-border);
  }

  .app-nav__list {
    display: flex;
    height: var(--nav-bottom-height);
  }

  .app-nav__item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  .app-nav__link {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1);
    font-size: var(--text-sm);
  }

  .app-nav__link.is-active {
    color: var(--color-primary);
  }

  .app-nav__bubble {
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
  }

  /* 讓位：內容底部留出導覽列＋安全區域＋一點間距，頁尾不會被擋住 */
  body.has-app-nav {
    padding-bottom: calc(var(--nav-bottom-height) + env(safe-area-inset-bottom) + var(--space-4));
  }

  /* 正在輸入時暫時隱藏（由 nav.js 加上／移除 class，不移除任何元素） */
  body.app-nav-hidden-for-input .app-nav {
    display: none;
  }
}

/* ── 平板 768–1023px：左側圖示欄 ───────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-nav {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--nav-rail-width);
    padding: var(--space-3) var(--space-1);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
  }

  .app-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .app-nav__link {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    font-size: var(--text-xs);
  }

  .app-nav__link.is-active {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
  }

  .app-nav__bubble {
    top: 50%;
    left: calc(100% + var(--space-2));
    transform: translateY(-50%);
  }

  body.has-app-nav {
    padding-left: var(--nav-rail-width);
  }
}

/* ── 桌機 ≥ 1024px：左側側邊欄 ─────────────────────────── */
@media (min-width: 1024px) {
  .app-nav {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--nav-sidebar-width);
    padding: var(--space-5) var(--space-3);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
  }

  .app-nav__brand {
    display: block;
    padding: 0 var(--space-3) var(--space-5);
    color: var(--color-text-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }

  .app-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .app-nav__link {
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    text-align: left;
  }

  .app-nav__link:not(.is-disabled):not(.is-active):hover {
    background: var(--color-surface-muted);
  }

  .app-nav__link.is-active {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
  }

  .app-nav__soon {
    display: inline-block;
    margin-left: auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: 1.6;
    white-space: nowrap;
  }

  /* 子項目：縮排、較小字、左側一條細線，不放圖示 */
  .app-nav__sublist {
    display: block;
    margin: var(--space-1) 0 var(--space-2) var(--space-6);
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
  }

  .app-nav__sublink {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .app-nav__sublink:not(.is-active):hover {
    background: var(--color-surface-muted);
  }

  .app-nav__sublink.is-active {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
    font-weight: var(--weight-semibold);
  }

  /* 桌機直接顯示「即將推出」標籤，不用氣泡 */
  .app-nav__bubble {
    display: none;
  }

  body.has-app-nav {
    padding-left: var(--nav-sidebar-width);
  }
}

/* ── 列印：不印導覽列，也不留讓位空間 ─────────────────── */
@media print {
  .app-nav {
    display: none;
  }

  body.has-app-nav {
    padding-bottom: 0;
    padding-left: 0;
  }
}