/*
 * 專案自己的主題層。載入順序：bootstrap → rubic.css（買來的模板）→ theme.css
 * → responsive.css
 *
 * rubic.css 是 DevCRUD 的 Rubic landing page 模板。它的授權標頭保持原樣不動 ——
 * 那是第三方檔案的法律聲明，不是設計決定。這裡只覆寫，不編輯它。
 *
 * ── 為什麼有這一層 ────────────────────────────────────────────────
 *
 * 使用者的說法是「整體的畫面不和諧，字體大小與背景不搭」。實測下來原因很具體：
 *
 * 字級：站上有 9 個任意值（60/40/32/30/28/25/24/20/18px），其中 30 vs 28、
 * 25 vs 24、20 vs 18 相差只有 4-7%，撐不起不同的角色。而 rubic.css:30 用
 * **固定的** `line-height: 40px` 套在 body/div/form/input/label 上 —— 在 60px
 * 的字上是 0.67 倍（`div.header1` 的字會互相重疊），在 18px 上是 2.2 倍。
 * 垂直節奏是壞的，不只是不一致。
 *
 * 表面：六個互不相關的強調色 —— 品牌橘 #ff9a44、琥珀 rgba(250,176,5,.5)、
 * Material 綠 #4CAF50、螢光綠光暈 rgba(166,255,0,.3)、`.banner2` 的 20% 純紅、
 * 加上三張色調各異的橫幅照片。頁面是純白配 #666，沒有經過選擇的中性色。
 *
 * 版面：`.banner2`（每個區段標題）是 `width: 25%`，貼齊左邊界、文字溢出框外，
 * 而旁邊的 `.testbox` 卡片是內縮的 —— 沒有統一的內容容器。
 *
 * 所以這一層建立一組共用的角色尺階、間距刻度與表面，並把那六個強調色收斂成
 * 一組有關係的。**這輪會改變算出來的顏色與字級** —— 那正是要求的內容。
 * 三套橫幅照片身分保留不動：那是識別，不在這次範圍。
 */

:root {
  /* 品牌 */
  --brand-orange: #ff9a44;          /* .brand-name */
  --brand-tagline: #f8f9fa;         /* .brand-tagline */
  /* 送出鈕的底色。原本是 #cc7a00，白字在上面只有 3.31:1 —— 按鈕字是
     17px/600，不到大字門檻（18.66px 粗體），需要 4.5:1。#a35f00 是 5.01:1。
     hover 往**更深**走而不是更亮：更亮會把對比再拉低。 */
  --brand-cta: #a35f00;             /* button，白字 5.01:1 */
  --brand-cta-hover: #8a4f00;       /* button:hover，白字 6.57:1 */

  /* 深色底：導覽列的顏色 */
  --shell-dark: rgba(52, 58, 64, 1);
  --shell-dark-2: rgba(80, 89, 97, 1);
  --shell-text: #dee2e6;

  /* 沒有自家橫幅圖的頁面（/、/login、/results）用這組。
     原本是中性灰，疊上遮罩之後是一塊死氣沉沉的深灰 —— 使用者回報首頁「內容
     過小」時指的就包含這個。改成與品牌橘同族的暖褐，讀起來是設計過的頁首。
     值是往回推算的：疊 0.55 黑之後白字的對比落在 10.5:1 到 8.2:1，
     跟有照片的工具頁（6-7:1）同一個區間，而且漸層還看得出來 —— 太暗的話
     漸層會被壓成純色。 */
  --banner-fallback-1: #b5843f;
  --banner-fallback-2: #d1a86c;

  /* 頁尾 */
  --footer-bg: #1a1a1a;
  /* 頁尾自己的量測。內容就三小塊（一句說明、7 個連結、一個 QR），撐在
     --content 的 1560px 上實測第三欄有 472px 寬但內容只有 196px ——
     右邊死掉 300px。使用者：「footer 有點太寬了」。 */
  --footer-measure: 68rem;
  /* 原本是 #666，在 #1a1a1a 上只有 3.03:1（16.7px 文字需要 4.5:1） */
  --footer-text: #909090;

  /* 橫幅上的文字都是大字，WCAG 門檻是 3:1。
     實測底圖最亮處只有 1.49:1，所以需要一層遮罩 —— 見下方 .banner::after。 */
  --banner-scrim: rgba(0, 0, 0, 0.55);

  /* ── 中性色 ────────────────────────────────────────────────────
     上一版是暖奶油（#faf8f5）配陶土橘。那組合是 AI 生成介面最常見的樣子之一
     —— 使用者的說法是「AI 感太重」，這是主要來源。

     改成從題材本身長出來的方向：**圖紙**。這個站的世界是 AutoCAD、圖框、
     鋼筋表、標註線 —— 它的語彙是線與表格，不是卡片與柔和陰影。底色用日光燈
     下製圖紙的冷中性，紙面是白的，區域用線界定。

     實測對比（在 --ground 上）：--ink 12.45:1、--ink-2 5.55:1，
     三個強調色文字都 >= 4.5（橘 4.62、teal 4.73、cyan 4.58）。 */
  /* 底色比紙面深一階。上一版是 #f4f6f8 —— 跟純白只差 4%，於是「紙」跟
     「桌面」看起來是同一個平面，整頁就是一大塊淺色。這個系統是用線界定
     區域、不用陰影，所以層次只能靠底色的明度差做出來。 */
  --ground: #e6ebf0;                /* 桌面 */
  --surface: #ffffff;               /* 紙面 */
  --surface-sunken: #e9edf1;        /* 需要下沉時 */
  --line: #dfe3e8;                  /* 分隔細線（裝飾）*/
  --line-strong: #828d99;           /* 控件與圖框的線：白底 3.38:1，
                                       符合 UI 元件的 3:1 門檻 */
  --ink: #2b2f33;                   /* 主要文字 */
  --ink-2: #5c646c;                 /* 次要文字、提示 */


  /* ── 語意色（收斂過）──────────────────────────────────────────
     原本各自為政的六個強調色收成三個，全部往品牌橘的暖調靠。
     白字在上面的對比：--state-ok 5.04:1、--state-warn 5.05:1。 */
  --state-ok: #2f7d4f;              /* 任務列表表頭（原 Material #4caf50）*/
  --state-error: #b3261e;
  --state-warn: #b4530a;            /* 執行中（原 `color: orange`，2.14:1）*/
  /* 說明文字裡有些顏色是在描述工具在 DWG 上畫的框線顏色（「用淺藍色框線標註」）
     —— 顏色本身是資訊，所以保留色系、只加深到可讀。原本 #00d9e0 是 1.65:1，
     實質看不見。 */
  --mark-cyan: #0b7c85;             /* 4.68:1 */
  --link-quiet: #1f7a74;            /* 範例檔下載 */

  /* ── 字級：角色尺階 ──────────────────────────────────────────
     用 rem 讓使用者的字級設定仍然有效。每一階至少相差 1.2 倍，才撐得起
     不同的角色。中文字需要比拉丁字大一些才等效易讀，所以 body 用 17px
     而不是 16px 的網頁下限。

     行高全部改成**比例**而不是固定 px —— 這是這輪最關鍵的一項。 */
  --text-meta: 0.875rem;            /* 14px 提示、頁尾、選填 */
  --text-body: 1.0625rem;           /* 17px 正文、欄位標籤 */
  --text-group: 1.3125rem;          /* 21px 子區段（h4）*/
  --text-section: 1.625rem;         /* 26px 區段標題（h3）*/
  --text-title: 2.25rem;            /* 36px 頁面標題 */
  --text-display: 3.25rem;          /* 52px 橫幅主標 */

  --leading-loose: 1.7;             /* 正文：中文需要比拉丁字寬鬆 */
  --leading-normal: 1.55;           /* 標籤、提示 */
  --leading-tight: 1.35;            /* 標題 */
  --leading-display: 1.15;          /* 橫幅主標 */

  /* ── 間距：4 為基數 ──────────────────────────────────────────
     4 的基數比只用 8 多了中間那幾階，實際上很需要。 */
  --s-1: 0.25rem;                   /* 4  */
  --s-2: 0.5rem;                    /* 8  */
  --s-3: 0.75rem;                   /* 12 */
  --s-4: 1rem;                      /* 16 */
  --s-6: 1.5rem;                    /* 24 */
  --s-8: 2rem;                      /* 32 */
  --s-12: 3rem;                     /* 48 */

  /* 內容量測：所有區塊共用，才對得齊。
     1140px 在 1920px 的視窗下兩側各留 390px —— 太多。改成跟著視窗縮放並設上限。

     但**文章**不能跟著變寬：/login 的條款在 1560px、17px 下一行會有 90 個
     中文字，讀起來會跳行。所以 <p> 與 <li> 另外用 --measure 收在
     46em（約 46 個中文字），那是中文舒適的行長。 */
  --content: min(94vw, 1560px);
  --gutter: var(--s-6);
}

/* ------------------------------------------------------------------
 * 0. 中文字型：先用系統字，網路字型只當後備
 *
 * rubic.css:34 的堆疊是 `Roboto, Arial, 'Noto Sans TC', sans-serif`。
 * Roboto 從來沒有載入，Arial 沒有中文字 —— 所以每一個中文字都落到
 * Noto Sans TC 這個網路字型上。Google Fonts 把 CJK 切成大量子集，實測每頁
 * 下載 15 個檔案共 557KB，是全站每一頁最大的單一成本（首頁的 559KB 幾乎
 * 全是它）。
 *
 * 在它前面插入系統的正黑體。這個站需要 AutoCAD 才能用，實際使用者幾乎都在
 * Windows 上，微軟正黑體是 Win7 以後的標準繁中介面字型；macOS 用蘋方。
 * 兩者都沒有時（大多是 Linux）才落到 Noto Sans TC，所以 Google Fonts 的
 * <link> 保留 —— 那些人不會因此看到更差的字。
 *
 * 選擇器與 rubic.css:34 相同（body, div, form, input, label），特異性一樣，
 * 靠載入順序在後面勝出。字寬完全相同，實測版面零位移。
 * ------------------------------------------------------------------ */
body,
div,
form,
input,
label,
button,
select,
a,
p,
h1,
h2,
h3,
h4 {
  /* Roboto 拿掉了：它從來沒有被載入，所以拉丁字實際上落在 Arial ——
     除非使用者本機剛好裝了 Roboto（某些軟體會附帶），那就會看到不同的字。
     也就是說拉丁字型原本是**因機器而異**的，這本身就是不和諧。
     
     Arial 也一起拿掉：讓拉丁字直接用正黑體自己的拉丁字符。這個站的拉丁字
     都是短的（RC、SCAN、Powered by、團隊名），中英混排時同一個家族沒有接縫，
     比借一個西文字型再拼上中文字型好。圖層名稱另外用等寬字（見樣板）。 */
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC",
               sans-serif;
}

/* ------------------------------------------------------------------
 * 0b. 品牌字
 *
 * 這兩個顏色原本掛在 rubic.css 的 `.text-primary` / `.text-light` 上 ——
 * 那是 Bootstrap 的工具類名。Bootstrap 的工具類都帶 `!important`
 * （`.text-primary{color:#007bff!important}`），所以無論載入順序如何都會贏，
 * 品牌字會變藍。改用專案自己的類名，衝突就不存在了。
 * ------------------------------------------------------------------ */
.page-navbar .brand-name {
  color: var(--brand-orange);
}

.page-navbar .brand-tagline {
  color: var(--brand-tagline);
}

/* ------------------------------------------------------------------
 * 0c. 分頁標籤（tool2 的梁 / 柱）
 *
 * 未啟用的分頁預設會拿到連結色 --brand-orange，那在深色導覽列上沒問題，
 * 但在白底上只有 2.11:1 —— 20px 的正常字需要 4.5:1（大字門檻是 18.66px
 * 粗體或 24px，20px regular 不算大字）。
 *
 * 所以文字用深色，品牌色移到啟用分頁的上緣邊框當強調：邊框是非文字元件，
 * 門檻 3:1，--brand-cta (#cc7a00) 在白底上是 3.31:1。
 * ------------------------------------------------------------------ */
.nav-tabs .nav-link {
  color: var(--shell-dark);
}

.nav-tabs .nav-link.active {
  font-weight: 700;
  border-top: 3px solid var(--brand-cta);
}

/* ------------------------------------------------------------------
 * 1. 移除第三方隨機照片
 *
 * rubic.css:78 的預設是 url('https://loremflickr.com/1800/300?random=1')——
 * 一個佔位圖服務。tool1/tool2/tool5/tutorial 各自覆寫成自家橫幅，但
 * `/`、`/login`、`/results` 沒有，所以那三頁每次載入都向第三方抓一張隨機
 * 照片（實測 302 → 200，1724 ms）。`/results` 是等了 25 分鐘回來取檔案的
 * 那一頁。
 *
 * 預設改成站台自己的中性漸層。這是移除未填的佔位內容，不是為那兩頁決定
 * 一張新的主視覺 —— 那是另外要談的設計決定。
 * ------------------------------------------------------------------ */
.banner::before,
.banner_col::before {
  background-image: none;
  background-color: var(--banner-fallback-1);
  background: linear-gradient(160deg,
              var(--banner-fallback-1), var(--banner-fallback-2));
}

/* ------------------------------------------------------------------
 * 2. 橫幅文字對比
 *
 * 實測：/tool1 1.83:1、/joint_scan 1.74:1，最亮處 1.49:1，門檻 3:1。
 * rubic.css:88-94 有一段被註解掉的 ::after 遮罩 —— 有人試過。啟用它。
 * ------------------------------------------------------------------ */
.banner::after,
.banner_col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--banner-scrim);
  pointer-events: none;
}

/* 遮罩在圖之上、文字之下 */
.banner > *,
.banner_col > * {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------------
 * 3. 頁尾
 *
 * （舊的第 3 節「頁尾文字對比」與第 7 節「頁尾」都併進這裡，所以編號沿用 3、
 * 7 號空著。）
 *
 * 使用者：「拿掉頁尾那行，並重新設計 footer」。
 *
 * 拿掉的是模板作者的標註（`© 2016 Free HTML5. All Rights Reserved.` 與
 * `Designed by GetTemplates.co / Demo Images: Pixeden & Unsplash`）——
 * 那不是這個站的。要不要保留取決於當初取得模板的授權，使用者確認拿掉。
 *
 * 原本的結構問題：
 *   * 兩欄硬塞進 col-md-4（整體三分之一寬），右邊三分之二完全空著
 *   * 7 個連結擠成一根很高的單欄，而且 rubic.css:342 把它們設成 uppercase
 *     ——中文沒有大小寫，那個宣告只會影響夾雜的英文
 *   * 360px 的 QR code 塞在 col-md-4 裡面的 col-md-6
 *   * 「官方Line帳號」用 #42e610 螢光綠，那是站上唯一一處
 *   * .gtco-container 的 max-width 是 1240px，比內容的 --content 窄 ——
 *     頁尾跟頁面上方對不齊
 *
 * 現在是三欄 grid（跟表單同一個 auto-fit 模式），共用 --content 的量測，
 * 底部一條線加版權。深底上的顏色全部明確指定：第 4 節的
 * `h1..h6 { color: var(--ink) }` 會讓標題變成深灰壓在 #1a1a1a 上、
 * 實質看不見（橫幅踩過同一個坑）。
 * ------------------------------------------------------------------ */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  /* rubic.css:259 的 `#gtco-footer` 設了 `padding: 2em 0 0 0 !important`
     與 `background: #262626`。id（1,0,0）贏過 class（0,1,0），連
     !important 都打不贏更高的特異度 —— 實測上內距是 34px、底色是
     #262626，--footer-bg 從來沒生效過。解法是把 base.html 的
     `id="gtco-footer"` 拿掉（base2.html 還是舊模板結構，它的要留），
     那條規則命中的其他 class 在新結構裡都已經不存在。 */
  padding: var(--s-8) 0 0;
}

.site-footer-grid,
.site-footer-baseline {
  /* 不跟頁面共用 --content：頁尾在自己的深色band 上，跟上方面板之間沒有
     視覺上的連線，所以左緣對齊在這裡沒有承重 —— 而內容撐不滿 1560px。
     版權那條線也跟著收，整個頁尾才是一塊。 */
  max-width: var(--footer-measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--s-6) var(--s-12);
  padding-bottom: var(--s-8);
}

/* 第 4 節的 `div { color: var(--ink-2) }` 比 `.site-footer` 更具體地命中裡面
   的每個 div，所以頁尾的顏色繼承不下來 —— 實測說明文字是 #5c646c 在 #1a1a1a
   上，只有 2.52:1。深底上的每一種文字都要明確給色。 */
.site-footer-col,
.site-footer-grid,
.site-footer-baseline,
.site-footer p,
.site-footer li {
  color: var(--footer-text);
}

.site-footer-col > :first-child {
  margin-top: 0;
}

/* 深底上的標題要明確給色，否則會被第 4 節的 --ink 蓋成深灰。 */
.site-footer-brand,
.site-footer-heading {
  color: #fff;
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0 0 var(--s-3);
}

.site-footer-brand {
  font-size: var(--text-group);
}

.site-footer-heading {
  font-size: var(--text-body);
}

.site-footer p {
  margin: 0 0 var(--s-2);
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
}

/* 特異度要贏過上面的 `.site-footer p`（0,1,1）—— 只寫 .site-footer-team
   是 (0,1,0)，會被蓋成灰色（實測 4.74:1，跟旁邊的說明文字一樣）。 */
.site-footer p.site-footer-team {
  color: #fff;
  font-weight: 600;
}

.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 7 個連結排成兩欄，不要變成一根很高的單欄。
     收一個 max-width：不收的話兩欄會被拉到 grid 欄寬的兩端，實測「首頁」到
     「梁柱接頭檢核」隔了 248px，讀起來是兩份不相干的清單。 */
  columns: 2;
  column-gap: var(--s-6);
  max-width: 18rem;
}

.site-footer-links li {
  margin: 0;
  padding: 0;
}

/* 44px 的觸控高度：inline-flex + align-items，不是 line-height ——
   後者會把行距一起拉大（第 12 節踩過）。 */
.site-footer-links a,
.site-footer p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-meta);
}

/* 聯絡欄：文字與 QR 並排，不要疊起來。疊的時候這一欄實測 303px，是三欄
   裡最高的一欄 —— 整個頁尾的高度由它決定。並排之後它的高度由 QR 決定，
   最高的欄變成 7 個連結那一欄。窄視窗會自己折回上下排。 */
.site-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
}

/* 文字區塊要能縮，否則它的自然寬度（約 220px）加上 QR 的 136px 超過欄寬
   315px，flex-wrap 就把兩者折成上下兩排 —— 等於沒並排（實測還是 239px）。
   9rem 的 flex-basis 讓它縮到能跟 QR 同一排，又不會壓到那行網址斷字。
   真的窄到放不下時才折回上下排，那是它的降級行為。 */
.site-footer-contact > div {
  flex: 1 1 9rem;
}

.site-footer-qr {
  display: inline-block;
  /* QR 是拿手機掃的，120px 夠掃；原本是 360px，在頁尾裡整欄都被它佔滿。
     第一版收到 180px，但它還是頁尾裡最高的單一元素（含白底 196px）。
     白底留一點內距，深色頁尾直接貼著 QR 會影響辨識率。 */
  padding: var(--s-2);
  background-color: #fff;
}

.site-footer-qr img {
  display: block;
  width: 120px;
  height: auto;
}

.site-footer-baseline {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-top: 1px solid #333;
}

.site-footer-baseline p {
  margin: 0;
}

/* ------------------------------------------------------------------
 * 4. 字級的角色尺階
 *
 * rubic.css:26-35 把 `font-size: 20px; line-height: 40px` 套在
 * body/div/form/input/label 上。固定 40px 的行高是這輪最主要的問題：它在
 * 60px 的字上是 0.67 倍（字重疊）、在 18px 上是 2.2 倍（鬆散）。
 *
 * 這裡用同一組選擇器覆寫（特異性相同、靠載入順序勝出），行高改成比例。
 * ------------------------------------------------------------------ */
body,
div,
form,
input,
label {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--ink-2);
}

body {
  background-color: var(--ground);
  color: var(--ink);
}

/* 標題：權重要 >= 行內的 <strong>（700），否則階層會反過來 —— 原本標題是
   500、strong 是 700，句中的粗體看起來比標題還重。 */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-title);
}

h3 {
  font-size: var(--text-section);
}

h4 {
  font-size: var(--text-group);
}

/* 欄位標籤是這個站最主要的角色（單頁 46 個）。跟正文同尺寸，靠字重與顏色
   分開 —— 再加一級字級只會讓表單更長。 */
label {
  color: var(--ink);
  font-weight: 600;
  line-height: var(--leading-normal);
}

/* 提示、選填說明、頁尾 */
small,
.layer-fields-hint {
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
}

/* 使用者輸入的是圖層名稱與編號 —— 等寬數字讓表格與多行欄位對得齊 */
input,
textarea,
select,
.task-table {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * 4b. 橫幅的字階
 *
 * rubic.css:41 的 `h1` 有 `line-height: 83px`，而 `.header1` 只改了
 * font-size（60px），所以同樣掛 .header1 的 <div>（tool1 的浮水印）拿到的是
 * 全域那個 40px，變成 60/40 = 0.67 倍。
 *
 * 原本三行是 60 / 30 / 40px —— 團隊名（40）比「Powered by」（30）大，兩者
 * 都巨大，跟主標搶。改成主標 52、Powered by 用 meta、團隊名用 group，
 * 讀起來是「標題 + 署名」。
 * ------------------------------------------------------------------ */
.header1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 700;
  /* 原本是 `text-shadow: black 0.1em 0.1em 0.2em` —— 在 52px 上是 5px 的
     位移加 10px 模糊，糊成一團。遮罩已經負責對比了，陰影只要收邊。 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.header2 {
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.85;
}

.header3 {
  font-size: var(--text-group);
  line-height: var(--leading-tight);
  margin: var(--s-1) 0 0;
}

/* ------------------------------------------------------------------
 * 5. 區段標題：不再是 25% 寬的紅色方塊
 *
 * rubic.css:95-106 的 `.banner2` 是 `width: 25%` + `height: 100%` +
 * `background-color: rgba(255, 0, 0, 0.2)`。實測在 1440px 下是 360px 寬、
 * 貼齊左邊界、文字溢出框外（/tutorial 的「操作影片」跑到粉紅框下面），
 * 而旁邊的 .testbox 卡片是內縮的。站上每一個區段標題都是這個。
 *
 * 改成與內容同寬的下沉色帶，標題用區段字級。⚠️ 開頭的用暖色的警示調 ——
 * 那是語意，不是裝飾（原本的 20% 純紅兩種都不是）。
 * ------------------------------------------------------------------ */
/* 區段標題。上一版是填色的下沉色帶 —— 又一個「卡片」。圖紙上的段落標註是
   一行字加一條線，就用那個。 */
.banner2 {
  width: auto;
  height: auto;
  max-width: var(--content);
  margin: var(--s-12) auto var(--s-4);
  padding: 0 0 var(--s-2);
  background-color: transparent;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
}

.banner2 h1,
.banner2 h2,
.banner2 h3,
.banner2 h4 {
  margin: 0;
  font-size: var(--text-section);
}

/* ------------------------------------------------------------------
 * 6. 共用的內容量測
 *
 * 有了它，區段標題、表單卡片、說明清單才會對齊在同一條邊上。原本
 * .banner2 貼齊 x=0、.testbox 內縮、<ol>/<ul> 又是另一個位置。
 * ------------------------------------------------------------------ */
.testbox,
#task-section,
body > ol,
body > ul,
.tab-content,
.nav-tabs {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}

body > ol,
body > ul {
  padding-left: calc(var(--gutter) + var(--s-4));
  padding-right: var(--gutter);
  color: var(--ink-2);
}

/* 紙面。上一版是圓角 + 雙層柔和陰影 —— 那是 AI 生成介面的標準卡片，而且
   陰影在這個題材裡沒有意義：圖紙是用線界定的，不是浮起來的。改成圖框線、
   直角。 */
.testbox {
  margin-top: var(--s-6);
  margin-bottom: var(--s-6);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

/* ------------------------------------------------------------------
 * 8. 把散落的硬寫顏色接到 token
 *
 * 上一輪抽 token 時註明「完整套用到所有樣板是另一輪的事」—— 這就是那一輪。
 * 原本站上有六個互不相關的強調色，這裡收斂成一組。
 * ------------------------------------------------------------------ */

/* 任務列表面板。原本的行內樣式是
   `box-shadow: 0 0 20px rgba(166, 255, 0, 0.3)` —— 零位移的螢光綠光暈，
   跟站上任何顏色都無關。真正的陰影要有位移與柔和的模糊。 */
.task-panel {
  margin: var(--s-8) auto;
  padding: var(--s-4);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

.task-panel > h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--text-group);
  text-align: center;
}

/* 表頭原本是行內的 Material 綠 #4caf50，白字在上面只有 2.78:1。
   --state-ok (#2f7d4f) 是 5.04:1。 */
.task-table-head {
  position: sticky;
  top: 0;
  /* 表頭不是「成功」—— 原本沿用 Material 綠的位置用了 --state-ok，
     那是語意錯置。改用導覽列同一個深色（白字 8.8:1）。 */
  background-color: var(--shell-dark);
  color: #fff;
}

/* 首頁的區段標題原本各自帶著 50% 琥珀色的行內底色 —— 又一個無關的顏色。
   改用字級與一條細線分隔。 */
body > h2 {
  max-width: var(--content);
  margin: var(--s-12) auto var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

/* 送出鈕：rubic.css 的 `button { width: 300px }` 不動（那是刻意的寬度，
   漢堡另有處理），只統一顏色與內距。 */
button {
  background-color: var(--brand-cta);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: var(--s-3) var(--s-6);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-normal);
}

button:hover,
button:focus {
  background-color: var(--brand-cta-hover);
}

/* 送出中。SubmitGuard 在請求進行中把按鈕停用（防連點）—— 但 `background-color`
   是明確設的，瀏覽器不會自己套灰色的停用外觀，實測停用前後完全一樣（同樣的
   橘底白字、同樣的 pointer 游標）。只靠文字換成「送出中…」不夠。
   --ink-2 上的白字實測 5.55:1。 */
button:disabled,
button:disabled:hover,
button:disabled:focus {
  background-color: var(--ink-2);
  cursor: progress;
}

/* 圖層欄位的分組線。原本只靠 .item 的間距，群組邊界看不出來。 */
.item + .item {
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}

/* 導覽列的漸層與連結色搬到 token（原本硬寫在 rubic.css，那個檔不編輯）。
   值與原本相同，只是現在改一處就會全站一致。 */
.page-navbar {
  background: linear-gradient(45deg, var(--shell-dark), var(--shell-dark-2));
}

.page-navbar .nav-item .nav-link {
  color: var(--shell-text);
  font-size: var(--text-body);
}

/* ------------------------------------------------------------------
 * 9. 收掉 rubic.css 針對個別元素設的字級
 *
 * 上面那組選擇器（body/div/form/input/label）覆寫不到這些 —— rubic 各自給了
 * 20px 或 30px，所以尺階上還留著 20px 這一階，跟 17px 的正文只差 1.18 倍，
 * 撐不起不同角色。
 * ------------------------------------------------------------------ */
a,
p,
li,
th,
td,
option,
textarea,
select,
.check-option {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
}

/* 沒有 .header1 的 h1（首頁）原本是 rubic.css:44 的 40px，和我的 h2（36px）
   只差 1.11 倍。統一到頁面標題那一階；橫幅的 .header1 仍是 52px。 */
h1 {
  font-size: var(--text-title);
  line-height: var(--leading-tight);
  /* rubic.css:41 給所有 h1 設 `position: absolute`。橫幅的標題不需要它 ——
     .banner 本身是 flex + align-items:center，居中由 flex 處理；而絕對定位
     的 h1 不貢獻高度，配上第 11 節的 `height: auto` 會讓橫幅塌成只有內距的
     高度、團隊名被切掉。普通頁面的 h1（/login 的「本網站免責聲明」）更是
     直接壓在下方文字上。全部回到文件流。 */
  position: static;
}

/* 導覽列品牌字原本 30px（rubic.css:242）。那是導覽列 112px 高、六個連結
   在 1440px 下斷成兩行的原因。降到子區段那一階。 */
.page-navbar .navbar-brand {
  font-size: var(--text-group);
}

.page-navbar .brand-name,
.page-navbar .brand-tagline {
  font-size: inherit;
}

/* ------------------------------------------------------------------
 * 10. 橫幅上的文字維持白色
 *
 * 上面第 4 節的 `h1..h6 { color: var(--ink) }` 會蓋掉 rubic.css:45 的
 * `h1 { color: #fff }` —— 橫幅標題變成深灰壓在照片上，實質看不見。
 * `.header2` / `.header3` 是 <p>，也被 body 那組的 --ink-2 影響。
 *
 * 這個回歸是截圖才看見的：對比量測腳本遇到漸層或圖片背景會跳過，所以量不到。
 * 用容器層級的 color + 後代 inherit，一次覆蓋標題與段落。
 * ------------------------------------------------------------------ */
.banner,
.banner_col {
  color: #fff;
  /* rubic.css:69 給固定 `height: 300px`。字級收斂後文字只佔中間三分之一，
     剩下都是空白 —— hero 的尺寸要配合它裝的東西。 */
  height: auto;
  min-height: 0;
  padding: var(--s-12) var(--s-6);
}

.banner *,
.banner_col * {
  color: inherit;
}

/* ------------------------------------------------------------------
 * 11. 最後一輪：橫幅高度、表頭語意、輸入框邊框
 * ------------------------------------------------------------------ */

/* 任務表頭原本用 --state-ok 當底色（沿用原本 Material 綠的位置）。
   但表頭不是「成功」—— 那是語意錯置，而且五格全寬的綠色太重。
   改用導覽列同一個深色，順帶讓頁面上下呼應。 */
/* 注意：tool1/tool2 樣板自己的 <style> 區塊也宣告了 table.task-table th，
   而頁面層的 style 排在外部樣式表之後會贏 —— 所以那兩處也一起改了。 */
/* 輸入框的 #ccc 是冷灰，在暖色底上會顯得發青。 */
input,
textarea,
select {
  /* --line 在白底只有 1.43:1，看不出是控件邊界（UI 元件門檻 3:1）。
     圓角收到 2px：控件需要一點圓角才讀得出可輸入，但 4px 以上就開始像
     那種到處圓角的介面。 */
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background-color: var(--surface);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--brand-cta);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------
 * 12. 使用者回報的四件事
 * ------------------------------------------------------------------ */

/* (a) /login 的「本網站免責聲明」壓在條款內容上。
   rubic.css:41 給 `h1` 設了 `position: absolute` —— 那是為橫幅設計的（標題要
   浮在 ::before 的照片上），但套到普通頁面標題就脫離文件流、疊在下方文字上。
   只有橫幅裡的 h1 需要絕對定位。 */
/* (b) /results 的「檔案介紹」以下內容跑出容器（blockquote 是 body 的直接
   子元素，橫跨整個視窗寬）。原本只列舉了 ol / ul，改成排除全寬元素的寫法，
   之後新增的區塊也會自動對齊。 */
body > *:not(nav):not(footer):not(script):not(style):not(br) {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}

/* 圖框。出圖的圖紙在外緣有雙線框 —— 這個工具的輸出就是加了標註的 DWG，
   所以「一張出好的圖」是它最貼題的裝飾。

   外框是 .task-panel / .testbox 等各自的 border，這裡只補內側那一條：
   inset 0 0 0 5px 用紙面色填掉 5px（看不見），第二層在 5-6px 畫 1px 的
   --line。所以不動任何版面尺寸（現有內距 20-24px 遠大於 6px），內容不會被
   壓到。

   只套最外層的紙面，不套 .form-section —— 框裡再套框會太吵。 */
.task-panel,
.testbox,
body > blockquote,
body > ol,
body > ul {
  box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--line);
}

/* 說明與參考內容（注意事項、檔案介紹）也放在紙面上。
   它們原本直接坐在底色上 —— tool1 的 blockquote 一個人就有 2585px，佔了整頁
   一半以上，所以「背景單調」有一半是它造成的。底色加深之後，「上面是白紙、
   下面是桌面」讀起來會像兩份不相干的東西。
   給它們跟任務面板、表單同一個框，整頁才是一疊紙。 */
body > blockquote,
body > ol,
body > ul {
  padding: var(--s-6) var(--gutter);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
}

body > blockquote {
  color: var(--ink-2);
}

/* (c) 首頁的內容過小。
   首頁沒有表單也沒有資料 —— 那兩份清單就是這一頁的全部內容，屬於「閱讀」
   而不是「操作」的介面，所以用比工具頁大一階的尺寸。編號原本是打在
   <h3> 的文字裡（語意上不是標題，也讓整頁都是標題重量），改成真的 <ol>。 */
/* .testbox 是 `display: flex`（rubic.css:50）。首頁原本把內容包在一個沒有
   任何欄位的 <form> 裡，那個 <form> 就是唯一的 flex item，所以裡面正常堆疊。
   移除那個無用的 <form> 之後，橫幅與兩份清單各自變成 flex item 而橫向排開
   —— 文字被壓成一個字一行。首頁的內容是普通文件流，用 block。 */
.home-intro {
  display: block;
  padding: var(--s-8);
}

.home-intro ol {
  margin: 0 0 var(--s-8);
  padding-left: var(--s-8);
}

.home-intro li {
  margin-bottom: var(--s-3);
  font-size: var(--text-group);
  line-height: var(--leading-loose);
  color: var(--ink);
}

.home-intro h2 {
  max-width: none;
  margin: var(--s-8) 0 var(--s-4);
}

/* (d) 數量計算缺乏底色：分頁內容是透明的，卡片浮在一片沒有層次的暖白上。
   給分頁區一個下沉的面，讓「分頁 + 表單」讀起來是同一塊。 */
/* 分頁內容與紙面共用同一個框，「分頁 + 表單」讀起來是一個被框起來的區域
   —— 這也是分頁元件慣常的畫法。 */
.tab-content {
  padding: var(--s-4);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0;
}

.tab-content .testbox {
  /* 分頁區已經是框起來的區域了，裡面的紙面不用再一層框，也不用外邊距 */
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
}

/* ------------------------------------------------------------------
 * 13. 表單本身不是一個「卡片」
 *
 * rubic.css:58-63 給每個 <form> 設了 `border-radius: 6px` 加
 * `box-shadow: 0 0 8px #cc7a00` —— 零位移的橘色光暈。站上每個表單都有這層，
 * 而外面的 .testbox 已經是紙面了，所以看起來是兩層框套在一起。
 *
 * 上一輪我清掉了任務面板那個螢光綠光暈，但這個在 rubic.css 裡，grep
 * theme.css 與樣板時沒有抓到。
 * ------------------------------------------------------------------ */
form {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* ------------------------------------------------------------------
 * 14. 文章撐滿容器寬度
 *
 * 這裡原本把段落、清單與條款收在 --measure（46em），理由是 17px 的字在
 * 1560px 下一行會有 90 個中文字、讀起來會跳行。
 *
 * 但那讓條款那頁變成一條窄欄、兩側大片空白 —— 使用者說「應該要擴展文字，
 * 現在只是置中兩側都還是空白的」。加寬的目的就是要用到那些空間，所以行長
 * 上限移除，文章撐滿容器。
 *
 * 代價講明：長行在跳到下一行時比較容易看錯行。如果之後覺得難讀，正確的做法
 * 是分欄（CSS columns）讓文字既撐滿寬度、每行又不會太長，而不是收回窄欄。
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * 15. 欄位寬度要暗示預期的內容
 *
 * --content 加寬到 1560px 之後，`專案名稱` 這種單行欄位變成 1445px 寬 ——
 * 一個短字串配一條橫跨整頁的框，看起來就不像在問一個短答案。
 *
 * 圖層欄不在此列：它們的寬度由第 16 節的 .field-grid 欄軌決定。
 * ------------------------------------------------------------------ */
input[type="text"],
input[type="email"] {
  max-width: 30em;
}

/* 一個數字不該配一條長框。 */
input[type="number"] {
  max-width: 8em;
}

input[type="file"] {
  max-width: 36em;
}

/* ------------------------------------------------------------------
 * 16. 表單分組與欄位並排
 *
 * 上一版用固定寬度的 inline-block（`width: calc(50% - 2rem)`）讓 .field
 * 兩個一列。標籤長度一致時看起來是對的，但標籤長度一旦不同，每個區塊的
 * 高度就不同 —— 下一列的起點跟著歪掉；而且最後一列只剩一個欄位時，
 * 右半邊是空的。這是用 inline-block 排欄的固有結果，不是調寬度能解決的。
 *
 * 改成 grid：欄數由容器寬度決定（auto-fit），同一列的欄位共用列高、
 * 欄寬均分。.field 本身退回單純的區塊。
 * ------------------------------------------------------------------ */
.field {
  /* grid 子項的預設 min-width 是 auto，長字串（圖層名稱、檔名）會把
     欄位撐得比它那一格還寬。 */
  min-width: 0;
  margin-bottom: var(--s-3);
}

.field-grid {
  display: grid;
  /* 全站同一組欄位線 —— 每個分組、每一列的欄位都落在同樣的位置，這才是
     「對齊」。18rem 放得下「選擇樓層參數檔案 (.xlsx)」這個長度的標籤而
     不換行；視窗窄到擺不下兩欄時自己變一欄。
     用 auto-fill 而不是 auto-fit：auto-fit 會把空的欄軌收成 0，於是
     「專案資訊」裡孤零零一個欄位就撐滿 1478px —— 一個短字串配一條橫跨
     整頁的框。auto-fill 保留空軌，那個欄位就只佔一格。 */
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--s-2) var(--s-6);
  /* 靠上對齊：同一列可能混一個 44px 的數字欄和一個 100px 的圖層欄
     （柱分頁的「其他設定」就是），靠下對齊會讓兩者的上緣錯開。
     前提是同一列的標籤高度一致 —— 所以標籤裡不放連結，見下方。 */
  align-items: start;
}

.field-grid > .field {
  margin-bottom: 0;
}

/* 控件撐滿自己那一格。格寬已經由 grid 收在 16-20rem 上下，
   不需要再各自設 max-width。 */
.field-grid .field input,
.field-grid .field select,
.field-grid .field textarea {
  width: 100%;
  max-width: 100%;
}

/* 例外：數字欄的內容長度跟格寬無關。「分隔格線數量」填的是 1 或 2。 */
.field-grid .field input[type="number"] {
  max-width: 8em;
}

/* ------------------------------------------------------------------
 * 17. 表單分組
 *
 * 原本的分組標題是「裸 <div> 包一個 <h4>」，tool2 甚至用
 * `<label><strong>以下選填</strong></label>` 當標題 —— 畫面上就只是一行字，
 * 看不出下面哪些欄位屬於它。tool1 更極端：結構平面圖的 6 組圖層欄因為
 * 顯示條件跟著勾選框變動，被平鋪在「結構平面圖」區段的外面，完全沒有標題。
 *
 * <fieldset> 是表單分組的原生元素，<legend> 坐在框線的缺口上，分組邊界
 * 自己就出來了 —— 不必再疊一層卡片，也不必自己畫標題底線。
 * ------------------------------------------------------------------ */
.form-section {
  /* reboot 沒給 fieldset min-width，長字串會撐破外層 grid。 */
  min-width: 0;
  margin: 0 0 var(--s-6);
  padding: var(--s-4) var(--s-6) var(--s-6);
  border: 1px solid var(--line-strong);
}

.form-section > legend {
  /* Bootstrap reboot 給 legend `width: 100%` —— 那會讓它橫跨整個寬度、
     把整條上框線都吃掉。要 shrink-wrap 才會是「坐在缺口上」。 */
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--s-3);
  font-size: var(--text-group);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--ink);
}

/* 分組內的說明文字（例如「平面圖用於計算數量」）。 */
.form-section > .form-section-note {
  margin: 0 0 var(--s-3);
  color: var(--ink-2);
  font-size: var(--text-meta);
}

/* 同一個分組裡兩個 grid 之間要有呼吸（檔案欄 / 圖層欄）。 */
.form-section > .field-grid + .field-grid {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* 可收合的分組。<details> 自己當外框、<summary> 當標題 —— 不再另外套一層
   <fieldset>，否則 legend 與 summary 會是兩個講同一件事的標題。
   箭頭與 44px 觸控高度由 responsive.css 的 .layer-fields 負責。 */
details.form-section {
  padding: 0;
}

details.form-section > summary {
  padding: var(--s-2) var(--s-6);
  font-size: var(--text-group);
  font-weight: 700;
  color: var(--ink);
}

/* 展開時標題與欄位之間要有一條界線，收起來時不要 —— 收起來的框裡只有標題，
   多一條線會看起來像空了一格。 */
details.form-section[open] > summary {
  border-bottom: 1px solid var(--line);
}

details.form-section > .field-grid {
  padding: var(--s-4) var(--s-6) var(--s-6);
}

/* 一組互斥選項（tool5 的梁/柱鋼筋檔案）。<fieldset> + <legend> 是它正確的
   結構 —— 原本是用 <strong> 當標題，radio 的 <label> 也沒有 for，點文字選不到
   選項。但這個 fieldset 在版面上扮演的是「一個欄位」，所以不要框線、不要內距，
   legend 就照欄位標籤的樣子。 */
.radio-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.radio-group > legend {
  width: auto;
  margin: 0 0 var(--s-1);
  padding: 0;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: var(--ink);
}

.radio-group-empty {
  margin: 0;
  color: var(--state-warn);
  font-size: var(--text-meta);
}

/* JS 依勾選狀態切換的欄位群。`display: contents` 讓群組本身不佔版面，
   裡面的欄位直接成為外層 grid 的項目 —— 否則每個群組會自己起一列，
   一列擺一兩個欄位、右邊空著，那正是原本的樣子。 */
.field-group {
  display: contents;
}

/* .is-hidden 排在 .field-group 之後，同特異度、後者勝 —— 所以隱藏的
   欄位群拿到的是 display: none，不是 contents。 */
.is-hidden {
  display: none;
}

/* 示意圖。原本是 `<div align="center">`（HTML4 就廢棄的屬性）加一個
   <br> 當間距，而且那個 <div> 被寫在 <p> 裡面 —— 瀏覽器遇到 <div> 就地
   把 <p> 關掉，間距因此不是原始碼看起來的那樣。 */
.figure {
  margin: var(--s-3) 0 var(--s-6);
  text-align: center;
}

/* ------------------------------------------------------------------
 * 18. 底色與版面順序
 *
 * 使用者：「tool1 是標題再來才是任務列表，和 tool2 tool5 概念相反」、
 * 「目前的背景有點單調看能不能調整」。
 *
 * **順序**：tool1 的橫幅原本獨立在 .testbox 外面、而且排在任務列表之前。
 * 改成放進 <form> 裡、欄位之前 —— 跟 tool2 / tool5 一致。不能只放進
 * .testbox：那個容器是 `display: flex`（rubic.css:50），橫幅會變成跟表單
 * 並排的 flex item（實測左半邊空著、表單被擠到右邊）。
 *
 * **底色**：從 #f4f6f8 加深到 #e6ebf0。原本跟純白差 4% 太少，紙跟桌面看
 * 起來是同一個平面。長文（注意事項、檔案介紹）也移到紙面上 —— tool1 的
 * blockquote 一個人就有 2585px，原本直接坐在底色上。
 *
 * **裝飾**：第一版是在底色鋪兩階的製圖格線。做出來實測之後放棄了，原因是
 * 可見度完全取決於視窗寬度 —— 底色只在內容兩側露出來，而 --content 是
 * min(94vw, 1560px)：
 *
 *     視窗 1920  兩側各露 180px  看得到 2.3 格
 *     視窗 1600  兩側各露  48px  看得到 0.6 格
 *     視窗 1400  兩側各露  42px  看得到 0.5 格
 *     視窗 1280  兩側各露  38px  看得到 0.5 格
 *
 * 也就是在 1920 的螢幕上是格線紙，在筆電上只剩幾條細線 —— 裝飾不該只在
 * 特定螢幕尺寸才存在。（設計檢查也把「用 hairline gradient 鋪固定像素格的
 * 裝飾性格線背景」列為生成式 UI 的常見特徵，並指出格線應保留給真正的畫布
 * 或量測介面；這一頁是表單，圖是在 AutoCAD 裡處理的。兩個理由指向同一邊。）
 *
 * 改成畫在紙面外緣的圖框雙線（見下方的 box-shadow）：裝飾在面板上，所以
 * 任何視窗寬度都看得到，而且「圖框」比「格線紙」更貼這個工具的輸出。
 *
 * **順手移除 tool1 的浮水印**（#sticky-banner-bg + static/js/banner.js）。
 * 它是 tool1 獨有的裝飾：一個固定定位、z-index -1、opacity 0.18 的橫幅副本，
 * 由 IntersectionObserver 在主橫幅捲出畫面時淡入。
 *
 * 拿掉的直接原因是底色加深之後它露出來了：它固定在畫面垂直中央、高 300px，
 * 而紙面是不透明的，所以只有「紙面結束到頁尾之間」那一段會看到它 ——
 * 實測紙面底 564、頁尾頂 580，中間 16px 變成一條淡黃色細條。在原本近乎純白
 * 的底色上看不出來，加深之後就很明顯。
 *
 * 也可以只把它的 opacity 再壓低，但它本來就是 tool1 獨有、aria-hidden 的
 * 純裝飾，內容還跟上方的橫幅重複 —— 而這一輪的要求正是「統一成 tool2 的
 * 形式」。移除同時解決兩件事。
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * 19. 加寬之後沒有跟著對齊的三件事
 * ------------------------------------------------------------------ */

/* (a) 導覽列用的是 Bootstrap 的 `.container`（max-width 1140px）——
   內容加寬到 1560px 之後，導覽列比下方的內容窄了 210px，左右都對不齊。
   /results 的下載清單也包在一個 .container 裡，所以又是另一個左邊界。
   統一用同一個量測。 */
.container {
  max-width: var(--content);
}

/* (b) .field 裡的標籤原本是 inline-block（Bootstrap reboot），所以短標籤
   時控件跟在旁邊、長標籤（如「Email(選填)，若有填寫會寄送一份結果至信箱」）
   時控件被推到下一行 —— 左右兩欄的標籤與輸入框高度就參差不齊。
   標籤一律在控件上方。 */
.field label {
  display: block;
  margin-bottom: var(--s-1);
  /* 一列四個欄位時，標籤要比內容重一點才掃得出「標籤 / 值」的分界。
     原本是靠樣板裡的 <strong> 加粗 —— 那是視覺加粗寫進了結構。 */
  font-weight: 600;
}

/* 「範例檔下載」這種輔助連結不放在欄位標題裡：它是連結，responsive.css
   給連結 44px 的觸控高度，於是那一格的標題區比同列其他格高 18px，控件跟著
   低一階 —— 那就是「左右沒有對齊」。tool2 已改放分組的說明行；tool5 還在
   欄位裡，至少給它自己一行，不要跟控件擠在一起。 */
.field > label + a {
  display: block;
  margin-bottom: var(--s-1);
}