/* 由 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: var(--text-heading); margin: 0 0 var(--space-4); }
  .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); }
  input, select, button { min-height: 36px; font: inherit; }
  input, select { padding: 0 var(--space-3); border: 1px solid var(--line-200);
                  border-radius: var(--radius-sm); font-family: var(--font-mono); }
  button { padding: 0 var(--space-5); background: var(--teal-500); color: var(--on-teal);
           border: none; border-radius: var(--radius-lg); font-weight: var(--fw-semibold); cursor: pointer; }
  .preset { background: var(--surface-1); color: var(--ink-700);
            border: 1px solid var(--line-200); font-size: var(--fs-sm); min-height: 36px; }

  /* 判定橫幅。⚠️ 不使用 --genuine/--counterfeit —— 那四個保留給認證判定(憲章 §10)。 */
  .verdict { padding: var(--space-4); border-radius: var(--radius-md);
             margin-bottom: var(--space-4); display: grid; gap: var(--space-1); }
  .verdict h2 { margin: 0; font-size: var(--fs-h3); }
  .verified    { background: var(--teal-100);   color: var(--teal-700); }
  .gap         { background: var(--orange-100); color: var(--orange-700, #7a4a00); }
  .mismatch    { background: var(--red-100);    color: var(--red-700); }
  .out_of_order{ background: var(--orange-100); color: var(--orange-700, #7a4a00); }

  /* 帳本完整性是**獨立的一層** —— 與本批判定分開呈現 */
  .integrity { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
               font-size: var(--fs-sm); margin-bottom: var(--space-4);
               border-left: 4px solid var(--line-300); background: var(--surface-1); }
  .integrity.bad { border-left-color: var(--red-500); background: var(--red-100); color: var(--red-700); }
  .integrity.here { font-weight: var(--fw-semibold); }

  /* 環節時間軸 */
  ol.chain { list-style: none; margin: 0; padding: 0; }
  ol.chain li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3);
                position: relative; padding-bottom: var(--space-5); }
  ol.chain li:last-child { padding-bottom: 0; }
  .node { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
          font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #fff; z-index: 1; }
  .node.on  { background: var(--teal-600); }
  .node.off { background: var(--surface-0); color: var(--ink-700);
              border: 2px dashed var(--line-300); }
  /* 缺失的環節用實線紅框 —— 與「尚未發生」的虛線灰框視覺區隔 */
  .node.missing { background: var(--surface-0); color: var(--red-600);
                  border: 2px solid var(--red-500); }
  .spine { position: absolute; left: 13px; top: 26px; bottom: -4px; width: 2px;
           background: var(--line-200); }
  li:last-child .spine { display: none; }
  .step-name { font-weight: var(--fw-semibold); }
  .step-meta { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
  .step-missing { font-size: var(--fs-sm); color: var(--red-600); font-weight: var(--fw-semibold); }
  .step-notyet  { font-size: var(--fs-sm); color: var(--ink-400); }
  dl.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4);
          margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
  dl.kv dt { color: var(--ink-700); }
  dl.kv dd { margin: 0; font-family: var(--font-mono); }
  .err { color: var(--red-600); font-size: var(--fs-sm); }
  .note { color: var(--ink-500); font-size: var(--fs-sm); }

/* ⚠️ **版面由 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 這類元素選擇器。 */