/*
 * 專案自己的響應式覆寫。載入順序在 rubic.css 之後。
 *
 * rubic.css 是買來的 landing page 模板（DevCRUD Rubic），不直接改它 ——
 * 分開才能看出哪些是專案的決定、哪些是模板帶來的。
 *
 * 行動版的使用情境：結構技師不會在手機上填 24 個圖層欄。手機上真正會做的是
 * 「看任務跑完了沒、下載結果、讀注意事項」。所以這裡的目標是讓站台不壞掉、
 * 並讓監看與讀取那條路徑能用，而不是把巨型表單變好填。
 */

/* ------------------------------------------------------------------
 * 1. 水平溢出
 *
 * rubic.css:318 給 .navbar-brand 設了 white-space: nowrap，而
 * rubic.css:489 把它放大到 30px。兩者相加是 669px 不可換行的文字，
 * 在 390px 的視窗裡造成整站七頁都 +295px 水平溢出。
 * ------------------------------------------------------------------ */
.page-navbar .navbar-brand {
  max-width: 100%;
}

/* 最後一道防線：任何單一元素都不該把文件撐寬 */
html,
body {
  overflow-x: hidden;
}

/* ------------------------------------------------------------------
 * 2. 漢堡選單
 *
 * rubic.css:413 假設 768px 以下有 .navbar-toggler（它在 min-width:768
 * 裡把它隱藏起來），但任何樣板裡都沒有那個元素，而且 base.html 從未載入
 * Bootstrap —— 所以 navbar-expand-md 沒有任何作用，六個連結在 390px 下
 * 全部展開堆疊，吃掉 844px 視窗中的 423px。
 *
 * 這裡自己實作，不引入 Bootstrap（會與 rubic.css 衝突）。
 * ------------------------------------------------------------------ */
/* Bootstrap 現在自己處理 collapse 的顯示與 navbar-toggler 的圖示。
 * 這裡只補它沒給的：44x44 觸控目標與可見的鍵盤焦點。 */
.navbar-toggler {
  /* rubic.css:125 的 `button { width: 300px }` 會贏過沒有 width 的規則，
     所以這裡要明確給寬度，否則漢堡會變成 300px 寬 */
  width: 44px;
  height: 44px;
  padding: 0.4rem;
  flex: 0 0 auto;
}

.navbar-toggler:focus-visible {
  outline: 2px solid var(--brand-orange, #ff9a44);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 3. 觸控目標
 *
 * 量到的最小值：頁尾連結 40x24 / 80x24 / 120x24，圖面單位下拉 45x19。
 * 44x44 是可靠點擊的下限。
 * ------------------------------------------------------------------ */
.page-navbar .nav-item .nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 分頁標籤。上面那條只涵蓋導覽列（.page-navbar），tool2 的梁/柱分頁不在
   裡面，所以要另外給 —— Bootstrap 的 .nav-link 預設約 40px 高。 */
.nav-tabs .nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--brand-orange, #ff9a44);
  outline-offset: -2px;
}

#gtco-footer .gtco-footer-link .gtco-list-link li a,
#gtco-footer .gtco-copyright a,
#gtco-footer .col-md-4 a {
  /* 原本用 line-height: 44px 來撐高度，副作用是把行高綁成字級的 2.2-3.1 倍，
     在字級尺階上看起來像壞掉的值。改用 inline-flex 置中，行高留給尺階決定。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
}

select,
input,
textarea,
button {
  min-height: 44px;
}

/* 文字輸入框原本靠 20px 字級撐到 52px 高。字級改成 17px 之後只剩 41px ——
   低於 44px 的觸控下限，所以改用內距明確給高度。 */
input[type="text"],
input[type="number"],
input[type="email"] {
  padding: var(--s-2) var(--s-3);
}

/* 範例檔下載連結在裸 <div> 裡，不在頁尾，上面的選擇器抓不到。
   用 href 前綴鎖定它，不要對所有 <a> 下手 —— 那會把說明文字裡的行內
   連結也撐成 44px 高。 */
a[href^="/demo/"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 圖面單位下拉原本只有 19px 高 */
select {
  padding: 0.4rem 0.5rem;
}

/* ------------------------------------------------------------------
 * 4. 頁尾網格在窄視窗多出 5px
 * ------------------------------------------------------------------ */
#gtco-footer .row {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------------
 * 5. 圖層設定欄的密度
 *
 * 圖層欄原本一欄一列、每列 100px：/tool2 佔 3360px（頁面總高的 36%）、
 * /tool1 2240px（29%）、/joint_scan 1502px（48%）。
 *
 * 但實測在 /tool2 選一次公司樣板就填滿 22/24 格 —— 使用者對這一區做的是
 * 「確認」而不是「填寫」，卻要為它捲掉三分之一個頁面。
 *
 * 第一版是 `.dense-layers p:has(> textarea)` 配固定寬度的 inline-block ——
 * 刻意不改 markup，因為當時那三個樣板的圖層欄有 <div> 也有沒關的 <p>，
 * 混得很亂，用 :has() 從外面套是最小的介入。
 *
 * 現在三個樣板的表單都重排過了（欄位是 .field、外面是 .field-grid），
 * 圖層欄的密度由 theme.css 第 16 節的 grid 欄軌決定，這一段沒有使用者了。
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * 6. 圖層設定的折疊區
 *
 * 承上：既然這一區是「確認」而不是「填寫」，預設就收起來。
 *
 * 但裡面有 required 欄位，而收起的 <details> 裡的 required 欄位會讓瀏覽器
 * 靜默地不送出表單（它沒辦法把游標移到看不見的東西上）。解法在
 * static/js/details-guard.js —— 沒有那段腳本就不要收起這一區。
 * ------------------------------------------------------------------ */
.layer-fields > summary {
  cursor: pointer;
  padding: 0.6rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  user-select: none;
  /* display:flex 會讓 Chrome 移除原生的展開三角形，所以要自己畫一個 ——
     沒有它的話 summary 看起來就只是一行粗體字，使用者不會知道可以點。 */
  list-style: none;
}

.layer-fields > summary::-webkit-details-marker {
  display: none;
}

.layer-fields > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 0.4rem solid currentColor;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  margin-right: 0.2rem;
  transition: transform 0.15s;
}

.layer-fields[open] > summary::before {
  transform: rotate(90deg);
}

.layer-fields > summary:focus-visible {
  outline: 2px solid var(--brand-orange, #ff9a44);
  outline-offset: 2px;
}

/* 提示文字比標題輕，不要跟欄位標籤搶注意力。
   原本是 `font-size: 0.9em` —— 相對 17px 的正文算出 15px，尺階上沒有這一階；
   顏色也是硬寫的 #6c757d。兩者都接回 token。 */
.layer-fields-hint {
  font-weight: 400;
  font-size: var(--text-meta);
  color: var(--ink-2);
}

/* 展開後和下一段之間要有呼吸空間 */
.layer-fields[open] {
  padding-bottom: 0.5rem;
}

/* ------------------------------------------------------------------
 * 7. 減少動態偏好
 *
 * 全庫原本零命中，而 rubic.css:484,491 有 transition: all 0.3s、
 * banner.js 有 opacity 動畫。
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}