/* 由 index.html 的 inline <style> 抽出。
 *
 * ⚠️ **不可放回 inline。** Traefik 的 CSP 是 style-src 'self' ——
 *    inline <style> 會被瀏覽器整塊拒絕,頁面變成沒有樣式的裸 HTML。
 *    實測:Firefox 主控台顯示
 *      「由於違反了下列指示:style-src 'self',未讓頁面中的行內樣式
 *        (style-src-elem)生效」
 *    而伺服器端一切正常、HTTP 200 —— 沒有任何線索指向 CSP。
 *
 * ⚠️ 修法是把樣式外部化,不是放寬 CSP。CSP 是憲章 N1 的第二道防線
 *    (第一道是 60-deploy-web.sh 的部署前掃描),為了省事而加
 *    'unsafe-inline' 等於把它關掉 —— 那道防線的整個作用就是
 *    「注入進來的 <style> / <script> 不會執行」。
 */

body { font-family: var(--font-platform); color: var(--ink-900); }

  .card { background: var(--surface-0); border: 1px solid var(--line-200);
          border-radius: var(--radius-md); padding: var(--space-5); }
  h1 { font-size: var(--fs-h3); margin: 0 0 var(--space-1); }
  .clause { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-400); }
  .note { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.55; }
  select, button { min-height: 40px; font: inherit; }
  select { padding: 0 var(--space-3); border: 1px solid var(--line-200);
           border-radius: var(--radius-sm); }
  .bar { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; }
  label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
          color: var(--ink-700); margin-bottom: var(--space-1); }

  /* 事故卡 */
  .inc { border: 1px solid var(--line-200); border-radius: var(--radius-md);
         padding: var(--space-4); margin-bottom: var(--space-3); cursor: pointer;
         background: var(--surface-0); }
  .inc.on { border-color: var(--teal-500); }
  .inc-head { display: flex; justify-content: space-between; gap: var(--space-3);
              align-items: start; flex-wrap: wrap; }
  .inc-no { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-500); }
  .inc-subj { font-weight: var(--fw-semibold); }
  .sev { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
         letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
  .sev-critical { background: var(--red-100);    color: var(--red-700); }
  .sev-major    { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .sev-minor    { background: var(--surface-1);  color: var(--ink-700); }

  /* 計數:違反與遲交分開 —— 兩者在月報上是不同的事 */
  .counts { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
  .cnt { font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--radius-sm);
         font-family: var(--font-mono); }
  .cnt-breached { background: var(--red-100);    color: var(--red-700); }
  .cnt-late     { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .cnt-risk     { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .cnt-none     { background: var(--teal-100);   color: var(--teal-700); }

  /* 義務表 */
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  th, td { text-align: left; padding: var(--space-2) var(--space-3);
           border-bottom: 1px solid var(--line-200); vertical-align: top; }
  th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
       color: var(--ink-500); font-weight: var(--fw-semibold); }
  td.mono { font-family: var(--font-mono); }
  .st { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 2px 8px;
        border-radius: var(--radius-sm); white-space: nowrap; }
  .st-breached { background: var(--red-100);    color: var(--red-700); }
  .st-met_late { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .st-at_risk  { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .st-on_track { background: var(--surface-1);  color: var(--ink-700); }
  .st-met      { background: var(--teal-100);   color: var(--teal-700); }
  /* not_due 用虛線框 —— 它不是狀態,是「這項義務還不存在」 */
  .st-not_due  { background: transparent; color: var(--ink-400);
                 border: 1px dashed var(--line-300); }
  tr.not-due td { opacity: .6; }
  .cond { font-size: var(--fs-xs); color: var(--ink-500); }
  .err { color: var(--red-600); font-size: var(--fs-sm); }

/* 語言切換鈕。
   ⚠️ 與 driver / counter / notifications / supplier 的 .tab 規則相同 ——
      本專案目前是每個 app 各自帶一份(四個 app 已各自定義過)。
      這裡跟隨既有慣例而不改成共用,是為了不讓四個現有定義變成
      「覆寫共用規則」的關係 —— 那會讓改共用樣式時的影響範圍變得不明顯。
      去重是可以做的,但要一次把五處一起處理。
   ⚠️ .tabs 不設 flex:1 —— helpdesk 的語言鈕在 .bar 裡與「Now (HKT)」
      並排,撐滿寬度會把那個下拉推掉。driver 是整列獨占,情況不同。 */
.tabs { display: flex; gap: var(--space-2); }
.tab { padding: 6px 12px; border-radius: var(--radius-lg); cursor: pointer;
       border: 1px solid var(--line-200); background: var(--surface-0);
       font-size: var(--fs-sm); min-height: 34px; color: var(--ink-900); }
.tab.on { background: var(--teal-500); color: var(--on-teal); border-color: var(--teal-500); }

/* ⚠️ **版面由 shared/shell.css 負責,本檔只管元件。**
   這裡原本有:
     body { … padding: var(--space-6) }
     main { max-width: NNrem; margin: 0 auto; display: grid }
   那是**單畫面時代**的版面 —— 當時整個 app 只有一張卡片置中。
   改成多畫面外殼之後,外殼用 `<main class="sh-main">`,而 `main { }`
   這個元素選擇器照樣命中它:側欄在 x=260 結束,主區卻從 x=547 開始,
   中間空出 287px((1276−702)/2,也就是被置中了)。
   症狀是「版面看起來不一樣」,而不是任何一條規則報錯。
   新增樣式時不要再用 body / main / aside / header / nav 這類元素選擇器。 */