/* 由 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> 不會執行」。
 */

/* 手持裝置:單欄、大字、44px 觸控目標。關員戴手套在倉庫現場操作。 */
  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-4); }
  h1 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
  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; width: 100%; box-sizing: border-box; }
  input, select { padding: 0 var(--space-3); border: 1px solid var(--line-200);
                  border-radius: var(--radius-sm); }
  input { font-family: var(--font-mono); }
  button { padding: 0 var(--space-4); 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: 40px; }
  .presets { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

  /* ─────────────────────────────────────────────────────
     ⚠️ 憲章 §0.2 / verdict.css:兩軸使用**不同的視覺語言**。
       軸一 真偽   —— 實心底色 (--genuine / --counterfeit / --uncertain)
       軸二 生效   —— 左粗邊框 + 白底,絕不共用軸一的底色
     兩軸若共用同一種視覺語言,關員會把它們讀成同一件事。
     ───────────────────────────────────────────────────── */
  .axis { border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
  .axis .lbl { font-size: var(--fs-xs); text-transform: uppercase;
               letter-spacing: .08em; opacity: .8; margin-bottom: var(--space-1); }
  .axis .val { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.15; }

  /* 軸一:實心 */
  /* ⚠️ 文字色與判定色成對(tokens/verdict.css)—— 綠與橘是亮色,
     白字只有 2.78:1 / 2.32:1。底色不動,兩軸語意靠底色承載。 */
  .ax1.genuine     { background: var(--genuine);     color: var(--on-genuine); }
  .ax1.not_genuine { background: var(--counterfeit); color: var(--on-counterfeit); }
  .ax1.uncertain   { background: var(--uncertain);   color: var(--on-uncertain); }

  /* 軸二:白底 + 左粗邊,視覺語言與軸一完全不同 */
  .ax2 { background: var(--surface-0); border: 1px solid var(--line-200); border-left-width: 8px; }
  .ax2.validated     { border-left-color: var(--validated-border); }
  .ax2.not_validated { border-left-color: var(--unvalidated-border); }
  .ax2.deactivated   { border-left-color: var(--ink-500); }
  /* not_applicable:非真品時沒有生效狀態可言 —— 整格淡化,
     視覺上表示「這一軸此刻不成立」,而非另一種狀態。 */
  .ax2.not_applicable { border-left-color: var(--line-300); opacity: .55; }
  /* ⚠️ unconfirmed 用斜紋 —— 一眼可見「這不是一個查得到的答案」,
     而不是另一種狀態。灰階,不借用軸一任何顏色。 */
  .ax2.unconfirmed {
    border-left-color: var(--ink-700);
    background: repeating-linear-gradient(135deg,
      var(--surface-0) 0 10px, var(--surface-1) 10px 20px);
  }
  .ax2 .val { color: var(--ink-900); }
  .ax2.unconfirmed .val { color: var(--ink-700); }

  /* 售賣合法性 —— 三值 */
  .sale { padding: var(--space-4); border-radius: var(--radius-md);
          font-weight: var(--fw-semibold); font-size: var(--fs-h3); }
  .sale.yes     { background: var(--teal-100); color: var(--teal-700); }
  .sale.no      { background: var(--red-100);  color: var(--red-700); }
  /* ⚠️ 「無法判定」不是警告色也不是成功色 —— 它是資訊缺口,不是判定。 */
  .sale.unknown { background: var(--surface-1); color: var(--ink-700);
                  border: 2px dashed var(--line-300); }

  .notice { font-size: var(--fs-sm); color: var(--ink-700); background: var(--orange-100);
            padding: var(--space-3); border-radius: var(--radius-sm); margin-top: var(--space-3); }
  .meta { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono);
          margin-top: var(--space-3); }
  .screen { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-400); }
  .err { color: var(--red-600); font-size: var(--fs-sm); }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

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