/* ============================================================================
   edo-theme.css — KOKOROAMU 江戸の街テーマ（共通スタイル）
   版: v0.1 / 2026-08-05
   正本の位置づけ: docs/edo-theme.md
   ----------------------------------------------------------------------------
   由来:
     kokoroamu.com の世界観「江戸の街に、見世、工房、往来、帳場、番所が
     あったように」に基づく。SAKU Builder（tools/saku-builder.html）で先に
     実装し、他の道具へ展開できるよう本ファイルへ切り出した。

   使い方（3層。必要な層だけ取り込む）:
     第1層 トークン  :root の CSS変数。これだけ取り込めば配色は揃う。
     第2層 意匠      .edo-* の飾り（暖簾・青海波・木札・小判・帳場・番所）。
     第3層 素体      .edo-scope の中でだけ効く入力欄・ボタンの既定形。

   衝突しない設計:
     - 素の要素セレクタ（body, input, button 等）を単独では使わない。
       第3層はすべて .edo-scope の子孫に限定してある。
     - クラス名はすべて edo- 接頭辞。既存ツールの class と衝突しない。
     - したがって、既存HTMLに <link> を足しただけでは何も壊れない。
       壊れないかわりに、何も適用されない。適用したい範囲に class を付ける。

   注意:
     SAKU Builder は「オフライン単一HTML」の方針を維持するため、
     本ファイルを <link> していない。同じ値を自前の <style> に持っている。
     二重管理になるため、値がずれていないことを機械で検査する:
         python3 scripts/check_edo_theme.py     # exit=0
     トークンを足す・変える時は、必ず両方を直してから上記を通すこと。

   書体:
     Shippori Mincho B1 / Noto Sans JP を前提とする。CDNに届かない環境では
     OS の明朝・ゴシックへ落ちる。読み込みは各ツール側で行う:
     <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700&family=Noto+Serif+JP:wght@300;500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
   ========================================================================== */

/* ---------------------------------------------------------------------------
   第1層：トークン（和色）
   SAKU Builder の :root と同一。追加・変更は check_edo_theme.py の検査対象。
   ------------------------------------------------------------------------- */
:root{
  --washi:#EFE7D6;           /* 生成り（地） */
  --ground:#EFE7D6;
  --surface:#FAF5EA;         /* 胡粉（紙面） */
  --surface-2:#F0E8D8;       /* 一段沈めた紙 */
  --ink:#1B1A16;             /* 墨 */
  --muted:#57503F;           /* 煤竹 */
  --faint:#8A8069;           /* 利休白茶 */
  --hair:#D9CFB8;
  --hair-strong:#C0B398;
  --sumi:#141C26;            /* 藍墨茶（帳場の地） */
  --sumi-text:#EFE7D6;
  --sumi-faint:#98917F;
  --ai:#1F3B5C;              /* 藍 */
  --ai-deep:#12253A;         /* 濃藍 */
  --accent:#1F3B5C;          /* ＝藍。経年カラーで変化 */
  --accent-soft:#1f3b5c1f;
  --beni:#9C3A2B;            /* 弁柄 */
  --danger:#9C3A2B;
  --kincha:#B5842F;          /* 金茶 */
  --code-key:#8FC3AC;        /* 帳場：鍵（YAMLのキー） */
  --code-comment:#6B7484;    /* 帳場：注 */
  --code-str:#DCC79B;        /* 帳場：文字列 */
  --code-bool:#C98A63;       /* 帳場：真偽 */
  --ok:#6EA886;              /* 番所：通す */
  --stop:#B06A53;            /* 番所：止める */
  --serif:"Shippori Mincho B1","Noto Serif JP",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* 役割の対応（迷ったときの指針）
   ├ 藍   --ai        構造・仕切り・見出し。最も多く使う色
   ├ 弁柄 --beni      必須・不合格・削除・停止。危険側にだけ使う
   ├ 金茶 --kincha    人間（席8）・主要操作。人の手が要る所にだけ使う
   ├ 生成り/胡粉      地と紙。面はこの2色で足りる
   └ 墨   --ink       本文。補助は --muted、注記は --faint
   金茶を装飾で薄めないこと。人間席の識別が効かなくなる。 */

/* ---------------------------------------------------------------------------
   第2層：意匠
   ------------------------------------------------------------------------- */

/* 暖簾（見世の入口）。ヘッダの地に使う */
.edo-noren{
  background-color:var(--ai-deep);
  color:var(--sumi-text);
}
/* 暖簾の裾。ヘッダ直下に高さのある空要素として置く */
.edo-noren-hem{
  height:22px;width:100%;background:var(--ai);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 76px,transparent 76px 82px);
          mask:repeating-linear-gradient(90deg,#000 0 76px,transparent 76px 82px);
  box-shadow:inset 0 6px 10px #0000002e;
}

/* 青海波（地紋）。濃い面に重ねる */
.edo-seigaiha{
  background-image:
    radial-gradient(circle at 50% 100%, transparent 13px, #ffffff0f 13px 14px, transparent 14px),
    radial-gradient(circle at 50% 100%, transparent 21px, #ffffff0d 21px 22px, transparent 22px),
    radial-gradient(circle at 50% 100%, transparent 29px, #ffffff0a 29px 30px, transparent 30px);
  background-size:64px 32px;
}
/* 明るい面に重ねる場合 */
.edo-seigaiha-light{
  background-image:
    radial-gradient(circle at 50% 100%, transparent 13px, #1f3b5c14 13px 14px, transparent 14px),
    radial-gradient(circle at 50% 100%, transparent 21px, #1f3b5c10 21px 22px, transparent 22px),
    radial-gradient(circle at 50% 100%, transparent 29px, #1f3b5c0c 29px 30px, transparent 30px);
  background-size:64px 32px;
}

/* 和紙の地合い。body 相当の面に */
.edo-washi{
  background-color:var(--washi);
  background-image:
    radial-gradient(circle at 20% 30%, #00000005 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #00000004 0 1px, transparent 1px);
  background-size:11px 11px,17px 17px;
}

/* 木札（章番号・区分などの短い標） */
.edo-fuda{
  display:inline-block;font-family:var(--serif);font-weight:700;font-size:14px;
  line-height:1;color:var(--surface);background:var(--ai);
  padding:7px 8px 8px;min-width:2em;text-align:center;
  border-radius:3px 3px 2px 2px;box-shadow:0 1px 0 #00000026;letter-spacing:0;
}
.edo-fuda.is-human{background:var(--kincha);color:var(--ink)}
.edo-fuda.is-stop{background:var(--beni);color:var(--surface)}

/* 看板（見出しに添える和名。装飾であり定義ではない） */
.edo-kanban{
  font-family:var(--serif);font-size:12px;font-weight:500;color:var(--beni);
  letter-spacing:.14em;white-space:nowrap;
}

/* 見出し（木札＋題＋看板を横に並べる） */
.edo-heading{
  font-family:var(--serif);font-weight:600;font-size:21px;margin:0 0 6px;
  display:flex;align-items:center;gap:12px;letter-spacing:.03em;color:var(--ink);
}
.edo-note{
  font-family:var(--sans);font-size:12.5px;color:var(--faint);margin:0 0 18px;
  border-left:2px solid var(--hair);padding:1px 0 1px 10px;
}

/* 小判の札（選んで貼るもの） */
.edo-koban{
  display:inline-block;font-family:var(--sans);font-size:11.5px;padding:3px 11px;
  border:1px solid var(--hair-strong);border-radius:999px;background:var(--surface);
  color:var(--ink);cursor:pointer;margin:0 6px 6px 0;
  transition:border-color .15s,color .15s,background .15s;
}
.edo-koban:hover{border-color:var(--kincha);color:var(--beni);background:#FFFDF6}

/* 帳面の行（書き足していく記録） */
.edo-gyo{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--hair);
  border-left:3px solid var(--hair-strong);border-radius:2px;padding:7px 9px;
  font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink);
}

/* 千鳥の区切り線 */
.edo-rule{
  border:0;height:1px;margin:34px 0 0;
  background:repeating-linear-gradient(90deg,var(--hair-strong) 0 7px,transparent 7px 13px);
}

/* 帳場（出力・記録の面。行灯の灯りを上端に落とす） */
.edo-choba{
  background-color:var(--sumi);color:var(--sumi-text);
  background-image:radial-gradient(120% 60% at 50% -18%, #b5842f26 0%, transparent 62%);
}
.edo-choba pre,.edo-choba code{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--sumi-text);
}
.edo-choba .edo-k{color:var(--code-key)}
.edo-choba .edo-c{color:var(--code-comment)}
.edo-choba .edo-s{color:var(--code-str)}
.edo-choba .edo-b{color:var(--code-bool)}

/* 木札のつまみ（帳場の切替） */
.edo-tab{
  font-family:var(--sans);font-size:11.5px;font-weight:500;cursor:pointer;
  padding:5px 11px 4px;border:1px solid #ffffff1f;border-radius:3px 3px 0 0;
  background:transparent;color:var(--sumi-faint);border-bottom:none;
  display:inline-flex;align-items:baseline;gap:6px;line-height:1.4;
}
.edo-tab .edo-tab-jp{
  font-family:var(--serif);font-style:normal;font-size:10.5px;
  letter-spacing:.1em;color:#8A7F66;
}
.edo-tab.is-on{background:#ffffff14;color:var(--sumi-text);border-color:var(--sumi-faint)}
.edo-tab.is-on .edo-tab-jp{color:var(--kincha)}

/* 番所（検査の報せ。通す／止める） */
.edo-bansho{
  font-family:var(--sans);font-size:12px;color:var(--sumi-faint);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 20px;
  border-top:1px solid #0b1119;
}
.edo-bansho .edo-hi{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--stop);box-shadow:0 0 0 3px #b06a5326;
}
.edo-bansho.is-ok{color:#93BDA6}
.edo-bansho.is-ok .edo-hi{background:var(--ok);box-shadow:0 0 0 3px #6ea88626}

/* 席（表と裏）。人間席は必ず見分けがつくこと */
.edo-seat{
  border:1px solid var(--hair);border-radius:2px;background:var(--surface);
  padding:14px 15px;margin:0 0 12px;box-shadow:0 1px 0 #0000000d;
}
.edo-seat .edo-seat-no{
  font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ai);
  letter-spacing:.08em;min-width:40px;display:inline-block;
}
/* 席8（人間）。破線＋金茶。
   規格書§8「人間席をAIで埋めない」に対応する視覚上の区別であり、
   一目で他の席と違って見えること自体が安全設計の一部である。
   配色統一を理由にこの区別を消さないこと。 */
.edo-seat.is-human{background:var(--surface-2);border:1px dashed var(--kincha)}
.edo-seat.is-human .edo-seat-no{color:var(--kincha)}

/* 印（区分・状態の小さな標） */
.edo-badge{
  font-family:var(--serif);font-size:10.5px;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--hair-strong);border-radius:99px;padding:2px 9px;
}
.edo-badge.is-human{color:var(--beni);border-color:var(--kincha)}

/* お品書き（道具の並ぶ棚） */
.edo-shinagaki{
  padding:14px 28px;border-bottom:1px solid var(--hair);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(#F7F0E2,#F1E8D6);
  box-shadow:inset 0 -1px 0 #ffffff80;
}
.edo-shinagaki-title{
  font-family:var(--serif);font-size:12px;font-weight:600;color:var(--ai);
  letter-spacing:.28em;padding-right:12px;border-right:1px solid var(--hair-strong);
}

/* 報せ（一時表示） */
.edo-toast{
  background:var(--sumi);color:var(--sumi-text);font-family:var(--sans);font-size:13px;
  padding:11px 20px;border-radius:2px;border-left:3px solid var(--kincha);
}

/* ---------------------------------------------------------------------------
   第3層：素体（.edo-scope の中でだけ効く）
   既存ツールの見た目を壊さないため、素の要素セレクタは必ず .edo-scope 配下に置く。
   ------------------------------------------------------------------------- */
.edo-scope{
  font-family:var(--sans);font-weight:400;line-height:1.7;
  letter-spacing:.01em;color:var(--ink);
}
.edo-scope h1,.edo-scope h2,.edo-scope h3{
  font-family:var(--serif);font-weight:600;letter-spacing:.03em;
}
.edo-scope a{color:var(--ai)}
.edo-scope code{
  font-family:var(--mono);font-size:.92em;background:var(--surface-2);
  padding:1px 5px;border-radius:2px;
}
.edo-scope label{
  display:block;font-size:12.5px;font-weight:500;color:var(--muted);
  margin:0 0 6px;letter-spacing:.04em;
}
.edo-scope input[type=text],
.edo-scope select,
.edo-scope textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:2px;
  padding:9px 11px;transition:border-color .15s,box-shadow .15s;
}
.edo-scope textarea{min-height:66px;resize:vertical;line-height:1.6}
.edo-scope input:focus,
.edo-scope select:focus,
.edo-scope textarea:focus{
  outline:none;border-color:var(--ai);box-shadow:0 0 0 3px var(--accent-soft);
}
.edo-scope select{
  appearance:none;background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px;
}
.edo-scope button,
.edo-btn{
  font-family:var(--serif);font-size:12.5px;font-weight:500;cursor:pointer;
  background:linear-gradient(#FCF8EF,#F1E9D8);color:var(--ink);
  border:1px solid var(--hair-strong);border-radius:2px;padding:8px 15px;
  white-space:nowrap;letter-spacing:.06em;box-shadow:0 1px 0 #00000012;
  transition:background .15s,border-color .15s,color .15s;
}
.edo-scope button:hover,
.edo-btn:hover{
  background:linear-gradient(#FFFDF7,#F6EEDD);border-color:var(--ai);color:var(--ai);
}
.edo-btn.is-primary{background:var(--kincha);border-color:var(--kincha);color:var(--ink)}
.edo-btn.is-primary:hover{filter:brightness(1.1);color:var(--ink)}
.edo-scope table{width:100%;border-collapse:collapse;font-size:12.5px}
.edo-scope th,.edo-scope td{
  border:1px solid var(--hair);padding:6px 8px;text-align:left;vertical-align:top;
}
.edo-scope th{
  background:var(--surface-2);font-weight:500;font-family:var(--serif);letter-spacing:.06em;
}

/* ---------------------------------------------------------------------------
   動きを減らす設定への配慮
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .edo-koban,.edo-btn,.edo-scope button,
  .edo-scope input,.edo-scope select,.edo-scope textarea{transition:none}
}

/* --- 検証所（trust-site）で使う追加分 --- */
.weave{
  height:18px;width:100%;background:var(--ai);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 76px,transparent 76px 82px);
          mask:repeating-linear-gradient(90deg,#000 0 76px,transparent 76px 82px);
  box-shadow:inset 0 6px 10px #0000002e;
}