/* =====================================================================
   NS 共通デザインシステム（システム全体共通・唯一の基準）
   ---------------------------------------------------------------------
   基準: Apple Human Interface Guidelines (HIG)
         https://developer.apple.com/jp/design/human-interface-guidelines/

   方針:
     - 色・文字・余白・角丸・当たり判定は HIG のトークンに準拠する。
     - ライト / ダークの両外観に対応（既定はシステム設定に追従）。
     - 明瞭さ優先（Clarity）: 装飾より可読性。半透明ガラス調は使わず不透明面＋境界線。
     - 入力者は50代・老眼世代 → HIG の本文 17px を採用（従来 16px より大きい）。
       HIG の footnote/caption(13/12px) は本システムでは 14px を下限に引き上げる。
     - 当たり判定は HIG の最小 44×44pt を全ての操作要素に適用する。

   読み込み順: style.css → theme.css → modern.css → mobile.css
     style.css は旧ダーク専用シートだが、そのレガシー変数（--bg / --fg / --line 等）も
     ここで再定義しているため、旧ルールも自動的に外観追従になる。

   ★ 新規画面もこのトークン(CSS変数)とコンポーネント規約に必ず準拠すること。
      画面ごとに色・サイズを直書きしない。
   ===================================================================== */

/* =====================================================================
   1. HIG プリミティブ（ライト外観の値）
   ===================================================================== */
:root {
  color-scheme: light dark;

  /* ---- HIG システムカラー（Light） ---- */
  --hig-red:     #ff3b30;
  --hig-orange:  #ff9500;
  --hig-yellow:  #ffcc00;
  --hig-green:   #34c759;
  --hig-mint:    #00c7be;
  --hig-teal:    #30b0c7;
  --hig-cyan:    #32ade6;
  --hig-blue:    #007aff;
  --hig-indigo:  #5856d6;
  --hig-purple:  #af52de;
  --hig-pink:    #ff2d55;
  --hig-brown:   #a2845e;

  /* ---- 塗り用の濃色変種（Light） ----
     HIG のシステムカラーは Apple 自身が白文字を乗せているが、実測すると
     白文字とのコントラストは systemBlue 3.65:1 / systemOrange 2.06:1 しかなく、
     小さな文字では WCAG AA(4.5:1) に届かない（本システムは老眼配慮を最優先するため不可）。
     そこで方針を2つに分ける:
       ・赤/ピンク/青/藍/紫 … 白文字が自然なので「地を少し濃く」して 4.5:1 を確保する（*-fill）
       ・黄/橙/緑/ミント/ティール/シアン … HIG 本来のルール通り「黒文字」を乗せる
     識別のための色（どの課・どの種別か）は変えずに可読性だけ上げる。 */
  --hig-red-fill:    #ec0d00;
  --hig-pink-fill:   #ed002d;
  --hig-blue-fill:   #0068d6;
  --hig-purple-fill: #a945dc;
  --hig-indigo-fill: #5856d6;   /* 藍は元の色で 5.65:1 あるのでそのまま */

  /* ---- HIG グレー階調（Light） ---- */
  --hig-gray:    #8e8e93;
  --hig-gray2:   #aeaeb2;
  --hig-gray3:   #c7c7cc;
  --hig-gray4:   #d1d1d6;
  --hig-gray5:   #e5e5ea;
  --hig-gray6:   #f2f2f7;

  /* ---- 面（HIG Grouped Background / Light） ---- */
  --hig-bg:       #f2f2f7;   /* ページ地 = systemGroupedBackground */
  --hig-bg-elev:  #ffffff;   /* カード・パネル = secondarySystemGroupedBackground */
  --hig-bg-elev2: #f2f2f7;   /* 一段内側 = tertiarySystemGroupedBackground */
  --hig-bar-bg:   #f9f9f9;   /* ツールバー/ナビゲーションバー */

  /* ---- 文字（HIG Label Colors / Light） ---- */
  --hig-label:  #000000;
  /* ★ HIG 既定の secondaryLabel rgba(60,60,67,.60) は明るい地に対して 3.3〜3.4:1 しか無く
     WCAG AA(4.5:1) に届かない（Apple のトークンは AA を保証していない）。
     本システムは老眼配慮を最優先するので不透明度を上げて 5.3〜5.6:1 にする。 */
  --hig-label2: rgba(60,60,67,.78);   /* secondaryLabel（AA 準拠に補正） */
  --hig-label3: rgba(60,60,67,.55);   /* tertiaryLabel = プレースホルダ・装飾のみ */
  --hig-label4: rgba(60,60,67,.18);   /* quaternaryLabel = 区切り・無効 */
  --hig-on-accent: #ffffff;           /* 彩度の高い地に乗せる文字 */
  --hig-on-vivid:  #ffffff;
  --hig-on-light:  #000000;           /* 黄など明るい地に乗せる文字 */

  /* ---- 罫線（HIG Separator / Light） ---- */
  --hig-sep:        rgba(60,60,67,.29);
  --hig-sep-opaque: #c6c6c8;

  /* ---- 塗り（HIG Fill Colors / Light） ---- */
  --hig-fill:  rgba(120,120,128,.20);
  --hig-fill2: rgba(120,120,128,.16);
  --hig-fill3: rgba(120,120,128,.12);
  --hig-fill4: rgba(120,120,128,.08);

  /* ---- 入力欄 ---- */
  --hig-field-bg: #ffffff;
  --hig-field-fg: var(--hig-label);
  --hig-field-bd: var(--hig-sep-opaque);
  --hig-field-ro: var(--hig-gray6);

  /* ---- 影（HIG は控えめ・境界線と併用） ---- */
  --hig-shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
  --hig-shadow-2: 0 2px 6px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);

  /* =========== 以下は外観に依存しない（ライト/ダーク共通） =========== */

  /* ---- アクセント（HIG accentColor） ----
     --hig-accent      … リンク・アイコン等「文字色として使う青」
     --hig-accent-fill … 白文字を乗せる「塗りとして使う青」
     ライトでは同じ値、ダークでは地が黒なので accent は明るい systemBlue を使える。 */
  --hig-accent:      var(--hig-blue-fill);
  --hig-accent-fill: var(--hig-blue-fill);

  /* ---- タイポグラフィ（HIG Text Styles / px 換算） ----
     HIG の footnote 13 / caption 12 は本システムでは 14px 下限に引き上げ。 */
  --hig-fs-large-title: 34px;
  --hig-fs-title1:      28px;
  --hig-fs-title2:      22px;
  --hig-fs-title3:      20px;
  --hig-fs-headline:    17px;   /* semibold */
  --hig-fs-body:        17px;
  --hig-fs-callout:     16px;
  --hig-fs-subhead:     15px;
  --hig-fs-footnote:    14px;
  --hig-fs-caption:     14px;
  --hig-lh-body:        1.5;
  --hig-lh-tight:       1.3;

  --hig-fw-regular:  400;
  --hig-fw-medium:   500;
  --hig-fw-semibold: 600;
  --hig-fw-bold:     700;

  /* ---- 余白（8pt グリッド・4pt 半ステップ） ---- */
  --hig-sp-1:  4px;
  --hig-sp-2:  8px;
  --hig-sp-3: 12px;
  --hig-sp-4: 16px;
  --hig-sp-5: 20px;
  --hig-sp-6: 24px;
  --hig-sp-7: 32px;
  --hig-sp-8: 40px;

  /* ---- 角丸（HIG continuous corners 相当） ---- */
  --hig-r-sm:   6px;
  --hig-r-md:  10px;   /* ボタン・入力欄の標準 */
  --hig-r-lg:  14px;   /* カード */
  --hig-r-xl:  20px;   /* 大タイル */
  --hig-r-cap: 999px;  /* カプセル */

  /* ---- 当たり判定（HIG 最小 44×44pt） ---- */
  --hig-hit:      44px;
  --hig-hit-lg:   52px;
  --hig-hit-sm:   36px;   /* 密な表の行内アイコン（HIG 下限未満は表内のみ許容） */

  /* ---- フォント（SF を先頭に、日本語は Hiragino Sans） ---- */
  --hig-font: -apple-system, BlinkMacSystemFont, "SF Pro JP", "SF Pro Text",
              "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
              "Noto Sans JP", Meiryo, "MS PGothic", "IPAexGothic", system-ui, sans-serif;
  --hig-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- モーション（HIG: 短く・自然に） ---- */
  --hig-dur:  .2s;
  --hig-ease: cubic-bezier(.25,.1,.25,1);

  /* =====================================================================
     2. 業務上の意味を持つ色（FM 5色 → HIG システムカラーへ再マップ）
     ---------------------------------------------------------------------
     FileMaker 実機の5色ボタンが持っていた「色＝用途」の意味は維持し、
     色の値だけを HIG システムカラーに置き換える（彩度・コントラストを HIG 基準に）。
       生産 / 商品      赤      → systemRed
       販売 / 仕入      マゼンタ → systemPink
       物流 / EDI       黄      → systemYellow（黒文字）
       経理 / 分析      青      → systemBlue
       マスター / 課別   シアン   → systemCyan

     ★ これらは「地」として使うので、白文字を乗せる赤/マゼンタ/青は濃色変種（*-fill）を
       割り当てる。黄・シアンは HIG 本来のルール通り明るいまま＋黒文字にする。
     ===================================================================== */
  --ns-fm-red:     var(--hig-red-fill);
  --ns-fm-magenta: var(--hig-pink-fill);
  --ns-fm-yellow:  var(--hig-yellow);
  --ns-fm-blue:    var(--hig-blue-fill);
  --ns-fm-cyan:    var(--hig-cyan);

  /* 各色に乗せる文字色（実測 4.5:1 以上になる組み合わせだけを使う） */
  --ns-on-red:     var(--hig-on-accent);   /* 白 on #ec0d00 = 4.54 */
  --ns-on-magenta: var(--hig-on-accent);   /* 白 on #ed002d = 4.53 */
  --ns-on-yellow:  var(--hig-on-light);    /* 黒 on #ffcc00 = 13.9 */
  --ns-on-blue:    var(--hig-on-accent);   /* 白 on #0071ed = 4.58 */
  --ns-on-cyan:    var(--hig-on-light);    /* 黒 on #32ade6 = 8.3  */
  --ns-on-light:   var(--hig-on-light);

  /* 区分タイルの割り当て（新しい色を作らずこの5色を使い回す） */
  --ns-master:     var(--ns-fm-cyan);
  --ns-relogin:    var(--ns-fm-cyan);
  --ns-cyan:       var(--ns-fm-cyan);
  --ns-production: var(--ns-fm-red);
  --ns-product:    var(--ns-fm-red);
  --ns-procure:    var(--ns-fm-magenta);
  --ns-sales:      var(--ns-fm-magenta);
  --ns-edi:        var(--ns-fm-yellow);
  --ns-logistics:  var(--ns-fm-yellow);
  --ns-analysis:   var(--ns-fm-blue);
  --ns-finance:    var(--ns-fm-blue);

  /* =====================================================================
     3. 従来の --ns-* トークン（互換エイリアス）
     全391画面が参照しているため名前は変えず、実体を HIG トークンに差し替える。
     ===================================================================== */
  --ns-bg:          var(--hig-bg);
  --ns-bg-2:        var(--hig-bg-elev2);
  --ns-panel:       var(--hig-bg-elev);
  --ns-panel-bd:    var(--hig-sep);
  --ns-text:        var(--hig-label);
  --ns-text-dim:    var(--hig-label2);
  --ns-title:       var(--hig-label);      /* HIG: 見出しは label 色（緑の着色をやめる） */
  --ns-border:      var(--hig-sep-opaque);
  --ns-border-lite: var(--hig-sep);
  --ns-focus:       var(--hig-accent);

  --ns-header-bg:   var(--hig-bar-bg);
  --ns-header-fg:   var(--hig-label);
  --ns-header-bd:   var(--hig-sep);

  --ns-label-bg:    var(--hig-bg-elev2);   /* フォームのラベル列 */
  --ns-label-fg:    var(--hig-label2);
  --ns-head-bg:     var(--hig-bg-elev2);   /* 見出しセル */
  --ns-head-fg:     var(--hig-label2);
  --ns-field-bg:    var(--hig-field-bg);
  --ns-field-fg:    var(--hig-field-fg);
  --ns-field-ro:    var(--hig-field-ro);
  --ns-placeholder: var(--hig-label3);

  /* 帳票そっくりの入力画面（異常報告書など）で「ここが入力欄」を示す地色。
     FileMaker がベージュで塗り分けている欄に対応する。 */
  --ns-hl-field:    #fdf7c3;

  --ns-orange:      var(--hig-orange);     /* 新規（黒文字で使う） */
  --ns-teal:        var(--hig-teal);       /* 主要操作（黒文字で使う） */
  --ns-danger:      var(--hig-red-fill);   /* 削除・[済]（白文字を乗せる） */
  --ns-ok:          var(--hig-green);
  --ns-tab-bg:      var(--hig-fill3);
  --ns-tab-fg:      var(--hig-label);

  --ns-fs-base:  var(--hig-fs-body);
  --ns-fs-sm:    var(--hig-fs-footnote);
  --ns-fs-label: var(--hig-fs-subhead);
  --ns-fs-input: var(--hig-fs-body);
  --ns-fs-title: var(--hig-fs-title1);
  --ns-fs-h2:    var(--hig-fs-title3);
  --ns-input-h:  var(--hig-hit);
  --ns-label-w:  148px;
  --ns-radius:   var(--hig-r-md);
  --ns-gap:      var(--hig-sp-4);
  --ns-font:     var(--hig-font);

  /* ---- style.css（旧ダーク専用シート）のレガシー変数も外観追従にする ---- */
  --bg:          var(--hig-bg);
  --bg-panel:    var(--hig-bg-elev);
  --bg-input:    var(--hig-field-bg);
  --line:        var(--hig-sep);
  --line-strong: var(--hig-sep-opaque);
  --fg:          var(--hig-label);
  --fg-muted:    var(--hig-label2);
  --fg-dim:      var(--hig-label3);
  --ns-link:     var(--hig-accent);
}

/* =====================================================================
   4. ダーク外観（HIG Dark Mode）
   プリミティブだけを差し替える。上のエイリアスは var() 参照なので自動追従。
   既定はシステム設定に追従し、data-theme で明示指定を上書きできる。
   ===================================================================== */
/* ★ ダークのトークンは **この1ブロックだけ** に書く。
   以前は「@media (prefers-color-scheme: dark)」と「[data-theme=dark]」の2箇所に
   同じ内容を複製していたが、片方だけ更新される事故（塗り色がライトのまま残り
   ダーク地で白文字が 3.7:1 まで落ちた）が実際に起きた。
   そこで partials/head_ns.blade.php のインラインスクリプトが描画前に
   **解決済みの外観**（system の場合は OS 設定を読んで light / dark のどちらか）を
   必ず data-theme に書き込む方式に変更し、CSS 側の分岐を1つに統合した。
   OS 設定の変更中の追従は assets/appearance.js の matchMedia リスナが行う。 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --hig-red:    #ff453a;
  --hig-orange: #ff9f0a;
  --hig-yellow: #ffd60a;
  --hig-green:  #30d158;
  --hig-mint:   #63e6e2;
  --hig-teal:   #40cbe0;
  --hig-cyan:   #64d2ff;
  --hig-blue:   #0a84ff;
  --hig-indigo: #5e5ce6;
  --hig-purple: #bf5af2;
  --hig-pink:   #ff375f;
  --hig-brown:  #ac8e68;

  /* 白文字を乗せる塗り用の濃色変種（ライトとは別の値） */
  --hig-red-fill:    #eb0d00;
  --hig-pink-fill:   #ec002f;
  --hig-blue-fill:   #0073e7;
  --hig-purple-fill: #b135ef;
  --hig-indigo-fill: #5e5ce6;
  /* 地が黒なのでリンク色は明るい systemBlue のままで 5.76:1 取れる */
  --hig-accent:      #0a84ff;

  /* 入力欄の目印（ベージュ）。地が黒なので暗い黄土色で「白文字が読める」明度にする */
  --ns-hl-field:     #4a4116;
  --hig-accent-fill: #0073e7;

  --hig-gray:  #8e8e93;
  --hig-gray2: #636366;
  --hig-gray3: #48484a;
  --hig-gray4: #3a3a3c;
  --hig-gray5: #2c2c2e;
  --hig-gray6: #1c1c1e;

  --hig-bg:       #000000;
  --hig-bg-elev:  #1c1c1e;
  --hig-bg-elev2: #2c2c2e;
  --hig-bar-bg:   #1c1c1e;

  --hig-label:  #ffffff;
  --hig-label2: rgba(235,235,245,.60);
  --hig-label3: rgba(235,235,245,.30);
  --hig-label4: rgba(235,235,245,.16);

  --hig-sep:        rgba(84,84,88,.65);
  --hig-sep-opaque: #38383a;

  --hig-fill:  rgba(120,120,128,.36);
  --hig-fill2: rgba(120,120,128,.32);
  --hig-fill3: rgba(120,120,128,.24);
  --hig-fill4: rgba(120,120,128,.18);

  --hig-field-bg: #1c1c1e;
  --hig-field-bd: var(--hig-sep-opaque);
  --hig-field-ro: #2c2c2e;

  --hig-shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --hig-shadow-2: 0 8px 24px rgba(0,0,0,.6);
}

:root[data-theme="light"] { color-scheme: light; }

/* JS が無効でも OS がダークなら最低限ダークで表示する（フォールバック）。
   data-theme が付いている通常時はこのブロックは当たらない。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --hig-bg: #000000; --hig-bg-elev: #1c1c1e; --hig-bg-elev2: #2c2c2e; --hig-bar-bg: #1c1c1e;
    --hig-label: #ffffff; --hig-label2: rgba(235,235,245,.60); --hig-label3: rgba(235,235,245,.30);
    --hig-sep: rgba(84,84,88,.65); --hig-sep-opaque: #38383a;
    --hig-fill: rgba(120,120,128,.36); --hig-fill2: rgba(120,120,128,.32);
    --hig-fill3: rgba(120,120,128,.24); --hig-fill4: rgba(120,120,128,.18);
    --hig-field-bg: #1c1c1e; --hig-field-ro: #2c2c2e;
    --hig-accent: #0a84ff; --hig-accent-fill: #0073e7;
    --ns-hl-field: #4a4116;
  }
}

/* =====================================================================
   5. ベース
   ===================================================================== */
* { box-sizing: border-box; }

html, body {
  background: var(--hig-bg) !important;
  color: var(--hig-label);
  font-family: var(--hig-font);
  font-size: var(--hig-fs-body);
  line-height: var(--hig-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
body.is-tenant, body.is-admin { background: var(--hig-bg); }

main.container, .container {
  background: transparent;
  color: var(--hig-label);
  max-width: 1280px;
  padding: var(--hig-sp-5);
}

a { color: var(--hig-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted, .fg-muted { color: var(--hig-label2); }
hr { border: 0; border-top: 1px solid var(--hig-sep); margin: var(--hig-sp-5) 0; }
code, kbd, pre, samp { font-family: var(--hig-font-mono); }

/* HIG: キーボードフォーカスは明確に。マウス操作では出さない。 */
:focus-visible {
  outline: 3px solid var(--hig-accent);
  outline-offset: 2px;
  border-radius: var(--hig-r-sm);
}

/* HIG アクセシビリティ: 視差を減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   6. ツールバー（HIG Navigation Bar / Toolbar）
   FM の彩度の高い青帯をやめ、HIG のバー（不透明地＋区切り線＋label文字＋
   アクセント色のコントロール）にする。ブランドは NS チップで担保する。
   ===================================================================== */
.topbar {
  display: flex; align-items: center; gap: var(--hig-sp-2);
  background: var(--hig-bar-bg);
  border-bottom: 1px solid var(--hig-sep);
  color: var(--hig-label);
  padding: var(--hig-sp-2) var(--hig-sp-5);
  min-height: 56px;
}
.topbar .brand {
  display: inline-flex; align-items: center;
}
.topbar .brand-admin { color: var(--hig-orange); }
.topbar .spacer { flex: 1; }

/* 会社ロゴ（漢字ロゴ・白地を透過にしたPNG）。ライト/ダークで色違いの画像を出し分ける。 */
.brand-logo { height: 32px; width: auto; display: block; }
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }

.topbar .topnav, .topnav { display: flex; gap: var(--hig-sp-1); margin-left: var(--hig-sp-4); }
.topnav a {
  display: inline-flex; align-items: center;
  min-height: var(--hig-hit-sm);
  color: var(--hig-accent);
  font-size: var(--hig-fs-callout);
  font-weight: var(--hig-fw-medium);
  padding: var(--hig-sp-2) var(--hig-sp-3);
  border-radius: var(--hig-r-md);
  transition: background var(--hig-dur) var(--hig-ease);
}
.topnav a:hover { background: var(--hig-fill4); text-decoration: none; }

.topbar .user {
  display: flex; align-items: center; gap: var(--hig-sp-3);
  color: var(--hig-label2); font-size: var(--hig-fs-footnote);
}
.topbar .logout { color: var(--hig-accent); text-decoration: none; font-weight: var(--hig-fw-medium); }
.topbar .logout:hover { text-decoration: underline; }
.is-admin .topbar { border-bottom-color: var(--hig-orange); }

/* 課コンテキスト中の戻りリンク（HIG の back ボタン相当） */
.topbar .sec-back {
  display: inline-flex; align-items: center; gap: var(--hig-sp-1);
  background: var(--hig-fill4) !important;
  color: var(--hig-accent) !important;
  border-radius: var(--hig-r-md);
  padding: var(--hig-sp-2) var(--hig-sp-3);
  min-height: var(--hig-hit-sm);
  font-weight: var(--hig-fw-medium) !important;
}
.topbar .sec-back:hover { background: var(--hig-fill3) !important; text-decoration: none; }

/* =====================================================================
   7. 見出し（HIG Text Styles）
   ===================================================================== */
.page-title, h1.page-title, .po-title, .scr-title {
  color: var(--hig-label);
  font-weight: var(--hig-fw-bold);
  font-size: var(--hig-fs-title1);
  line-height: var(--hig-lh-tight);
  letter-spacing: -.02em;
  margin: var(--hig-sp-2) 0 var(--hig-sp-5);
}
h1, h2, h3 { color: var(--hig-label); line-height: var(--hig-lh-tight); letter-spacing: -.01em; }
h1 { font-size: var(--hig-fs-title1); font-weight: var(--hig-fw-bold); }
h2 { font-size: var(--hig-fs-title3); font-weight: var(--hig-fw-semibold); }
h3 { font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-semibold); }

/* =====================================================================
   8. ボタン（HIG Buttons）
   既定は塗りのない bordered / アクセント文字。意味のある操作だけ着色する。
     新規 = orange / 主要操作 = accent / 削除 = red
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hig-sp-2);
  min-height: var(--hig-hit); padding: var(--hig-sp-2) var(--hig-sp-5);
  border-radius: var(--hig-r-md);
  border: 1px solid var(--hig-sep);
  background: var(--hig-bg-elev);
  color: var(--hig-accent);
  font-family: var(--hig-font);
  font-size: var(--hig-fs-callout);
  font-weight: var(--hig-fw-medium);
  line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background var(--hig-dur) var(--hig-ease), opacity var(--hig-dur) var(--hig-ease);
}
.btn:hover { background: var(--hig-fill4); color: var(--hig-accent); text-decoration: none; }
.btn:active { opacity: .7; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }

.btn-primary, .btn-teal, .btn-cyan {
  background: var(--hig-accent-fill); border-color: transparent; color: var(--hig-on-accent);
  font-weight: var(--hig-fw-semibold);
}
.btn-primary:hover, .btn-teal:hover, .btn-cyan:hover {
  background: var(--hig-accent-fill); color: var(--hig-on-accent); opacity: .85;
}
.btn-new, .btn-orange {
  background: var(--hig-orange); border-color: transparent; color: var(--hig-on-light);
  font-weight: var(--hig-fw-semibold);
}
.btn-new:hover, .btn-orange:hover { background: var(--hig-orange); color: var(--hig-on-light); opacity: .85; }
.btn-danger { background: var(--hig-red-fill); border-color: transparent; color: var(--hig-on-accent); font-weight: var(--hig-fw-semibold); }
.btn-danger:hover { background: var(--hig-red-fill); color: var(--hig-on-accent); opacity: .85; }
.btn-lg { min-height: var(--hig-hit-lg); padding: var(--hig-sp-3) var(--hig-sp-7); font-size: var(--hig-fs-headline); }
.btn-block { width: 100%; }

/* 操作アイコンボタン（一覧の行内：DESIGN.md「操作ボタンのアイコン化」） */
.act-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hig-hit-sm); height: var(--hig-hit-sm);
  padding: 0; border-radius: var(--hig-r-md); border: 1px solid transparent;
  color: var(--hig-accent); background: transparent; cursor: pointer; vertical-align: middle;
  font: inherit; line-height: 0;
  transition: background var(--hig-dur) var(--hig-ease);
}
.act-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.act-ico:hover { background: var(--hig-fill3); }
.act-ico.btn-trash { color: var(--hig-red-fill); }
.act-ico[disabled], .act-ico.is-disabled { opacity: .3; pointer-events: none; }

/* 小さなアイコンボタン（クリア×・検索🔍） */
.btn-icon { min-height: var(--hig-hit-sm); cursor: pointer; }

/* CSVダウンロード（assets/report-csv.js が全帳票・一覧に自動で置くボタン）。
   帳票のツールバー（.rp-toolbar）に入る場合はそこの .btn-teal の見た目に従い、
   ツールバーが無い画面では見出しの右に単独で並ぶ。 */
.ns-csv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hig-sp-2);
  min-height: var(--hig-hit); padding: var(--hig-sp-2) var(--hig-sp-5);
  border: 0; border-radius: var(--hig-r-md);
  background: var(--hig-accent-fill); color: var(--hig-on-accent);
  font-family: var(--hig-font); font-size: var(--hig-fs-callout);
  font-weight: var(--hig-fw-semibold); line-height: 1.2; cursor: pointer;
}
.ns-csv-btn:hover { opacity: .85; }
.ns-csv-bar { display: flex; justify-content: flex-end; margin: 0 0 var(--hig-sp-3); }

/* ページ送り（HIG segmented control 風） */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hig-sp-1); margin: var(--hig-sp-3) 0; }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hig-hit-sm); min-height: var(--hig-hit-sm); padding: 0 var(--hig-sp-3);
  background: var(--hig-bg-elev); color: var(--hig-accent);
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-md);
  font-size: var(--hig-fs-footnote); font-weight: var(--hig-fw-medium);
  text-decoration: none; cursor: pointer;
}
.pager-btn:hover { background: var(--hig-fill4); text-decoration: none; }
.pager-btn.is-active {
  background: var(--hig-accent-fill); border-color: transparent;
  color: var(--hig-on-accent); font-weight: var(--hig-fw-semibold); cursor: default;
}
.pager-btn.is-disabled { opacity: .35; pointer-events: none; }
.pager-gap { color: var(--hig-label2); padding: 0 var(--hig-sp-1); }
.pager-info { color: var(--hig-label2); font-size: var(--hig-fs-footnote); margin-left: var(--hig-sp-2); }

/* =====================================================================
   9. 一覧・表（HIG のリスト/テーブル）
   ===================================================================== */
table.list, table.portal {
  background: var(--hig-bg-elev); color: var(--hig-label);
  border-collapse: separate; border-spacing: 0; width: 100%;
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg);
  overflow: hidden;
  font-size: var(--hig-fs-callout);
}
table.list th, table.portal th {
  background: var(--hig-bg-elev2); color: var(--hig-label2);
  font-weight: var(--hig-fw-semibold); font-size: var(--hig-fs-footnote);
  border: 0; border-bottom: 1px solid var(--hig-sep);
  padding: var(--hig-sp-3) var(--hig-sp-3);
  text-align: left; white-space: nowrap;
}
table.list td, table.portal td {
  border: 0; border-bottom: 1px solid var(--hig-sep);
  padding: var(--hig-sp-3) var(--hig-sp-3);
  vertical-align: middle;
}
table.list tbody tr:last-child td, table.portal tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover, table.portal tbody tr:hover { background: var(--hig-fill4); }
table.list td.num, table.list td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td.center { text-align: center; }
table.list small { color: var(--hig-label2); }
table.list th.col-center, table.list td.col-center { text-align: center; }
table.list th.col-actions, table.list td.col-actions { text-align: center; white-space: nowrap; }

/* 行を詰めた一覧（1ページに載る行数を稼ぐ）。
   2026-08-25 染色課「1行の高さを半分位の細さにして下さい（1ページの表示行を出来るだけ多く）」。
   文字サイズは 14px 未満にしない（DESIGN.md）。詰めるのは上下の余白と行間だけ。 */
table.list.dense th, table.list.dense td {
  padding: var(--hig-sp-1) var(--hig-sp-2);
  line-height: 1.25;
}
table.list.dense td { white-space: nowrap; }
/* 一覧内のバーコード（EAN13 / Code128 のインライン SVG） */
table.list .bc-svg { display: block; height: 30px; width: auto; }
table.list.dense .bc-svg { height: 22px; }
.count { color: var(--hig-label2); font-size: var(--hig-fs-footnote); padding: var(--hig-sp-2) 0; }

/* =====================================================================
   10. 検索バー（HIG のグループ化されたカード）
   ===================================================================== */
.search {
  background: var(--hig-bg-elev);
  border: 1px solid var(--hig-sep);
  border-radius: var(--hig-r-lg);
  padding: var(--hig-sp-4) var(--hig-sp-4);
  margin-bottom: var(--hig-sp-3);
}
.search .row { display: flex; flex-wrap: wrap; gap: var(--hig-sp-3) var(--hig-sp-4); align-items: end; }
.search label {
  display: flex; flex-direction: column; gap: var(--hig-sp-1);
  color: var(--hig-label2); font-size: var(--hig-fs-footnote); font-weight: var(--hig-fw-medium);
}
.search .actions { display: flex; gap: var(--hig-sp-2); margin-top: var(--hig-sp-2); }

/* =====================================================================
   11. 入力（HIG Text Fields / Pickers）
   ===================================================================== */
input[type=text], input[type=date], input[type=number], input[type=email],
input[type=password], input[type=tel], input[type=search], input[type=time],
input[type=month], select, textarea {
  background: var(--hig-field-bg); color: var(--hig-field-fg);
  border: 1px solid var(--hig-field-bd); border-radius: var(--hig-r-md);
  font-family: var(--hig-font); font-size: var(--hig-fs-body);
  min-height: var(--hig-hit); padding: var(--hig-sp-2) var(--hig-sp-3);
  line-height: 1.4;
  transition: border-color var(--hig-dur) var(--hig-ease), box-shadow var(--hig-dur) var(--hig-ease);
}
textarea { min-height: 88px; resize: vertical; }
::placeholder { color: var(--hig-label3); opacity: 1; }

/* フォーカス（HIG: アクセント色のリングで「今ここ」を示す） */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hig-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hig-accent) 25%, transparent);
}
/* color-mix 未対応ブラウザ向けフォールバック */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(0,122,255,.3); }
}

input[readonly], select[disabled], textarea[readonly], input[disabled] {
  background: var(--hig-field-ro); color: var(--hig-label2);
}

/* チェック/ラジオ（HIG: アクセント色・十分な大きさ） */
input[type=checkbox], input[type=radio] {
  width: 22px; height: 22px; vertical-align: middle;
  accent-color: var(--hig-accent);
}
label { font-size: var(--hig-fs-subhead); }

/* 数値のスピナーは桁を隠すため全画面で非表示 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* =====================================================================
   12. ログイン
   ===================================================================== */
.login-box {
  background: var(--hig-bg-elev); color: var(--hig-label);
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-xl);
  box-shadow: var(--hig-shadow-2);
  max-width: 420px; margin: var(--hig-sp-8) auto; padding: var(--hig-sp-7) var(--hig-sp-7);
}
.login-box h1 { color: var(--hig-label); font-size: var(--hig-fs-title1); margin: 0 0 var(--hig-sp-1); }
.login-box .login-sub { color: var(--hig-label2); font-size: var(--hig-fs-subhead); margin: 0 0 var(--hig-sp-5); }
.login-box label {
  display: block; color: var(--hig-label2); font-size: var(--hig-fs-subhead);
  font-weight: var(--hig-fw-medium); margin-bottom: var(--hig-sp-4);
}
.login-box input[type="email"],
.login-box input[type="password"],
.login-box input[type="text"] {
  width: 100%;
  background: var(--hig-field-bg); color: var(--hig-field-fg);
  border: 1px solid var(--hig-field-bd); border-radius: var(--hig-r-md);
  font-size: var(--hig-fs-body); min-height: var(--hig-hit);
  padding: var(--hig-sp-2) var(--hig-sp-3); margin-top: var(--hig-sp-1);
}
.login-box .btn-block { min-height: var(--hig-hit-lg); font-size: var(--hig-fs-headline); margin-top: var(--hig-sp-3); }
.is-admin .login-box h1 { color: var(--hig-orange); }

/* =====================================================================
   13. 通知（HIG: 状態は色 + 文言の両方で示す）
   ===================================================================== */
.alert-ok, .alert-error, .alert-info {
  border-radius: var(--hig-r-md); padding: var(--hig-sp-3) var(--hig-sp-4);
  font-size: var(--hig-fs-callout); margin: var(--hig-sp-2) 0;
  border: 1px solid transparent;
}
.alert-ok {
  background: color-mix(in srgb, var(--hig-green) 14%, var(--hig-bg-elev));
  border-color: color-mix(in srgb, var(--hig-green) 45%, transparent);
  color: var(--hig-label);
}
.alert-error {
  background: color-mix(in srgb, var(--hig-red) 14%, var(--hig-bg-elev));
  border-color: color-mix(in srgb, var(--hig-red) 45%, transparent);
  color: var(--hig-label);
}
.alert-info {
  background: color-mix(in srgb, var(--hig-orange) 14%, var(--hig-bg-elev));
  border-color: color-mix(in srgb, var(--hig-orange) 45%, transparent);
  color: var(--hig-label);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .alert-ok    { background: var(--hig-bg-elev); border-color: var(--hig-green); }
  .alert-error { background: var(--hig-bg-elev); border-color: var(--hig-red); }
  .alert-info  { background: var(--hig-bg-elev); border-color: var(--hig-orange); }
}
.alert-info code, .alert-info strong { color: var(--hig-label); }
.alert-info code {
  background: var(--hig-fill3); padding: 2px var(--hig-sp-2);
  border-radius: var(--hig-r-sm); border: 0;
}

/* =====================================================================
   14. 加工指図書 詳細/入力（基準画面）
   ===================================================================== */
.po { color: var(--hig-label); }
.po-status-done { color: var(--hig-red); font-size: var(--hig-fs-large-title); font-weight: var(--hig-fw-bold); letter-spacing: 2px; }
.po-statusbar { color: var(--hig-label2); }
.po-statusbox { display: flex; gap: var(--hig-sp-5); align-items: center; color: var(--hig-label2); font-size: var(--hig-fs-callout); }
.po-statusbox label { display: inline-flex; align-items: center; gap: var(--hig-sp-1); }
.detail-status { color: var(--hig-red); font-weight: var(--hig-fw-bold); font-size: var(--hig-fs-title1); letter-spacing: 2px; }

/* 上部ヘッダ（前指図No. / 新指図No. / 年月 / 担当者） */
.po-head { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--hig-sep); border-radius: var(--hig-r-md); overflow: hidden; }
.po-head td, .po-head th { border: 0; border-right: 1px solid var(--hig-sep); border-bottom: 1px solid var(--hig-sep); padding: var(--hig-sp-1) var(--hig-sp-2); font-size: var(--hig-fs-footnote); }
.po-head .hl { background: var(--hig-bg-elev2); color: var(--hig-label2); text-align: center; white-space: nowrap; font-weight: var(--hig-fw-semibold); }
.po-head .hv { background: var(--hig-field-bg); color: var(--hig-field-fg); min-width: 40px; }
.po-head .hv input { border: 0; width: 100%; padding: var(--hig-sp-2); background: transparent; min-height: 40px; font-size: var(--hig-fs-body); }
/* 列幅を固定して「担当者だけ極端に広い / 登録者日時が折り返す」のを止める。
   他画面の .po-head（出荷割当など）は自動レイアウトのままにするので修飾クラスで限定する。 */
.po-head.po-head-fixed { table-layout: fixed; }
.po-head col.ph-l { width: var(--ns-label-w); }
.po-head col.ph-no { width: 232px; }
.po-head col.ph-ym { width: 112px; }
.po-head col.ph-user { width: 320px; }   /* 登録者/日時の列だけ残りを取る */
.po-head .hm { background: var(--hig-bg-elev); color: var(--hig-label2); font-size: var(--hig-fs-footnote); line-height: 1.5; }

/* 区分行 */
.seg { border-collapse: separate; border-spacing: 0; margin-top: var(--hig-sp-3); width: 100%; border: 1px solid var(--hig-sep); border-radius: var(--hig-r-md); overflow: hidden; }
.seg th {
  background: var(--hig-bg-elev2); color: var(--hig-label2);
  border: 0; border-right: 1px solid var(--hig-sep); border-bottom: 1px solid var(--hig-sep);
  font-weight: var(--hig-fw-semibold); font-size: var(--hig-fs-footnote); padding: var(--hig-sp-1) var(--hig-sp-2); text-align: center;
}
.seg td { border: 0; border-right: 1px solid var(--hig-sep); padding: 0; background: var(--hig-field-bg); }
.seg td .pair { display: flex; }
.seg td input { border: 0; padding: var(--hig-sp-2); background: transparent; color: var(--hig-field-fg); min-height: 40px; font-size: var(--hig-fs-body); border-radius: 0; }
.seg td select { border: 0; border-left: 1px solid var(--hig-sep); background: var(--hig-fill4); color: var(--hig-label); min-width: 28px; min-height: 40px; font-size: var(--hig-fs-body); border-radius: 0; }
.seg-code { width: 64px; flex: 0 0 64px; text-align: left; }
.seg-name { flex: 1; border: 0; border-left: 1px solid var(--hig-sep); background: transparent; color: var(--hig-label); padding: var(--hig-sp-1) var(--hig-sp-1); }

/* タブ（HIG Segmented Control） */
.po-tabs, .tabs {
  display: inline-flex; gap: 2px; margin: var(--hig-sp-4) 0 0;
  background: var(--hig-fill3); padding: 3px; border-radius: var(--hig-r-md); border: 0;
}
.po-tab, .tabs button, .tabs .tab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hig-hit-sm); padding: var(--hig-sp-2) var(--hig-sp-5);
  background: transparent; color: var(--hig-label);
  border: 0; border-radius: calc(var(--hig-r-md) - 3px);
  cursor: pointer; font-family: var(--hig-font);
  font-size: var(--hig-fs-subhead); font-weight: var(--hig-fw-medium);
  transition: background var(--hig-dur) var(--hig-ease);
}
.po-tab:hover, .tabs button:hover, .tabs .tab-btn:hover { background: var(--hig-fill4); }
.po-tab.active, .tabs button.active, .tabs .tab-btn.active {
  background: var(--hig-bg-elev); color: var(--hig-label);
  font-weight: var(--hig-fw-semibold); box-shadow: var(--hig-shadow-1);
}
.po-panel, .tab-panel {
  border: 1px solid var(--hig-sep); background: var(--hig-bg-elev);
  border-radius: var(--hig-r-lg); padding: var(--hig-sp-4); margin-top: var(--hig-sp-3);
}
.po-panel.hidden, .tab-panel.hidden { display: none; }

/* 2ペイン フォームグリッド */
/* align-items:start が無いと左右の表が同じ高さまで引き伸ばされ、
   行数の少ない側のセルだけ無駄に背が高くなる（入力欄が縦に間延びして見える）。 */
.po-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hig-sp-5); align-items: start; }
.po-fields { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--hig-sep); border-radius: var(--hig-r-md); overflow: hidden; }
.po-fields th {
  background: var(--hig-bg-elev2); color: var(--hig-label2);
  border: 0; border-right: 1px solid var(--hig-sep); border-bottom: 1px solid var(--hig-sep);
  text-align: right; font-weight: var(--hig-fw-medium);
  padding: var(--hig-sp-2) var(--hig-sp-3); font-size: var(--hig-fs-subhead);
  white-space: nowrap; width: var(--ns-label-w);
}
.po-fields td {
  background: var(--hig-field-bg); color: var(--hig-field-fg);
  border: 0; border-bottom: 1px solid var(--hig-sep);
  padding: 0; vertical-align: middle;
}
.po-fields tbody tr:last-child th, .po-fields tbody tr:last-child td { border-bottom: 0; }
.po-fields input[type=text], .po-fields input[type=date], .po-fields input[type=number], .po-fields select {
  border: 0; border-radius: 0; width: 100%; padding: var(--hig-sp-2) var(--hig-sp-3);
  background: transparent; color: var(--hig-field-fg); font-size: var(--hig-fs-body); min-height: 40px;
}
.po-fields td textarea {
  border: 0; border-radius: 0; width: 100%; padding: var(--hig-sp-2) var(--hig-sp-3); background: transparent;
  color: var(--hig-field-fg); min-height: 44px; resize: vertical; font-family: var(--hig-font); font-size: var(--hig-fs-body);
}
.po-fields td .pair { display: flex; gap: var(--hig-sp-1); align-items: stretch; padding: 0; }
.po-fields td .pair > * { min-width: 0; }
.po-fields .cell-code { width: 64px; border-right: 1px solid var(--hig-sep); display: inline-block; }
.po-fields td .seg-sub { border-left: 1px solid var(--hig-sep); }

/* 「数値＋単位」を1セルに並べる欄（仕上規格・生機重量） */
.po-fields td .numunit { display: grid; gap: 3px; align-items: center; }
.po-fields td .numunit input[type=number] { padding: var(--hig-sp-2) var(--hig-sp-1); text-align: right; }
.po-fields td .numunit select { padding: var(--hig-sp-2) 2px; }

/* ---------------------------------------------------------------------
   2項目/行のフォーム表（ラベル|入力|ラベル|入力）。
   1つのラベルに複数の欄をぶら下げる（「彫刻代/取扱」のような）書き方は
   どの欄が何なのか分からず、欄の幅も内容と合わなくなるため、
   欄ごとにラベルを立てて幅を固定する。1項目だけの行は td を colspan=3。
   --------------------------------------------------------------------- */
.po-fields.po-2col { table-layout: fixed; }
.po-fields.po-2col col.po-l1 { width: 132px; }
.po-fields.po-2col col.po-l2 { width: 108px; }
.po-fields.po-2col th { width: auto; overflow: hidden; text-overflow: ellipsis; }
/* 相方の無い欄（FM でも3つ目の欄が無い行）は「入力欄でない空き」として見せる */
.po-fields.po-2col th.po-empty,
.po-fields.po-2col td.po-empty { background: var(--hig-bg-elev); }

/* 数値・単価・単位のように内容の長さが決まっている欄の幅（8ptグリッド） */
.po-fields td .w-num   { flex: 0 0 96px;  width: 96px; text-align: right; }
.po-fields td .w-unit  { flex: 0 0 88px;  width: 88px; }
.po-fields td .w-code  { flex: 0 0 64px;  width: 64px; }
.po-fields td .w-grow  { flex: 1 1 auto;  width: auto; min-width: 0; }
.po-fields td input.num { text-align: right; }
/* 自動計算で埋まる欄（契約長）は手入力できないことが分かる見た目にする */
.po-fields td input.po-calc { background: var(--hig-fill3); color: var(--hig-label2); }

/* 同じ種類の欄を2列に並べる枠（仕立指定・加工注意） */
.po-fields td .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; }
.po-fields td .grid2 > * { min-width: 0; }
.po-fields td .grid2 select,
.po-fields td .grid2 .codecell,
.po-fields td .codecell-list .codecell {
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-sm);
  background: var(--hig-field-bg); overflow: hidden;
}
.po-fields td .codecell-list { display: grid; gap: 3px; padding: 3px; }
/* 2列表の <select> は左右余白を詰めて「コード 名称」が入るだけの文字数を稼ぐ */
.po-fields.po-2col td select { padding-left: var(--hig-sp-2); padding-right: var(--hig-sp-1); }

/* 日付入力欄（YYYY/MM/DD テキスト・空欄可。assets/datefield.js） */
.datefield { font-variant-numeric: tabular-nums; }
.po-fields td .datefield { text-align: center; }
/* 空欄のときの YYYY/MM/DD は「書式のヒント」だと分かる薄さにする
   （標準の日付入力のように値が残っているように見せない） */
.datefield::placeholder { color: var(--hig-label3); font-size: var(--hig-fs-footnote); letter-spacing: .02em; }
input.datefield-bad { box-shadow: inset 0 0 0 2px var(--hig-red); color: var(--hig-red); }

/* 右端のカレンダーアイコン（押すと日付選択のポップアップ。手入力はそのまま使える）。
   日付欄は表の中・入力枠の中と置き場所が様々で、そこの input 指定（table.portal td input 等）が
   background/padding を丸ごと上書きしてアイコンを消すため、この2つだけは !important で通す。 */
input.datefield[type="text"] {
  padding-right: 26px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2.8' y='4.2' width='14.4' height='13' rx='2.6'/%3E%3Cpath d='M2.8 8.2h14.4M6.6 2.6v3M13.4 2.6v3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 18px 18px !important;
  cursor: text;
}
input.datefield[type="text"].datefield-open { box-shadow: inset 0 0 0 2px var(--hig-accent); }

/* 日付選択ポップアップ（assets/datefield.js が body 直下に1つだけ作る） */
.datefield-pop {
  display: none; position: fixed; z-index: 3000; width: 292px;
  padding: var(--hig-sp-2);
  background: var(--hig-bg-elev); color: var(--hig-label);
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg);
  box-shadow: var(--hig-shadow-2);
}
.datefield-pop .dfp-head { display: flex; align-items: center; gap: var(--hig-sp-1); }
.datefield-pop .dfp-title {
  flex: 1; text-align: center;
  font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.datefield-pop .dfp-nav {
  width: 30px; height: 30px; border: 0; border-radius: var(--hig-r-sm);
  background: var(--hig-fill3); color: var(--hig-accent);
  font-size: var(--hig-fs-callout); line-height: 1; cursor: pointer;
}
.datefield-pop .dfp-nav:hover { background: var(--hig-fill); }
.datefield-pop .dfp-wd,
.datefield-pop .dfp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datefield-pop .dfp-wd { margin: var(--hig-sp-2) 0 var(--hig-sp-1); }
.datefield-pop .dfp-w {
  text-align: center; font-size: var(--hig-fs-footnote); color: var(--hig-label2);
}
.datefield-pop .dfp-w.sun, .datefield-pop .dfp-day.sun { color: var(--hig-red); }
.datefield-pop .dfp-w.sat, .datefield-pop .dfp-day.sat { color: var(--hig-blue); }
.datefield-pop .dfp-day {
  height: 34px; border: 0; border-radius: var(--hig-r-sm);
  background: transparent; color: var(--hig-label);
  font-size: var(--hig-fs-callout); font-variant-numeric: tabular-nums; cursor: pointer;
}
.datefield-pop .dfp-day:hover { background: var(--hig-fill3); }
.datefield-pop .dfp-day.today { box-shadow: inset 0 0 0 1px var(--hig-accent); }
.datefield-pop .dfp-day.sel {
  background: var(--hig-accent); color: var(--hig-on-accent); font-weight: var(--hig-fw-semibold);
}
.datefield-pop .dfp-foot {
  display: flex; gap: var(--hig-sp-1); margin-top: var(--hig-sp-2);
  padding-top: var(--hig-sp-2); border-top: 1px solid var(--hig-sep);
}
.datefield-pop .dfp-btn {
  flex: 1; min-height: var(--hig-hit-sm); border: 0; border-radius: var(--hig-r-sm);
  background: var(--hig-fill3); color: var(--hig-accent);
  font-size: var(--hig-fs-footnote); cursor: pointer;
}
.datefield-pop .dfp-btn:hover { background: var(--hig-fill); }

/* コード+名称セル */
.codecell { display: flex; align-items: stretch; }
.codecell .c {
  width: 64px; flex: 0 0 64px; border: 0; border-right: 1px solid var(--hig-sep);
  border-radius: 0; padding: var(--hig-sp-2); text-align: left; min-height: 40px;
  font-size: var(--hig-fs-body); background: transparent; color: var(--hig-field-fg);
}
.codecell .lookup, .codecell .btn-icon {
  width: 34px; border: 0; border-right: 1px solid var(--hig-sep);
  background: var(--hig-fill4); cursor: pointer; color: var(--hig-accent); font-size: var(--hig-fs-subhead);
}
.codecell .n {
  flex: 1; padding: var(--hig-sp-2) var(--hig-sp-3); color: var(--hig-label); background: transparent;
  display: flex; align-items: center; min-height: 40px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; user-select: none; font-size: var(--hig-fs-body);
}
.codecell .n.err { color: var(--hig-red); }
.codecell .n:empty::before { content: attr(data-ph); color: var(--hig-label3); }
.lookup-err { color: var(--hig-red) !important; }
.lk-find { cursor: pointer; background: none; border: 0; font-size: var(--hig-fs-footnote); padding: 0 var(--hig-sp-1); }

/* 指図No. 2分割 */
.splitno { display: flex; align-items: center; gap: var(--hig-sp-1); padding: 0 var(--hig-sp-1); }
.splitno input { border: 1px solid var(--hig-field-bd); width: 96px; padding: var(--hig-sp-2); min-height: 38px; font-size: var(--hig-fs-body); }
.splitno .hy { color: var(--hig-label2); font-weight: var(--hig-fw-semibold); }
/* 前指図No. の複製（＋）。押した時点で前指図の内容を丸ごと写すので、押せることが分かる色にする */
.btn-icon.po-copy-plus {
  min-width: var(--hig-hit-sm); border: 1px solid var(--hig-accent); border-radius: var(--hig-r-sm);
  background: var(--hig-accent); color: var(--hig-on-accent);
  font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-semibold); line-height: 1;
}

/* 下部操作 */
.po-foot, .foot-actions {
  display: flex; gap: var(--hig-sp-4); justify-content: center;
  padding: var(--hig-sp-6) 0 var(--hig-sp-3); flex-wrap: wrap;
}
.po-foot .btn, .foot-actions .btn { min-width: 200px; text-align: center; min-height: var(--hig-hit-lg); font-size: var(--hig-fs-headline); }

.po-titlebar { display: flex; align-items: center; gap: var(--hig-sp-4); margin-bottom: var(--hig-sp-3); flex-wrap: wrap; }
.po-titlebar .grow { flex: 1; }
.po-wrap { border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg); padding: var(--hig-sp-4); background: var(--hig-bg-elev); }

/* =====================================================================
   15. 既存マークアップ（form-row / detail-head / portal）を HIG に寄せる
   ===================================================================== */
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="date"],
.form-row input[type="password"], .form-row input[type="number"], .form-row select,
.form-row textarea, .detail-head .field input, .detail-head .field select,
table.portal td input, table.portal td select {
  background: var(--hig-field-bg) !important; color: var(--hig-field-fg) !important;
  border: 1px solid var(--hig-field-bd) !important; border-radius: var(--hig-r-sm);
  font-size: var(--hig-fs-body) !important;
}
.form-row input::placeholder, .detail-head input::placeholder { color: var(--hig-label3) !important; }

/* フォーム行（HIG のグループ化リスト: ラベルは secondaryLabel・値は label） */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hig-sp-4); }
.form-row {
  display: grid !important; grid-template-columns: var(--ns-label-w) minmax(0,1fr);
  align-items: stretch; gap: 0; margin: 0;
  border: 0; border-bottom: 1px solid var(--hig-sep);
  background: var(--hig-bg-elev);
}
.form-grid .pane > .form-row:first-child, .pane > .form-row:first-child {
  border-top: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg) var(--hig-r-lg) 0 0;
}
.form-row > label {
  background: var(--hig-bg-elev2) !important; color: var(--hig-label2) !important;
  text-align: right; padding: var(--hig-sp-2) var(--hig-sp-3) !important;
  font-size: var(--hig-fs-subhead); font-weight: var(--hig-fw-medium);
  display: flex; align-items: center; justify-content: flex-end;
  border-right: 1px solid var(--hig-sep); white-space: nowrap;
}
.form-row > input, .form-row > select, .form-row > textarea,
.form-row > .value, .form-row > .pair {
  background: var(--hig-bg-elev); padding: var(--hig-sp-1) var(--hig-sp-2);
  min-height: var(--hig-hit); display: flex; align-items: center;
}
.form-row > .pair { gap: var(--hig-sp-2); flex-wrap: wrap; }
.form-row .value { color: var(--hig-label); font-size: var(--hig-fs-body); }

/* 上部ヘッダ */
.detail-head {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg);
  overflow: hidden; margin-bottom: var(--hig-sp-3); background: var(--hig-bg-elev);
  padding: 0;
}
.detail-head .field { border: 0; border-right: 1px solid var(--hig-sep); border-bottom: 1px solid var(--hig-sep); display: flex; flex-direction: column; }
.detail-head .field > label {
  background: var(--hig-bg-elev2); color: var(--hig-label2); text-align: center;
  font-size: var(--hig-fs-footnote); padding: var(--hig-sp-1) var(--hig-sp-2);
  border-bottom: 1px solid var(--hig-sep); font-weight: var(--hig-fw-semibold);
  display: block;
}
.detail-head .field .value, .detail-head .field > input {
  background: transparent; color: var(--hig-label); padding: var(--hig-sp-1) var(--hig-sp-2);
  min-height: 38px; font-size: var(--hig-fs-body); border-bottom: 0;
}

/* カラー明細/工程テーブル */
table.portal { background: var(--hig-bg-elev); color: var(--hig-label); }
table.portal th { background: var(--hig-bg-elev2) !important; color: var(--hig-label2) !important; }
table.portal td { background: transparent; }

/* フォームカード */
.form-card {
  background: var(--hig-bg-elev); border: 1px solid var(--hig-sep);
  border-radius: var(--hig-r-lg); padding: var(--hig-sp-4) var(--hig-sp-5);
}
.form-card h2 { color: var(--hig-label); }

/* =====================================================================
   16. タイル（総合メニュー / 課別 / マスター）
   HIG: 塗りは意味を持つ色、フチは使わず角丸＋影で分離する。
   ===================================================================== */
.tile-row { display: flex; flex-wrap: wrap; gap: var(--hig-sp-3); }
.tile, .tile-master, .sec-tile {
  border-radius: var(--hig-r-xl);
  border: 0;
  box-shadow: var(--hig-shadow-1);
  transition: transform var(--hig-dur) var(--hig-ease), opacity var(--hig-dur) var(--hig-ease);
  font-size: var(--hig-fs-title3); font-weight: var(--hig-fw-semibold);
  color: var(--hig-on-accent);
  text-decoration: none;
}
.tile {
  display: flex; flex-direction: column; justify-content: center;
  width: 200px; min-height: 90px; padding: var(--hig-sp-3) var(--hig-sp-4);
}
.tile:hover, .tile-master:hover, .sec-tile:hover {
  transform: translateY(-2px); opacity: .9; text-decoration: none;
  box-shadow: var(--hig-shadow-2);
}
.tile:active, .tile-master:active, .sec-tile:active { transform: translateY(0); opacity: .8; }
.tile .tile-label, .tile-master .tile-label { color: inherit; font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-semibold); }
.tile .tile-sub, .tile-master .tile-sub { color: inherit; opacity: .8; font-size: var(--hig-fs-footnote); font-weight: var(--hig-fw-regular); margin-top: var(--hig-sp-1); text-transform: none; }
.tile-master, .tile-master-mini {
  width: 200px; min-height: 62px; height: auto; padding: var(--hig-sp-2) var(--hig-sp-3);
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--hig-r-lg);
}

/* 地の色ごとの文字色（HIG: 黄は黒文字、他は白文字） */
/* 白文字を乗せる地（赤・マゼンタ・青の濃色変種） */
.tile-prod, .tile-product, .tile-procure, .tile-sales,
.tile-finance, .tile-analysis,
.tile-master.tile-division, .tile-master.tile-customer,
.tile-master.tile-user, .tile-master.tile-section_menu { color: var(--hig-on-accent); }

/* 黒文字を乗せる地（黄・シアン）。.tile-master / .tile-relogin の地はシアンなので
   ここに入れる（白文字だとダークで 1.72:1 になり読めない）。 */
.tile-edi, .tile-logistics, .tile-cyan, .tile-master, .tile-relogin,
.tile-master.tile-process, .tile-master.tile-caution { color: var(--hig-on-light); }

.tile-prod      { background: var(--ns-production); }
.tile-product   { background: var(--ns-product); }
.tile-procure   { background: var(--ns-procure); }
.tile-sales     { background: var(--ns-sales); }
.tile-finance   { background: var(--ns-finance); }
.tile-analysis  { background: var(--ns-analysis); }
.tile-edi       { background: var(--ns-edi); }
.tile-logistics { background: var(--ns-logistics); }
.tile-master    { background: var(--ns-master); }
.tile-relogin   { background: var(--ns-relogin); }
.tile-cyan      { background: var(--ns-cyan); }
.tile-master.tile-division { background: var(--ns-production); }
.tile-master.tile-customer { background: var(--ns-procure); }
.tile-master.tile-user     { background: var(--ns-product); }
.tile-master.tile-process  { background: var(--ns-edi); }
.tile-master.tile-caution  { background: var(--ns-cyan); }
.tile-master.tile-section_menu { background: var(--ns-analysis); }

/* 未実装・無効タイル（HIG: 無効は彩度を落とし操作不可を明示） */
.tile-disabled {
  background: var(--hig-fill3); color: var(--hig-label3);
  pointer-events: none; border: 1px dashed var(--hig-sep); box-shadow: none;
}
.tile-todo { opacity: .5; cursor: not-allowed; position: relative; }
.tile-todo::after {
  content: "未実装"; position: absolute; top: var(--hig-sp-1); right: var(--hig-sp-2);
  font-size: var(--hig-fs-caption); padding: 1px var(--hig-sp-1);
  background: rgba(0,0,0,.5); color: #fff; border-radius: var(--hig-r-sm);
}
.tile-master[style*="opacity"] { color: var(--hig-on-light); }

/* メニュー見出し */
.home-tiles h2, .master-menu h2 {
  font-size: var(--hig-fs-footnote); color: var(--hig-label2);
  margin: var(--hig-sp-5) 0 var(--hig-sp-2);
  border-bottom: 1px solid var(--hig-sep); border-bottom-color: var(--hig-sep);
  padding-bottom: var(--hig-sp-1);
  font-weight: var(--hig-fw-semibold); text-transform: none; letter-spacing: .02em;
}
.master-menu section { margin-bottom: var(--hig-sp-6); }
.home-welcome {
  background: var(--hig-bg-elev); padding: var(--hig-sp-4) var(--hig-sp-5);
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg); margin-bottom: var(--hig-sp-5);
}
.home-welcome p { margin: var(--hig-sp-1) 0; }
.home-welcome .muted { color: var(--hig-label2); font-size: var(--hig-fs-callout); }

/* =====================================================================
   17. 一覧の共通コンポーネント（チップ・状態ピル・空セル）
   ===================================================================== */
.badge {
  display: inline-block; padding: 2px var(--hig-sp-2); border-radius: var(--hig-r-cap);
  font-size: var(--hig-fs-caption); font-weight: var(--hig-fw-semibold); line-height: 1.5;
}
.badge.ok { background: var(--hig-green);   color: var(--hig-on-light); }
.badge.ng { background: var(--hig-red-fill); color: var(--hig-on-accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--hig-sp-1); align-items: center; }
.chip {
  display: inline-flex; align-items: center; padding: 2px var(--hig-sp-2);
  border: 0; border-radius: var(--hig-r-cap);
  background: var(--hig-fill3); color: var(--hig-label);
  font-size: var(--hig-fs-caption); font-weight: var(--hig-fw-semibold);
  line-height: 1.5; white-space: nowrap; margin: 1px;
}
.chip.chip-violet { background: var(--ns-fm-magenta); color: var(--hig-on-accent); }
.chip.chip-teal   { background: var(--ns-fm-cyan);    color: var(--hig-on-light); }
.chip.chip-blue   { background: var(--ns-fm-blue);    color: var(--hig-on-accent); }
.chip.chip-amber  { background: var(--ns-fm-yellow);  color: var(--hig-on-light); }
.chip.chip-gray   { background: var(--hig-fill); color: var(--hig-label); }

.status-pill {
  display: inline-flex; align-items: center; gap: var(--hig-sp-1);
  padding: 3px var(--hig-sp-3); border-radius: var(--hig-r-cap);
  font-size: var(--hig-fs-caption); font-weight: var(--hig-fw-semibold);
  line-height: 1.4; border: 1px solid transparent;
}
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.status-pill.on {
  background: color-mix(in srgb, var(--hig-green) 16%, var(--hig-bg-elev));
  color: var(--hig-label); border-color: color-mix(in srgb, var(--hig-green) 40%, transparent);
}
.status-pill.on .dot { background: var(--hig-green); }
.status-pill.off { background: var(--hig-fill4); color: var(--hig-label2); border-color: var(--hig-sep); }
.status-pill.off .dot { background: var(--hig-gray); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .status-pill.on { background: var(--hig-bg-elev); border-color: var(--hig-green); }
}

/* 一覧の中でそのまま押せるバッジ（号機マスターの «看板ボード表示» のワンクリック切替）。
   見た目は status-pill のまま、当たり判定だけ確保する */
button.status-pill.is-toggle {
  min-height: var(--hig-hit-sm); padding-top: 0; padding-bottom: 0;
  font-family: var(--hig-font); cursor: pointer;
}
button.status-pill.is-toggle:hover { filter: brightness(1.06); }
button.status-pill.is-toggle:focus-visible { outline: 2px solid var(--hig-accent); outline-offset: 2px; }

.cell-empty { color: var(--hig-label2); }

/* ---------------------------------------------------------------------
   トグルスイッチ（HIG Switch）
   ON/OFF の2値設定はチェックボックスではなくこれを使う。実体は checkbox
   なので name/value はそのまま POST される。ラベル全体が当たり判定（44px）。
   --------------------------------------------------------------------- */
.switch {
  display: inline-flex; align-items: center; gap: var(--hig-sp-3);
  min-height: var(--hig-hit); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.switch .track {
  position: relative; flex: 0 0 auto; width: 51px; height: 31px;
  border-radius: var(--hig-r-cap);
  background: var(--hig-fill); border: 1px solid var(--hig-sep);
  transition: background var(--hig-dur) var(--hig-ease), border-color var(--hig-dur) var(--hig-ease);
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 25px; height: 25px;
  border-radius: 50%; background: var(--hig-bg-elev); box-shadow: var(--hig-shadow-1);
  transition: transform var(--hig-dur) var(--hig-ease);
}
.switch input:checked + .track { background: var(--hig-green); border-color: var(--hig-green); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus + .track { outline: 2px solid var(--hig-accent); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }
.switch .switch-state { font-size: var(--hig-fs-body); color: var(--hig-label); }
.switch .switch-state .s-on { display: none; }
.switch input:checked ~ .switch-state .s-on  { display: inline; }
.switch input:checked ~ .switch-state .s-off { display: none; }

/* =====================================================================
   18. 外観切替コントロール（HIG Appearance）
   ===================================================================== */
.appearance {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--hig-fill3); padding: 3px; border-radius: var(--hig-r-cap);
}
.appearance button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 var(--hig-sp-2);
  border: 0; border-radius: var(--hig-r-cap); background: transparent;
  color: var(--hig-label2); cursor: pointer;
  font-family: var(--hig-font); font-size: var(--hig-fs-caption); font-weight: var(--hig-fw-medium);
  transition: background var(--hig-dur) var(--hig-ease);
}
.appearance button svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.appearance button:hover { background: var(--hig-fill4); color: var(--hig-label); }
.appearance button[aria-pressed="true"] {
  background: var(--hig-bg-elev); color: var(--hig-label);
  box-shadow: var(--hig-shadow-1);
}

/* スクリーンリーダー専用テキスト（HIG アクセシビリティ: アイコンだけのボタンに名前を与える） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   19. 開発者モード
   ===================================================================== */
.dev-banner {
  position: sticky; top: 0; z-index: 100;
  background: var(--hig-orange); color: #000;
  padding: var(--hig-sp-1) var(--hig-sp-5); font-size: var(--hig-fs-footnote);
  font-weight: var(--hig-fw-semibold);
  border-bottom: 1px solid color-mix(in srgb, var(--hig-orange) 70%, #000);
  display: flex; align-items: center; gap: var(--hig-sp-4); flex-wrap: wrap;
}
.dev-banner .dev-switch {
  margin-left: var(--hig-sp-2); padding: 2px var(--hig-sp-3);
  background: rgba(0,0,0,.8); color: #fff; border-radius: var(--hig-r-cap);
  text-decoration: none; font-size: var(--hig-fs-footnote);
}
.dev-banner .dev-switch:hover { background: #000; text-decoration: none; }
.dev-banner .dev-hint { color: rgba(0,0,0,.7); font-weight: var(--hig-fw-regular); margin-left: auto; }
.is-dev .dev-marked-label { border-bottom: 1px dotted var(--hig-orange); cursor: help; }
.is-dev .dev-marked-input:hover, .is-dev .dev-marked-input:focus { outline: 1px solid var(--hig-orange); outline-offset: -1px; }
.is-dev .dev-marked-th { text-decoration: underline dotted var(--hig-orange); cursor: help; }
.dev-page-table-badge {
  position: fixed; right: var(--hig-sp-3); bottom: var(--hig-sp-3);
  background: var(--hig-bg-elev); color: var(--hig-label);
  border: 1px solid var(--hig-orange); border-radius: var(--hig-r-cap);
  padding: var(--hig-sp-1) var(--hig-sp-3); font-family: var(--hig-font-mono); font-size: var(--hig-fs-footnote);
  z-index: 100; opacity: .9; pointer-events: none;
}

/* =====================================================================
   20. 帳票・一覧を「フレーム内表示」にしない
   ===================================================================== */
main.container.wide, .container.wide { max-width: none; }
.rp-paper, .ar-paper, .sa-paper, .shr-paper, .bdr-paper, .ins-paper {
  max-width: none; overflow: visible;
}

/* =====================================================================
   21. スクロールバー（HIG: 細く控えめ）
   ===================================================================== */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hig-fill); border-radius: var(--hig-r-cap);
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--hig-fill2); background-clip: padding-box; }

/* =====================================================================
   22. 印刷（帳票は外観に関係なく白地・黒文字で出す）
   ===================================================================== */
@media print {
  :root {
    --hig-bg: #ffffff; --hig-bg-elev: #ffffff; --hig-bg-elev2: #ffffff; --hig-bar-bg: #ffffff;
    --hig-label: #000000; --hig-label2: #333333; --hig-label3: #666666;
    --hig-sep: #999999; --hig-sep-opaque: #999999;
    --hig-field-bg: #ffffff; --hig-field-fg: #000000; --hig-field-ro: #ffffff;
    --hig-fill: #eeeeee; --hig-fill2: #eeeeee; --hig-fill3: #f4f4f4; --hig-fill4: #fafafa;
    --hig-shadow-1: none; --hig-shadow-2: none;
  }
  html, body { background: #fff !important; color: #000 !important; }
  .topbar, .dev-banner, .appearance, .po-foot, .foot-actions, .pager { display: none !important; }
  table.list, table.portal, .po-fields, .search, .po-panel, .tab-panel { box-shadow: none; }
}

/* =====================================================================
   23. 染色進捗管理看板ボード（/dye-board）
   ---------------------------------------------------------------------
   FileMaker 実機の看板（緑地＋白カード）と «同じ操作» を HIG の外観で作る。
   ボードは号機ごとに «2列»（左=完了 / 右=生産中）。画面下は投入日ごとの
   カード置き場。移動はドラッグ&ドロップ（Pointer Events なので iPad の
   指でも同じコードで動く）とダブルタップ（同じ号機の左右入替）。

   主対象は iPad 第9世代 横向き（1080×810pt）。号機列は横スクロールさせ、
   カードとレーンの当たり判定は 44px 以上を保つ。
   ===================================================================== */
.kb-col-w { --kb-col: 420px; }

.kb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hig-sp-3);
  margin: 0 0 var(--hig-sp-3);
}
.kb-hint { color: var(--hig-label2); font-size: var(--hig-fs-footnote); }

/* ---- 号機の並び（横スクロール） ---- */
.kb-board {
  display: flex; gap: var(--hig-sp-3); align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  padding: 0 0 var(--hig-sp-3); margin: 0 0 var(--hig-sp-5);
  -webkit-overflow-scrolling: touch;
}
.kb-machine {
  flex: 0 0 auto; width: var(--kb-col, 300px);
  display: flex; flex-direction: column;
  background: var(--hig-bg-elev); border: 1px solid var(--hig-sep);
  border-radius: var(--hig-r-lg); overflow: hidden; box-shadow: var(--hig-shadow-1);
}
.kb-machine-head {
  padding: var(--hig-sp-2) var(--hig-sp-3);
  background: var(--hig-bar-bg); border-bottom: 1px solid var(--hig-sep);
}
.kb-machine-head .kb-code {
  font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-bold); color: var(--hig-label);
}
.kb-machine-head .kb-name {
  display: block; font-size: var(--hig-fs-footnote); color: var(--hig-label2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-lanes { display: grid; grid-template-columns: 1fr 1fr 1fr; flex: 1 1 auto; min-height: 0; }
.kb-lane { display: flex; flex-direction: column; min-width: 0; }
.kb-lane + .kb-lane { border-left: 1px solid var(--hig-sep); }
.kb-lane-head {
  padding: var(--hig-sp-1) var(--hig-sp-2); text-align: center;
  font-size: var(--hig-fs-footnote); font-weight: var(--hig-fw-semibold);
  border-bottom: 1px solid var(--hig-sep); color: var(--hig-label);
}
.kb-lane.done .kb-lane-head { background: color-mix(in srgb, var(--hig-green) 18%, var(--hig-bg-elev)); }
.kb-lane.wip  .kb-lane-head { background: color-mix(in srgb, var(--hig-orange) 20%, var(--hig-bg-elev)); }
/* 仮配置（焚く順の下準備。常に投入日順） */
.kb-lane.temp .kb-lane-head { background: color-mix(in srgb, var(--hig-purple) 18%, var(--hig-bg-elev)); }
.kb-lane.temp .kb-card { border-left-color: var(--hig-purple); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .kb-lane.done .kb-lane-head { background: var(--hig-fill4); border-bottom-color: var(--hig-green); }
  .kb-lane.wip  .kb-lane-head { background: var(--hig-fill4); border-bottom-color: var(--hig-orange); }
  .kb-lane.temp .kb-lane-head { background: var(--hig-fill4); border-bottom-color: var(--hig-purple); }
}

/* ---- 一番左の «未配分» 列（本日投入分が自動で載る。1列だけで完了レーンを持たない） ----
   号機を横スクロールしても左に残るよう sticky にする（iPad で号機が31列あっても届く） */
.kb-lanes-1 { grid-template-columns: 1fr; }
.kb-unassigned {
  position: sticky; left: 0; z-index: 2;
  border-color: var(--hig-cyan); box-shadow: var(--hig-shadow-2);
}
.kb-unassigned .kb-machine-head { border-bottom-color: var(--hig-cyan); }
.kb-unassigned .kb-lane.wip .kb-lane-head {
  background: color-mix(in srgb, var(--hig-cyan) 20%, var(--hig-bg-elev)); color: var(--hig-label);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .kb-unassigned .kb-lane.wip .kb-lane-head { background: var(--hig-fill4); border-bottom-color: var(--hig-cyan); }
}
.kb-unassigned .kb-lane.wip .kb-card { border-left-color: var(--hig-cyan); }

/* ---- カードを落とせる領域 ---- */
.kb-drop {
  flex: 1 1 auto; min-height: 220px; max-height: 52vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--hig-sp-2);
  padding: var(--hig-sp-2); background: var(--hig-bg-elev2);
}
.kb-drop.is-over { background: var(--hig-fill3); box-shadow: inset 0 0 0 2px var(--hig-accent); }
.kb-drop .kb-empty {
  margin: auto; color: var(--hig-label3); font-size: var(--hig-fs-footnote); text-align: center;
}

/* ---- カード ---- */
.kb-card {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--hig-bg-elev); border: 1px solid var(--hig-sep);
  border-left: 4px solid var(--hig-gray3);
  border-radius: var(--hig-r-md); padding: var(--hig-sp-2);
  box-shadow: var(--hig-shadow-1); color: var(--hig-label);
  font-family: var(--hig-font); font-size: var(--hig-fs-footnote); line-height: var(--hig-lh-tight);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.kb-lane.done .kb-card { border-left-color: var(--hig-green); }
/* 釜洗いカードは LOT カードと見分けが付くよう地色を変える（2026-08-18 渡辺課長ご回答の専用カード） */
.kb-card.is-kama { background: var(--hig-fill3); border-left-color: var(--hig-orange); }
.kb-card.is-kama .kb-lot { font-size: var(--hig-fs-callout); }
.kb-lane.wip  .kb-card { border-left-color: var(--hig-orange); }
.kb-card .kb-lot {
  display: block; font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-bold);
  letter-spacing: .02em; word-break: break-all;
}
.kb-card .kb-fields { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--hig-sp-2); margin: var(--hig-sp-1) 0 0; }
.kb-card .kb-fields dt { color: var(--hig-label2); font-size: var(--hig-fs-footnote); white-space: nowrap; }
.kb-card .kb-fields dd { margin: 0; font-size: var(--hig-fs-footnote); word-break: break-all; }
.kb-card .kb-off {
  position: absolute; top: 2px; right: 2px;
  min-width: var(--hig-hit-sm); min-height: var(--hig-hit-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--hig-label3); cursor: pointer;
  font-size: var(--hig-fs-callout); line-height: 1; border-radius: var(--hig-r-sm);
}
.kb-card .kb-off:hover { background: var(--hig-fill3); color: var(--hig-label); }
/* 反数はカードの先頭に太字で出す（号機の負荷を札の並びで見るため） */
.kb-card .kb-fields dd.kb-rolls { font-weight: var(--hig-fw-bold); }

/* ---- まとめてドラッグ：選択用の丸ボタン（左上）／選択中の目印 ---- */
.kb-card .kb-select {
  position: absolute; top: 2px; left: 2px;
  width: var(--hig-hit-sm); height: var(--hig-hit-sm);
  min-width: var(--hig-hit-sm); min-height: var(--hig-hit-sm);
  border: 2px solid var(--hig-sep); border-radius: 50%; background: var(--hig-bg-elev);
  cursor: pointer; padding: 0;
}
.kb-card .kb-select:hover { border-color: var(--hig-indigo); }
.kb-card.is-selected { box-shadow: 0 0 0 2px var(--hig-indigo), var(--hig-shadow-1); }
.kb-card.is-selected .kb-select {
  background: var(--hig-indigo); border-color: var(--hig-indigo);
}
.kb-card.is-selected .kb-select::after {
  content: ''; display: block; margin: 3px auto 0; width: 6px; height: 10px;
  border-right: 2px solid var(--hig-on-accent, #fff); border-bottom: 2px solid var(--hig-on-accent, #fff);
  transform: rotate(45deg) translate(-1px, -2px);
}
.kb-card.is-group-hidden { display: none; }
.kb-group-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--hig-r-cap);
  background: var(--hig-indigo); color: var(--hig-on-accent, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--hig-fs-footnote); font-weight: var(--hig-fw-bold);
}

/* ---- まとめてドラッグ中の操作バー ---- */
.kb-selectbar {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 75; display: flex; flex-wrap: wrap; max-width: 92vw;
  align-items: center; gap: var(--hig-sp-3);
  padding: var(--hig-sp-2) var(--hig-sp-4); border-radius: var(--hig-r-cap);
  background: color-mix(in srgb, var(--hig-indigo) 14%, var(--hig-bg-elev));
  border: 1px solid var(--hig-indigo); font-weight: var(--hig-fw-semibold);
  box-shadow: var(--hig-shadow-2);
}
.kb-selectbar[hidden] { display: none; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .kb-selectbar { background: var(--hig-bg-elev); }
}

/* 指定検索（同品番・同カラー）に当たった札の目印。ボード上は消さずに目立たせる */
.kb-card.is-hit {
  box-shadow: 0 0 0 2px var(--hig-accent), var(--hig-shadow-1);
  background: color-mix(in srgb, var(--hig-accent) 8%, var(--hig-bg-elev));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .kb-card.is-hit { background: var(--hig-bg-elev); }
}
.kb-hit-legend {
  display: inline-block; padding: 0 var(--hig-sp-1); border-radius: var(--hig-r-sm);
  box-shadow: 0 0 0 2px var(--hig-accent); font-weight: var(--hig-fw-semibold);
}

.kb-card.is-ghost { opacity: .35; }
.kb-card.is-flying {
  position: fixed; z-index: 60; width: auto; pointer-events: none;
  box-shadow: var(--hig-shadow-2); cursor: grabbing;
  transform: rotate(-1.5deg);
}
.kb-card.is-landed { box-shadow: 0 0 0 2px var(--hig-accent), var(--hig-shadow-1); }

/* ---- 画面下のカード置き場（投入日ごと） ---- */
.kb-pool { margin: 0 0 var(--hig-sp-6); }
.kb-pool-head {
  display: flex; align-items: baseline; gap: var(--hig-sp-3);
  margin: 0 0 var(--hig-sp-2);
}
.kb-day {
  border: 1px solid var(--hig-sep); border-radius: var(--hig-r-lg);
  background: var(--hig-bg-elev); margin: 0 0 var(--hig-sp-3); overflow: hidden;
}
.kb-day-head {
  display: flex; align-items: center; gap: var(--hig-sp-2);
  padding: var(--hig-sp-2) var(--hig-sp-3);
  background: var(--hig-bar-bg); border-bottom: 1px solid var(--hig-sep);
  font-size: var(--hig-fs-headline); font-weight: var(--hig-fw-semibold);
}
.kb-pool-drop {
  flex-direction: row; flex-wrap: wrap; align-content: flex-start;
  min-height: 96px; max-height: none;
}
.kb-pool-drop .kb-card { width: 208px; flex: 0 0 208px; border-left-color: var(--hig-cyan); }
/* 置き場のカードは「戻す」対象が無いので ✕ を出さない */
.kb-pool-drop .kb-card .kb-off { display: none; }

/* ---- 完了履歴（日ごと）の日付ナビ ---- */
.kb-done-days {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hig-sp-2);
  margin: 0 0 var(--hig-sp-3);
}
.kb-done-days .n {
  display: inline-block; margin-left: var(--hig-sp-1); padding: 0 var(--hig-sp-1);
  background: var(--hig-fill3); border-radius: var(--hig-r-sm);
  font-size: var(--hig-fs-footnote); color: var(--hig-label2);
}
.kb-done-days .btn-primary .n { background: var(--hig-fill4); color: inherit; }

/* ---- 移動コメント（トースト） ---- */
.kb-toasts {
  position: fixed; left: 50%; bottom: var(--hig-sp-5); transform: translateX(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: var(--hig-sp-2);
  align-items: center; pointer-events: none; width: max-content; max-width: 92vw;
}
.kb-toast {
  display: flex; align-items: center; gap: var(--hig-sp-2);
  padding: var(--hig-sp-3) var(--hig-sp-5); border-radius: var(--hig-r-cap);
  background: var(--hig-label); color: var(--hig-bg-elev);
  font-size: var(--hig-fs-callout); font-weight: var(--hig-fw-semibold);
  box-shadow: var(--hig-shadow-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--hig-dur) var(--hig-ease), transform var(--hig-dur) var(--hig-ease);
}
.kb-toast.show { opacity: 1; transform: translateY(0); }
.kb-toast.ng { background: var(--hig-red-fill); color: var(--hig-on-accent); }

/* ---- カードの中身（タップで開く詳細モーダル） ---- */
.kb-modal-overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .4); padding: var(--hig-sp-4);
}
.kb-modal-overlay[hidden] { display: none; }
.kb-modal {
  width: min(420px, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--hig-bg-elev); border-radius: var(--hig-r-lg); box-shadow: var(--hig-shadow-2);
  padding: var(--hig-sp-4);
}
.kb-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hig-sp-3);
  margin: 0 0 var(--hig-sp-3);
}
.kb-modal-head h2 { margin: 0; font-size: var(--hig-fs-title3); }
.kb-modal-fields {
  display: grid; grid-template-columns: auto 1fr; gap: var(--hig-sp-2) var(--hig-sp-3); margin: 0;
}
.kb-modal-fields dt { color: var(--hig-label2); white-space: nowrap; }
.kb-modal-fields dd { margin: 0; word-break: break-all; }

/* ---- 全体表示（カードを縮小して全号機を一目で。項目は Lot No.＋反数のみ） ---- */
.kb-board.kb-compact { gap: var(--hig-sp-2); }
.kb-board.kb-compact .kb-machine { width: 168px; }
/* 全体表示は «どの釜に予定があるか» を見るのが目的。カードの文字は小さくてよいが
   号機名は大きく出す（2026-08-18 渡辺課長ご回答）。 */
.kb-board.kb-compact .kb-machine-head { padding: var(--hig-sp-1) var(--hig-sp-2); }
.kb-board.kb-compact .kb-machine-head .kb-code { font-size: var(--hig-fs-title3, 20px); font-weight: var(--hig-fw-bold, 700); }
.kb-board.kb-compact .kb-machine-head .kb-name { font-size: var(--hig-fs-callout, 16px); font-weight: var(--hig-fw-semibold, 600); }
.kb-board.kb-compact .kb-lane-head { padding: 2px var(--hig-sp-1); font-size: var(--hig-fs-caption, 12px); }
.kb-board.kb-compact .kb-drop { padding: var(--hig-sp-1); gap: var(--hig-sp-1); min-height: 120px; }
.kb-board.kb-compact .kb-card { padding: var(--hig-sp-1); }
.kb-board.kb-compact .kb-card .kb-lot { font-size: var(--hig-fs-footnote); }
.kb-board.kb-compact .kb-card .kb-fields dt,
.kb-board.kb-compact .kb-card .kb-fields dd:not(.kb-rolls) { display: none; }
.kb-board.kb-compact .kb-card .kb-fields dt:first-of-type,
.kb-board.kb-compact .kb-card .kb-fields dd.kb-rolls { display: block; }

/* iPad 第9世代 横向き(1080pt)より狭い端末では号機列を詰める */
@media (max-width: 900px) {
  .kb-col-w { --kb-col: 300px; }
  .kb-pool-drop .kb-card { width: 176px; flex: 0 0 176px; }
}

/* =====================================================================
   24. 文字サイズの下限を守るための最終上書き
   style.css（旧シート）や個別画面が 11〜13px を指定している箇所を
   本システムの下限 14px（--hig-fs-footnote）に引き上げる。
   ===================================================================== */
.topbar .logout, .topbar-lang, .topbar-lang a,
.dev-banner, .dev-banner .dev-switch, .dev-banner .dev-hint,
.tile .tile-sub, .tile-master .tile-sub, .sec-tile small,
.count, .pager-info, .badge, .chip, .status-pill, .sm-shares-note {
  font-size: var(--hig-fs-footnote);
}