/* 登記申請頁。
   ⚠️ 顏色取自 web/design-system/tokens —— 這一頁不載入 shell.css
   (它需要登入後的 shell),所以樣式自己帶一份最小的。 */
/* ⚠️ **`font:` 簡寫裡不可以用 inherit 當字型名稱。** CSS 全域關鍵字
   (inherit / initial / unset)只能單獨出現 —— `font: 600 14px/1.4 inherit`
   是無效宣告,瀏覽器整條丟掉,而且不報錯。
   在 <span>、<p> 上看不出來(它們本來就繼承字型);在 <button> 上是
   災難 —— 表單控制項不繼承字型,落回 UA 的 Arial,而 Arial 沒有漢字,
   於是「送出申請」與語言鍵的「繁」「简」在畫面上**整個消失**,
   只剩一塊青色方塊。這一頁的送出鍵就是這樣上線的。
   要繼承就寫 `font: inherit;` 再單獨覆寫 size / weight / line-height ——
   而且要用繼承,不要寫死 var(--font-platform):簡體的字型堆疊是靠
   `[data-l="sc"] .r-wrap` 覆寫上層來的,寫死會把它擋掉。 */
body { margin: 0; background: var(--surface-1); color: var(--ink-900);
       font: 15px/1.6 var(--font-platform, system-ui, sans-serif); }
.r-wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }
.r-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
          padding-bottom: 16px; border-bottom: 1px solid var(--line-200); }
.r-brand { font: 700 20px/1.2 var(--font-app, inherit); }
.r-sub { display: block; font: inherit; font-size: 12px; line-height: 1.4;
         font-weight: 400; color: var(--ink-700); }
/* ⚠️ 開發環境必須看得出是開發環境 —— 有人會以為自己在正式系統上送出真的申請。 */
.r-badge { margin: 0; font: inherit; font-size: 11px; line-height: 1.4;
           font-weight: 600; letter-spacing: .04em;
           color: var(--orange-500); }
h1 { font-size: 26px; margin: 24px 0 8px; }
.r-lead { color: var(--ink-700); margin: 0 0 20px; }
.r-note { background: #fff; border-left: 3px solid var(--teal-500);
          border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 16px 0;
          font-size: 13.5px; }
.r-form fieldset { border: 1px solid var(--line-200); border-radius: 10px;
                   padding: 16px 18px 18px; margin: 18px 0; background: #fff; }
legend { font-weight: 700; padding: 0 6px; }
.r-form label { display: block; margin: 12px 0; font-size: 13px; font-weight: 600; }

/* ⚠️ **`hidden` 必須壓過我們自己的 display。**
   瀏覽器的 `[hidden]{display:none}` 是**使用者代理樣式**,而任何作者樣式
   的優先度都在它之上 —— `.r-form label{display:block}` 與 `#principalRows{display:grid}`
   因此把 hidden 的區塊照樣顯示出來。
   症狀:類別選「本地製造商」,而「請說明資格」與「被代理公司」兩個
   只屬於別的類別的區塊一直在畫面上。

   ⚠️ 而且**看不出來** —— `el.hidden` 這個屬性仍然是 true。用它判斷的
   檢查會回報「已隱藏」,而畫面上一直看得到。要驗就驗
   `getComputedStyle(el).display`,不要驗屬性。 */
[hidden] { display: none !important; }
.r-form input, .r-form select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
  padding: 9px 11px; font: inherit; font-weight: 400;
  border: 1px solid var(--line-200); border-radius: 7px; background: #fff; }
.r-form input:focus, .r-form select:focus {
  outline: 2px solid var(--teal-600); outline-offset: 0; border-color: var(--teal-600); }
.req { color: var(--red-600); margin-left: 3px; }
.r-hint { font-size: 12.5px; color: var(--ink-700); margin: 4px 0 0; }
.r-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* ⚠️ 與系統內部同色:teal-500 + 深色字。白字對 #12B5A5 只有 2.57:1。 */
.r-submit { border: 0; border-radius: 8px; padding: 10px 20px; min-height: 40px;
            background: var(--teal-500); color: var(--on-teal);
            font: inherit; font-size: 14px; line-height: 1.4; font-weight: 600;
            cursor: pointer; }
.r-submit:disabled { background: var(--line-300); color: var(--ink-500); cursor: not-allowed; }
.r-msg { font-size: 13px; color: var(--ink-700); }
.r-msg.bad { color: var(--red-700); font-weight: 600; }
.r-done { background: #fff; border: 1px solid var(--teal-500);
          border-radius: 10px; padding: 20px 22px; margin: 18px 0; }
.r-appno { font-family: var(--font-mono, monospace); font-size: 18px; }
.r-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line-200);
          font-size: 12px; color: var(--ink-700); }

/* ── 三語(憲章 N9)───────────────────────────────────────
   ⚠️ **三種語言同時輸出,用 CSS 藏其餘兩種** —— 與十份原型同一套。
      不用 JS 翻譯的理由:這一頁必須在應用層掛掉時仍然讀得懂
      (靜態優先,與候位室同一個要求)。用 JS 翻的話,腳本載不到
      就整頁沒有文字,而使用者看到的是空白。
   ⚠️ 預設顯示繁體 —— 未設 data-l 時(JS 還沒跑)不可以三種全部顯示。 */
[data-t] { display: none; }
[data-t="tc"] { display: inline; }
[data-l="en"] [data-t] { display: none; }
[data-l="en"] [data-t="en"] { display: inline; }
[data-l="sc"] [data-t] { display: none; }
[data-l="sc"] [data-t="sc"] { display: inline; }
[data-l="tc"] [data-t] { display: none; }
[data-l="tc"] [data-t="tc"] { display: inline; }

/* ⚠️ 每種語言各自的字型堆疊。簡體把 SC 排前面 —— 兩者碼位重疊
      而字形不同,順序決定看到的是哪一套字形。 */
[data-l="sc"] body, [data-l="sc"] .r-wrap {
  font-family: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif; }

.r-lang { margin-left: auto; display: flex; gap: 4px; }
.r-lang button {
  border: 1px solid var(--line-200); background: #fff; color: var(--ink-700);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.4; font-weight: 600; }
.r-lang button[aria-pressed="true"] {
  background: var(--teal-500); color: var(--on-teal); border-color: var(--teal-500); }

/* 每一類必要文件一個區塊。 */
.r-doc { border: 1px solid var(--line-200); border-radius: 8px;
         padding: 10px 12px 12px; margin: 10px 0; background: var(--surface-1); }
.r-doc-h { font-weight: 700; font-size: 13px; margin-bottom: 2px; }

/* ── 可新增的區塊(牌照、授權代表)與勾選 ────────────────
   ⚠️ 勾選列與輸入列的排法不同:輸入列是「標籤在上、欄位在下」,
      而勾選是「方框在左、文字在右」。沿用 .r-form label 的直排會讓
      核取方塊變成整行寬的一條線,使用者不知道要點哪裡。 */
/* ⚠️ 選擇器要**比 `.r-form label` 強**。`.r-form label{display:block}` 的
   優先度是 (0,0,1,1),而單獨的 `.r-check` 只有 (0,0,1,0) —— 於是勾選列
   變回 block,核取方塊跑到文字上面自成一行。
   症狀在窄螢幕上不明顯(本來就一行一個),寬螢幕才看得出來。 */
.r-form .r-check, .r-done .r-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400; margin: 6px 0;
}
.r-form .r-check input[type="checkbox"] {
  width: auto; margin: 2px 0 0; flex: none;
}
.r-roles { margin: 8px 0 4px; }

.r-add, .r-remove {
  font: inherit; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-300); background: var(--surface-1);
  color: var(--ink-900); padding: 8px 12px;
}
/* ⚠️ 按鈕是**內容寬**,不是整列寬。在 grid 裡不寫的話 align/justify 的
   預設是 stretch,一顆「移除」會拉成整張卡片那麼寬 —— 看起來像一條
   警告橫幅,而不是一顆次要按鈕。 */
.r-add, .r-remove { justify-self: start; }
.r-add { margin-top: 8px; }
.r-add:hover, .r-remove:hover { background: var(--surface-2); }
/* ⚠️ 移除鍵要看得出是次要動作,但**不要做成只有圖示** ——
      一個只有 ✕ 的按鈕在螢幕閱讀器上讀不出移除的是哪一項。 */
.r-remove {
  margin-top: 8px; font-size: 13px; color: var(--red-600);
  border-color: var(--red-200);
}

/* ── 查申請進度 ────────────────────────────────────────── */
.r-status {
  border: 1px solid var(--line-200); border-radius: 8px;
  padding: 12px 16px; margin: 20px 0;
}
.r-status summary { font-weight: 700; cursor: pointer; }
.r-status .r-form { margin-top: 12px; }
/* ⚠️ 欠缺項用清單而不是一段文字 —— 申請人要逐條修正,而修正之後
      要看得出哪一條已經處理。一段文字做不到這件事。 */
.r-defs { margin: 8px 0 0; padding-left: 20px; }
.r-defs li { margin: 4px 0; font-size: 14px; color: var(--red-700); }

/* ── 確認頁 ────────────────────────────────────────────── */
.r-appno-lead { margin: 16px 0 6px; font-weight: 600; }
.r-appno-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.r-done h3 { font-size: 15px; margin: 20px 0 6px; }
/* ⚠️ 進度是一條**有序**的清單,不是三段文字。申請人要看得出
      「現在在哪一步」—— 而 .on 那一項就是現在。 */
.r-steps, .r-next { margin: 0; padding-left: 22px; }
.r-steps li, .r-next li { margin: 6px 0; color: var(--ink-700); }
.r-steps li.on { color: var(--ink-900); font-weight: 700; }

/* ⚠️ 列印時只留確認那一塊。整頁列印會印出一份空表單與語言按鈕,
      而申請人要的是那張「我交了什麼、編號是多少」的紙。 */
@media print {
  .r-lang, .r-badge, .r-form, .r-status, .r-add, .r-remove { display: none !important; }
  body { background: #fff; }
  .r-done { border: none; padding: 0; }
}


/* ── 螢幕夠寬時欄位兩兩並排 ──────────────────────────────
   ⚠️ **斷點在 720px,不是「桌機/手機」。** 判準是這一欄放不放得下一個
      可用的輸入框 —— 兩欄各約 380px 是欄位的下限,再窄就會出現
      折行的標籤配上塞不下的輸入框,而那比單欄難用。

   ⚠️ 用 grid 而不是在 HTML 裡包 .grid2:牌照列與授權代表列是 JS
      **動態產生**的,包在 HTML 裡的話那兩處要另外再寫一次配對邏輯 ——
      而兩處配對規則遲早會不一致。

   ⚠️ 預設**單欄**,寬螢幕才升到兩欄。反過來寫(預設兩欄、窄螢幕降級)
      的話,不支援 grid 的環境會拿到兩欄擠在一起的版面;
      而這一頁必須在最差的情況下仍然讀得懂。 */
@media (min-width: 720px) {
  .r-form fieldset, .r-doc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
  }
  /* legend 不是格線項目,但要橫跨整列才不會把第一欄擠掉。 */
  .r-form legend { grid-column: 1 / -1; }

  /* ⚠️ 這些一律整列:說明、勾選、卡片容器、按鈕。
        說明文字擠在半欄裡會變成一條又高又窄的長條,而它要被讀完。 */
  .r-form fieldset > .r-hint,
  .r-form fieldset > p,
  .r-form fieldset > .r-check,
  .r-form fieldset > .r-add,
  .r-form fieldset > #docs,
  .r-form fieldset > #lics,
  .r-form fieldset > #reps,
  .r-form fieldset > #deliveryRows,
  .r-form fieldset > #principalRows,
  .r-doc > .r-doc-h,
  .r-doc > .r-hint,
  .r-doc > .r-roles,
  .r-doc > .r-check,
  .r-doc > .r-remove { grid-column: 1 / -1; }

  /* ⚠️ 地址、說明這一類**內容本身就長**的欄位橫跨整列 ——
        半欄的地址欄看得到的字比打進去的少,使用者會反覆左右捲。 */
  .r-form .r-wide { grid-column: 1 / -1; }

  /* 條件顯示的兩個區塊本身也是兩欄。 */
  #principalRows, #deliveryRows {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    align-items: start;
  }
  #principalRows > label:first-child, #deliveryRows > label:first-child {
    grid-column: 1 / -1;
  }
  /* 角色核取方塊在寬螢幕橫排,不要一個一行佔掉半欄的高度。 */
  .r-roles > .r-check { display: inline-flex; margin-right: 18px; }
}