/* ============================================================
   配色・影・角丸・基準の文字サイズ。**ここだけは全画面に効く。**
   値を変えると顧客画面・管理画面・運営コンソールの全部が変わる。

   2026-08-16: style.css（867行）を画面ごとに分けたもの。読み込む順は
   index.html / operator.html の <link> の並びが正で、その順に連結すると
   元の style.css と同じ適用順になる。順番を入れ替えないこと。
   ============================================================ */
/* ============================================================
   Tokens. LPと同じライトテーマのみを使う（2026-08-14: ダークモードは
   廃止。LP・ログイン画面はもともとダークを持たず、そちらとブランドが
   割れるため）。
   ============================================================ */
:root{
  --paper:#F2F4F7;        /* app ground, cool grey biased to the navy accent —
                              採ったのはトリマくん本体の紺（#204888系）。旧配色の
                              暖色クリーム＋オレンジはAI生成デザインの定番配色と
                              一致していたため、ログイン画面に続き全画面で差し替えた
                              （2026-08-13 指摘）。 */
  --card:#FFFFFF;
  --card-2:#F7F9FB;
  --ink:#1B2430;
  --ink-2:#48566A;
  --ink-3:#5E6C80;
  --line:#D8DEE6;
  --line-2:#E4E9EF;
  --accent:#1E4C8C;       /* primary action. トリマくん本体の紺 */
  --accent-soft:#DCE7F6;
  --accent-ink:#123566;   /* the same navy, dark enough to set text in */
  --teal:#1E6B72;         /* data / systems */
  --teal-soft:#DCEAEB;
  --amber:#8A6414;        /* attention, decisions */
  --amber-soft:#F7ECD6;
  --clay:#9A3A2A;         /* rework, destructive */
  --clay-soft:#F6E1DD;
  --green:#2C6E4E;
  --green-soft:#DCEAE1;
  --focus:#1E4C8C;
  --on-accent:#FFFFFF;    /* text on a navy fill */
  --on-green:#FFFFFF;
  --control-line:#8494A8;
  --shadow-up:0 -2px 4px rgba(20,30,45,.06), 0 -8px 24px rgba(20,30,45,.06);
  --shadow:0 1px 2px rgba(20,30,45,.06), 0 8px 24px rgba(20,30,45,.07);
  --shadow-lg:0 2px 4px rgba(20,30,45,.09), 0 18px 40px rgba(20,30,45,.12);
  --radius:8px;
  --base:17px;

  /* --- レイアウト（2026-08-16 のリサーチで確定。推測で変えない） -----------
     **同じ値を2か所に書かない。**ここを直せば全画面に効く。
     以前 max-width:1180px が shared と user の4か所に散っていて、
     3セッションが並行で触ると必ず別々に直されて割れる形だった。 */
  --wrap-max:1584px;      /* アプリの一般コンテンツの最大幅（Carbon 2x Grid の最大）。
                             設計の基準幅は 1519px＝1920を125%表示したときの実効幅で、
                             日本のデスクトップで2番目に多い環境 */
  --gutter:clamp(1rem, 4vw, 3rem);   /* 左右の余白 */
  --sidebar-w:240px;      /* 管理画面のサイドバー（展開時） */
  --rail-w:56px;          /* 同（畳んだとき） */
  --text-max:40em;        /* 日本語の本文の行長。JLReq「横組みは最大40字」 */

  /* --- ブレークポイント（**768 / 1024 / 1200 の3つだけ**） ---------------
     CSS 変数は @media の中では使えないので、各画面の CSS には数値を直接書く。
     ここは「正はこの3つ」という記録。**逸脱は tests_css_breakpoints.py が落とす。**

     **1280 / 1366 / 1440 / 1536 には絶対に置かないこと。**
     これらは実機の頻出 CSS 幅そのもので、スクロールバー15〜17pxを引いた実効幅は
     1263 / 1349 / 1423 / 1519 になる。境界をその値ちょうどに置くと、
     **狙った機種が必ず1段下のレイアウトに落ちる。**
     「PCによって崩れる」の正体はほぼこれ（Tailwind 既定の 2xl:1536px が最悪の位置）。 */
  --bp-md:768px;          /* 1カラム → 2カラム */
  --bp-lg:1024px;         /* サイドバーを常設にする／下回るとオーバーレイ */
  --bp-xl:1200px;         /* 3カラム化・余白拡大 */
}