@charset "utf-8";
/* =====================================================================
   受発注フローのデモ — design.css
   トップページ（public/index.html）と同じ家族のトーン：
   灰緑の紙・白い面・深緑のアクセント／Zen Kaku Gothic New・Barlow Condensed・M PLUS 1 Code
   ---------------------------------------------------------------------
   0. トークン（ライト → ダーク上書き ×2）
   1. 土台・共通部品（ボタン・状態チップ・フラグ・フォーム・表・メーター）
   2. 上部バー／見出し／止まる条件のカード
   3. 6工程の流れ図
   4. 作業エリア（工程画面）
   5. 右カラム（裏で動くこと・処理ログのタイムライン）
   6. トースト・空の表示・フッター
   7. 動きを減らす設定
   8. 見本ページ専用（mock- で始まるクラス。本番では不要）
   ===================================================================== */

/* ---------- 0. トークン ---------- */
:root{
  color-scheme:light;

  /* 面 */
  --paper:#F1F3F2;
  --panel:#FFFFFF;
  --panel-2:#F7F9F8;
  --sunk:#E6EAE8;

  /* 文字（ink-3 はトップページより一段濃くして白・紙の上で AA を確保） */
  --ink:#182220;
  --ink-2:#465250;
  --ink-3:#5C6964;

  /* 線（line-strong は入力欄など「形が分からないと困る線」用。白地で 3:1 以上） */
  --line:#D0D8D5;
  --line-soft:#E2E7E5;
  --line-strong:#83918C;

  /* 色：緑＝流れ・完了、青＝承認待ち、琥珀＝保留、赤茶＝差し戻し */
  --green:#1A6B54;   --green-ink:#12513F; --green-bg:#E3EFEB; --green-line:#8DBFAE; --on-green:#FFFFFF;
  --blue:#2C5F8A;    --blue-ink:#234E71;  --blue-bg:#E3EBF2;  --blue-line:#9DB7CF;  --on-blue:#FFFFFF;
  --amber:#7A5A14;   --amber-ink:#6B4F10; --amber-bg:#F5EEDF; --amber-line:#B8914A;
  --rose:#A33A3E;    --rose-ink:#8E2F33;  --rose-bg:#F7E6E6;  --rose-line:#D9A1A3;  --on-rose:#FFFFFF;

  --rail:var(--green);
  --focus:var(--green);
  --hatch:rgba(255,255,255,.5);

  /* トースト（地の反転色の上に乗る差し色） */
  --toast-bg:#182220; --toast-fg:#F1F3F2;
  --toast-wait:#9CC4E8; --toast-hold:#D9B676; --toast-back:#EDA2A5; --toast-done:#8BD7B9;

  --shadow:0 1px 2px rgba(24,34,32,.05),0 14px 32px -24px rgba(24,34,32,.55);
  --shadow-lift:0 1px 2px rgba(24,34,32,.08),0 12px 24px -16px rgba(24,34,32,.5);

  /* 書体 */
  --lat:"Barlow Condensed","Zen Kaku Gothic New",sans-serif;
  --jp:"Zen Kaku Gothic New","Yu Gothic UI","Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"M PLUS 1 Code","SFMono-Regular",Consolas,monospace;

  /* 角丸は3段だけ。丸くしすぎない */
  --r-s:3px; --r:4px; --r-l:6px;

  /* セレクトの矢印（背景画像なので色はテーマごとに持つ） */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23465250' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* 状態アイコン（mask で currentColor に塗る。色だけに頼らず形でも区別する） */
  --i-wait:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M8 4.7v3.6l2.3 1.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-hold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.2' y='2.8' width='3.3' height='10.4' rx='.7'/%3E%3Crect x='9.5' y='2.8' width='3.3' height='10.4' rx='.7'/%3E%3C/svg%3E");
  --i-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.8 2.6 2.3 6.1l3.5 3.5M2.8 6.1h6.7a3.9 3.9 0 0 1 0 7.8H7.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6 6.4 12l6.8-7.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-todo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-dasharray='2.4 2.2'/%3E%3C/svg%3E");
  --i-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8 15 14H1z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.9' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3C/svg%3E");
  --i-reset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 5.6A5.3 5.3 0 1 1 2.8 9.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M2.5 2.4v3.7h3.7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-code:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 4 1.8 8l3.7 4M10.5 4l3.7 4-3.7 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6 6.4 12l6.8-7.8' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#101514; --panel:#191F1E; --panel-2:#202826; --sunk:#262F2D;
    --ink:#E5EAE8; --ink-2:#B3BEBA; --ink-3:#95A29D;
    --line:#2F3A37; --line-soft:#26302E; --line-strong:#6B7974;
    --green:#65C09F; --green-ink:#8BD7B9; --green-bg:#133329; --green-line:#2F6E58; --on-green:#0B1F18;
    --blue:#80AED9;  --blue-ink:#A4C8EA;  --blue-bg:#1A2A38;  --blue-line:#3D5E7D;  --on-blue:#0D1A26;
    --amber:#D6B26F; --amber-ink:#E2C286; --amber-bg:#2D2719; --amber-line:#8A7038;
    --rose:#E8979A;  --rose-ink:#F0AEB0;  --rose-bg:#351F21;  --rose-line:#7F4447;  --on-rose:#2A0F11;
    --hatch:rgba(0,0,0,.35);
    --toast-bg:#E5EAE8; --toast-fg:#101514;
    --toast-wait:#2C5F8A; --toast-hold:#7A5A14; --toast-back:#A33A3E; --toast-done:#1A6B54;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 32px -24px rgba(0,0,0,.95);
    --shadow-lift:0 1px 2px rgba(0,0,0,.55),0 12px 24px -16px rgba(0,0,0,.9);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23B3BEBA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-check-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6 6.4 12l6.8-7.8' fill='none' stroke='%230B1F18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#101514; --panel:#191F1E; --panel-2:#202826; --sunk:#262F2D;
  --ink:#E5EAE8; --ink-2:#B3BEBA; --ink-3:#95A29D;
  --line:#2F3A37; --line-soft:#26302E; --line-strong:#6B7974;
  --green:#65C09F; --green-ink:#8BD7B9; --green-bg:#133329; --green-line:#2F6E58; --on-green:#0B1F18;
  --blue:#80AED9;  --blue-ink:#A4C8EA;  --blue-bg:#1A2A38;  --blue-line:#3D5E7D;  --on-blue:#0D1A26;
  --amber:#D6B26F; --amber-ink:#E2C286; --amber-bg:#2D2719; --amber-line:#8A7038;
  --rose:#E8979A;  --rose-ink:#F0AEB0;  --rose-bg:#351F21;  --rose-line:#7F4447;  --on-rose:#2A0F11;
  --hatch:rgba(0,0,0,.35);
  --toast-bg:#E5EAE8; --toast-fg:#101514;
  --toast-wait:#2C5F8A; --toast-hold:#7A5A14; --toast-back:#A33A3E; --toast-done:#1A6B54;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 32px -24px rgba(0,0,0,.95);
  --shadow-lift:0 1px 2px rgba(0,0,0,.55),0 12px 24px -16px rgba(0,0,0,.9);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23B3BEBA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6 6.4 12l6.8-7.8' fill='none' stroke='%230B1F18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 1. 土台・共通部品 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:var(--green-ink);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-s)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px 88px}
@media (max-width:560px){.wrap{padding-left:16px;padding-right:16px}}

/* 小見出しラベル（トップページの .sec-l と同じ語法） */
.sec-l{display:block;font-family:var(--lat);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* 数字 */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;color:var(--ink)}
.id{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* アイコン（mask で currentColor） */
.ico{display:inline-block;flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-reset{--ico:var(--i-reset)} .ico-code{--ico:var(--i-code)} .ico-arrow{--ico:var(--i-arrow)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:7px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink);font-size:14px;font-weight:700;line-height:1.35;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.btn:hover{border-color:var(--ink)}
.btn.is-primary{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn.is-primary:hover{background:var(--green-ink);border-color:var(--green-ink)}
.btn.is-danger{color:var(--rose-ink);border-color:var(--rose-line)}
.btn.is-danger:hover{background:var(--rose-bg);border-color:var(--rose)}
.btn.is-quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.is-quiet:hover{color:var(--ink);background:var(--sunk)}
.btn.is-sm{min-height:34px;padding:4px 12px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* 状態チップ：色 × 記号 × 塗り方 の3つで区別する
   is-wait 承認待ち ＝ 時計・枠だけ（まだ）
   is-hold 保留     ＝ 一時停止・淡い塗り＋枠（人の確認待ち）
   is-back 差し戻し ＝ 戻る矢印・濃い塗り（いちばん目立つ）
   is-done 承認済・照合済 ＝ チェック・淡い塗り（終わったものは静かに）
   is-todo 未照合など ＝ 点線の丸・点線枠
   （状態なし）    ＝ 施工中・送信など中立の表示 */
.chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:1px 8px 1px 7px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--sunk);color:var(--ink-2);font-family:var(--jp);font-size:12.5px;font-weight:700;line-height:1.6;white-space:nowrap;vertical-align:middle}
.chip::before{content:"";display:none;flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.chip.is-wait::before,.chip.is-hold::before,.chip.is-back::before,.chip.is-done::before,.chip.is-todo::before{display:block}
.chip.is-wait{--ico:var(--i-wait);background:transparent;border-color:var(--blue);color:var(--blue-ink)}
.chip.is-hold{--ico:var(--i-hold);background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.chip.is-back{--ico:var(--i-back);background:var(--rose);border-color:var(--rose);color:var(--on-rose)}
.chip.is-done{--ico:var(--i-done);background:var(--green-bg);border-color:var(--green-line);color:var(--green-ink)}
.chip.is-todo{--ico:var(--i-todo);background:transparent;border-style:dashed;border-color:var(--line-strong);color:var(--ink-2)}
.chip.is-sm{font-size:11.5px;padding:0 6px 0 5px;gap:4px}
.chip.is-sm::before{width:11px;height:11px}
.chip b{font-family:var(--lat);font-size:1.15em;font-weight:700;font-variant-numeric:tabular-nums}

/* フラグ（状態ではなく「注意書き」：予算超過・90%超など） */
.flag{display:inline-flex;align-items:center;gap:4px;padding:0 6px 0 5px;border:1px solid var(--rose-line);border-radius:var(--r-s);color:var(--rose-ink);font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap;vertical-align:middle}
.flag::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat}
.flag.is-warn{border-color:var(--amber-line);color:var(--amber-ink)}
.flag.is-sm{font-size:11.5px}

/* 「あなたの番」 */
.turn{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-radius:var(--r-s);background:var(--blue);color:var(--on-blue);font-size:12px;font-weight:700;line-height:1.75;white-space:nowrap}

/* フォーム */
.form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:14px 14px;padding:18px;margin:0 0 20px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-l)}
.form > *{min-width:0}
.fld{grid-column:span 2}
.fld.is-wide{grid-column:span 4}
.fld.is-full,.form-act,.form .prefill{grid-column:1/-1}
.fld label{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-bottom:5px;font-size:13px;font-weight:700;color:var(--ink-2);line-height:1.4}
.req-mark{flex:none;white-space:nowrap;padding:0 5px;border:1px solid var(--rose-line);border-radius:2px;color:var(--rose-ink);font-size:10.5px;font-weight:700;line-height:1.5}
.fld input,.fld select,.reason input{display:block;width:100%;min-width:0;min-height:42px;padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink);font-size:15px;line-height:1.4}
.fld select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.fld input::placeholder,.reason input::placeholder{color:var(--ink-3);opacity:1}
.fld input:focus-visible,.fld select:focus-visible,.reason input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.fld input.num-in{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.form-act{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-top:4px}
.form-note{font-size:13px;color:var(--ink-3)}
@media (max-width:760px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
  .fld{grid-column:span 1}
  .fld.is-wide{grid-column:1/-1}
}
@media (max-width:440px){
  .form{grid-template-columns:minmax(0,1fr)}
  .fld,.fld.is-wide{grid-column:1/-1}
}
@media (max-width:560px){
  .fld input,.fld select,.reason input{font-size:16px} /* iOS の拡大を防ぐ */
}

/* 表（表は自分の枠の中でだけ横スクロール） */
.tw{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.6}
.tbl th,.tbl td{white-space:nowrap;padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.tbl thead th{padding-top:9px;padding-bottom:9px;background:var(--panel-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right}
.tbl td.num{font-size:14.5px;color:var(--ink)}
.tbl td.num.is-muted{color:var(--ink-3)}
.tbl td .money{font-size:15px}
.tbl .sub{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.tbl .sub.is-mono{font-family:var(--mono);font-size:12px}
.tbl td.cell-st,.tbl td.cell-wrap{min-width:220px;white-space:normal}
.tbl .res{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 14px}
.tbl .res-main{flex:1 1 180px;min-width:0}
.tbl .res .btn{flex:none}
.tbl tr.is-total td{background:var(--panel-2);border-top:1px solid var(--line);font-weight:700}
/* 行の状態：先頭のセルに色の帯（チップの記号と二重に伝える） */
.tbl tr.is-wait > :first-child{box-shadow:inset 4px 0 var(--blue)}
.tbl tr.is-hold > :first-child{box-shadow:inset 4px 0 var(--amber)}
.tbl tr.is-back > :first-child{box-shadow:inset 4px 0 var(--rose)}
.tbl tr.is-done > :first-child{box-shadow:inset 4px 0 var(--green-line)}
.tbl tr.is-back td{background:color-mix(in srgb,var(--rose-bg) 55%,transparent)}
/* 直前に動いた行 */
.tbl tr.is-flash td{animation:flash 2.4s ease-out}
@keyframes flash{from{background-color:var(--green-bg)}to{background-color:transparent}}
@keyframes flash-panel{from{background-color:var(--green-bg)}to{background-color:var(--panel)}}

/* 消化率メーター：0–100% を線で。90% に目盛り。超過は斜線で色以外にも区別 */
.meter{display:grid;grid-template-columns:minmax(72px,1fr) 4.2em;align-items:center;gap:10px}
.meter-track{position:relative;display:block;height:8px;border-radius:2px;background:var(--sunk);overflow:hidden}
.meter-track i{display:block;height:100%;max-width:100%;background:var(--green)}
.meter-track::after{content:"";position:absolute;top:0;bottom:0;left:90%;width:2px;background:var(--panel)}
.meter b{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.meter.is-warn .meter-track i{background:var(--amber)}
.meter.is-warn b{color:var(--amber-ink)}
.meter.is-over .meter-track i{background:var(--rose);background-image:repeating-linear-gradient(135deg,transparent 0 4px,var(--hatch) 4px 7px)}
.meter.is-over b{color:var(--rose-ink);font-weight:700}
.meter.is-warn b::before,.meter.is-over b::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat}
.meter.is-lg{grid-template-columns:minmax(0,1fr) 4.6em}
.meter.is-lg .meter-track{height:12px}
.meter.is-lg b{font-size:15px}

/* ---------- 2. 上部バー／見出し／止まる条件のカード ---------- */
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:14px 0;border-bottom:1px solid var(--line)}
.back{font-family:var(--lat);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);white-space:nowrap}
.back:hover{color:var(--green-ink)}
.co{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.co-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:var(--r-s);font-size:14px;font-weight:900;line-height:1}
.co-txt{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.co-txt b{font-size:15px;font-weight:900}
.co-txt span{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.topbar .btn{margin-left:auto}
@media (max-width:560px){.co{order:3;flex-basis:100%}.topbar{row-gap:12px}}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:28px 48px;align-items:start;padding:38px 0 32px}
.hero > *{min-width:0}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--lat);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green-ink)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.hero-h{margin:16px 0 18px;font-size:clamp(26px,4.3vw,46px);font-weight:900;line-height:1.3;letter-spacing:.005em;font-feature-settings:"palt";word-break:auto-phrase}
.hero-lead{max-width:36em;font-size:15.5px;color:var(--ink-2);line-height:1.9}
.hero-key{margin-top:20px;padding:4px 0 4px 16px;border-left:3px solid var(--ink);font-size:17px;font-weight:900;line-height:1.6}
.hero-key span{display:block;margin-top:4px;font-size:14px;font-weight:500;color:var(--ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0;list-style:none}
.facts li{padding:3px 10px;border-radius:var(--r-s);background:var(--sunk);color:var(--ink-2);font-family:var(--mono);font-size:12px;white-space:nowrap}
.facts li.is-on{background:var(--green-bg);color:var(--green-ink)}

/* 止まる条件を試す */
.try{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
.try-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:14px}
.try-h h2{font-size:18px;font-weight:900;line-height:1.4}
.try-h p{font-size:12.5px;color:var(--ink-3)}
.try-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.try-grid > li{min-width:0;display:flex}
.scn{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no res" "no t" "no at";align-content:start;gap:3px 12px;width:100%;padding:12px 14px 12px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.scn:hover{border-color:var(--ink);background:var(--panel);box-shadow:var(--shadow-lift)}
.scn-no{grid-area:no;font-family:var(--lat);font-size:22px;font-weight:700;line-height:1.1;color:var(--ink-3);font-variant-numeric:tabular-nums}
.scn-res{grid-area:res;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;font-size:12.5px;color:var(--ink-2)}
.scn-res .ico-arrow{width:13px;height:13px;color:var(--ink-3)}
.scn-t{grid-area:t;font-size:15px;font-weight:900;line-height:1.5;color:var(--ink)}
.scn-at{grid-area:at;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.scn.is-tried .scn-no::after{content:"";display:block;width:14px;height:14px;margin-top:6px;background:var(--green);-webkit-mask:var(--i-done) center/contain no-repeat;mask:var(--i-done) center/contain no-repeat}
@media (max-width:1023px){
  .hero{grid-template-columns:minmax(0,1fr);padding:34px 0 30px}
}
@media (max-width:1023px) and (min-width:720px){
  .try-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:479px){
  .try{padding:16px}
  .try-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .scn{padding:10px 12px}
}

/* ---------- 3. 6工程の流れ図 ---------- */
.flow{padding:22px 26px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
.flow-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;margin-bottom:20px}
.flow-head h2{margin-top:4px;font-size:22px;font-weight:900;line-height:1.35}
.flow-head h2 small{margin-left:10px;font-size:13px;font-weight:500;color:var(--ink-3)}

/* 集計（凡例を兼ねる） */
.tally{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:0}
.tally > div{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:0 18px;border-left:1px solid var(--line-soft)}
.tally > div:first-child{padding-left:0;border-left:0}
.tally dt{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.tally dt::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.tally dd{margin:0;font-family:var(--lat);font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tally .is-wait dt{--ico:var(--i-wait);color:var(--blue-ink)}
.tally .is-hold dt{--ico:var(--i-hold);color:var(--amber-ink)}
.tally .is-back dt{--ico:var(--i-back);color:var(--rose-ink)}
.tally .is-saved dt{--ico:var(--i-done);color:var(--green-ink)}
.tally .is-saved dd{color:var(--green-ink)}
.tally dd small{margin-left:3px;font-family:var(--jp);font-size:13px;font-weight:700}

/* 路線図：駅（工程）＝ボタン。タブの役割を兼ねる */
.flow-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:0 22px;border-bottom:1px solid var(--line)}
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding-top:26px}
.station{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;margin:0;padding:0 12px 18px 0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
/* 次の駅へ伸びる線 */
.station::before{content:"";position:absolute;z-index:0;top:19px;left:22px;right:0;height:4px;background:var(--rail)}
.station:last-child::before{display:none}
/* 選択中の下線（タブの印） */
.station::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:3px;background:transparent}
.station[aria-selected="true"]::after{background:var(--green)}
.node{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:42px;height:42px;border:3px solid var(--rail);border-radius:50%;background:var(--panel);color:var(--green-ink);font-family:var(--lat);font-size:17px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s}
.station[aria-selected="true"] .node{background:var(--rail);color:var(--on-green)}
.station:hover .node{background:var(--green-bg)}
.station[aria-selected="true"]:hover .node{background:var(--rail)}
.st-name{margin-top:10px;font-size:16px;font-weight:900;line-height:1.35;white-space:nowrap}
.station[aria-selected="true"] .st-name{color:var(--green-ink)}
.station:hover .st-name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.st-count{display:flex;align-items:baseline;gap:3px;margin-top:6px;line-height:1}
.st-count b{font-family:var(--lat);font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.st-count span{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.st-sub{margin-top:6px;font-size:12px;color:var(--ink-3);line-height:1.5}
.st-marks{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
/* 止めた地点：線の上のゲート */
.gate{position:absolute;z-index:2;top:-26px;right:18%;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.gate-l{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--amber-ink);white-space:nowrap;line-height:1.3}
.gate::after{content:"";width:8px;height:26px;border:2px solid var(--panel);border-radius:2px;background:var(--amber);box-sizing:content-box}

/* 流れ図のそと：GASの雛形 */
.station-x{align-self:end;display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:var(--r);background:transparent;text-align:left;cursor:pointer;color:inherit}
.station-x:hover{border-style:solid;border-color:var(--ink)}
.station-x .ico{width:20px;height:20px;color:var(--ink-2)}
.station-x b{display:block;font-size:14px;font-weight:900;line-height:1.35;white-space:nowrap}
.station-x span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap}
.station-x[aria-selected="true"]{border-style:solid;border-color:var(--green);background:var(--green-bg)}

.legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:14px;font-size:12px;color:var(--ink-3)}
.legend > span:first-child{margin-right:4px;font-family:var(--mono)}

@media (max-width:1023px){
  .flow{padding:20px 20px 16px}
  .flow-nav{grid-template-columns:minmax(0,1fr)}
  .station-x{justify-self:start;margin:4px 0 16px}
  .st-count b{font-size:28px}
}
/* スマホ：路線図を縦に */
@media (max-width:719px){
  .flow{padding:18px 16px 14px}
  .flow-head{margin-bottom:12px}
  .tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 0;width:100%}
  .tally > div{padding:0 0 0 12px;border-left:0}
  .tally > div:nth-child(odd){padding-left:0}
  .tally > div:nth-child(even){border-left:1px solid var(--line-soft)}
  .tally dd{font-size:26px}
  .rail{grid-template-columns:minmax(0,1fr);padding-top:0}
  .station{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"node name count" "node marks count";align-items:center;column-gap:12px;row-gap:2px;padding:9px 8px 9px 0;border-radius:var(--r)}
  .station::before{top:50%;bottom:auto;left:15px;right:auto;width:4px;height:100%}
  .station::after{left:auto;right:0;bottom:auto;top:10px;width:3px;height:calc(100% - 20px)}
  .station[aria-selected="true"]{background:var(--green-bg)}
  .node{grid-area:node;width:34px;height:34px;border-width:3px;font-size:15px}
  .st-name{grid-area:name;margin:0;font-size:15.5px}
  .st-count{grid-area:count;margin:0;justify-self:end}
  .st-count b{font-size:24px}
  .st-sub{grid-area:marks;margin:0}
  .st-marks{grid-area:marks;margin:0}
  .gate{top:auto;bottom:-6px;right:auto;left:7px;flex-direction:row;gap:6px}
  .gate::after{order:-1;width:16px;height:6px}
  .gate-l{font-size:10.5px}
  .flow-nav{border-bottom:0}
  .station-x{width:100%;margin:10px 0 4px}
}

/* ---------- 4. 作業エリア ---------- */
.work{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;margin-top:20px}
.work > *{min-width:0}
@media (max-width:1023px){.work{grid-template-columns:minmax(0,1fr)}}

.pane{padding:24px 26px 22px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--rail);border-radius:var(--r-l);box-shadow:var(--shadow)}
@media (max-width:560px){
  .pane{padding:18px 14px 16px}
  .pane-h{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
  .pane-h > div{display:contents}
  .pane-no{font-size:36px}
  .pane-desc{grid-column:1/-1;margin-top:4px}
}
.pane-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:start;margin-bottom:20px}
.pane-no{font-family:var(--lat);font-size:44px;font-weight:700;line-height:.95;color:var(--green);font-variant-numeric:tabular-nums}
.pane-t{font-size:22px;font-weight:900;line-height:1.35}
.pane-desc{margin-top:6px;max-width:62ch;font-size:14px;color:var(--ink-2);line-height:1.85}
.pane-sec{margin-top:24px}
.pane-sec-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px}
.pane-sec-h h3{font-size:15px;font-weight:900}
.pane-sec-h span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.pane-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pane-nav .btn{font-weight:700}
.pane-nav .btn small{font-family:var(--lat);font-size:14px;font-weight:700;color:var(--ink-3)}
.pane-nav .btn:last-child{margin-left:auto}

/* シナリオで入力を埋めたときの帯 */
.prefill{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:start;padding:12px 14px;border:1px solid var(--blue-line);border-left:4px solid var(--blue);border-radius:var(--r);background:var(--panel)}
.prefill-no{grid-row:span 2;font-family:var(--lat);font-size:24px;font-weight:700;line-height:1.1;color:var(--blue-ink)}
.prefill-t{font-size:14.5px;font-weight:900;line-height:1.5}
.prefill-d{font-size:13px;color:var(--ink-2);line-height:1.8}
.prefill-d .ico-arrow{width:13px;height:13px;margin-right:4px;vertical-align:-2px;color:var(--ink-3)}
.prefill-d .chip{margin-right:6px}

/* 実行予算：案件ごとの見出し＋合計 */
.bgt + .bgt{margin-top:28px}
.bgt-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:16px;font-weight:900;line-height:1.5}
.bgt-t .id{font-size:13px;font-weight:500;color:var(--ink-3)}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,auto)) minmax(160px,1fr);align-items:end;gap:10px 28px;margin:12px 0 14px}
.figs > div{min-width:0}
.figs dt{font-size:12px;font-weight:700;color:var(--ink-3)}
.figs dd{margin:2px 0 0}
.figs .money{font-size:19px}
.figs .money.is-rest{color:var(--green-ink)}
@media (max-width:640px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.figs > div:last-child{grid-column:1/-1}.figs .money{font-size:17px}}

/* 承認：操作者の切り替え */
.operator{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:16px;padding:12px 14px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--line-soft)}
.operator-l{font-size:13px;font-weight:700;color:var(--ink-2)}
.operator-note{font-size:12.5px;color:var(--ink-3)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);overflow:hidden}
.seg label{position:relative;display:block;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:block;min-height:38px;padding:8px 14px;border-left:1px solid var(--line);font-size:14px;font-weight:700;line-height:1.5;color:var(--ink-2);white-space:nowrap}
.seg label:first-child span{border-left:0}
.seg label:hover span{color:var(--ink);background:var(--sunk)}
.seg input:checked + span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible + span{outline:2px solid var(--focus);outline-offset:-4px}

/* 承認：申請カード */
.queue{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.req{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head amt" "body body" "why why" "route act" "reason reason";gap:8px 20px;padding:16px 18px 16px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel)}
.req::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:var(--r-l) 0 0 var(--r-l);background:var(--line-strong)}
.req.is-wait::before{background:var(--blue)}
.req.is-hold::before{background:var(--amber)}
.req.is-back::before{background:var(--rose)}
.req.is-done::before{background:var(--green)}
.req.is-flash{animation:flash-panel 2.4s ease-out}
.req.is-yours{border-color:var(--blue-line);box-shadow:var(--shadow-lift)}
.req-head{grid-area:head;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.req-amt{grid-area:amt;justify-self:end;font-size:21px;line-height:1.3}
.req-body{grid-area:body}
.req-title{font-size:15.5px;font-weight:900;line-height:1.5}
.req-sub{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.req-route{grid-area:route;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
.req-l{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.req-act{grid-area:act;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.req-hint{flex-basis:100%;contain:inline-size;text-align:right;font-size:12px;line-height:1.6;color:var(--ink-3)}
.req-why{grid-area:why;display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-radius:var(--r);background:var(--amber-bg);color:var(--amber-ink);font-size:13.5px;line-height:1.7}
.req-why::before{content:"";flex:none;width:14px;height:14px;margin-top:4px;background:currentColor;-webkit-mask:var(--i-hold) center/contain no-repeat;mask:var(--i-hold) center/contain no-repeat}
.req-why.is-back{background:var(--rose-bg);color:var(--rose-ink)}
.req-why.is-back::before{-webkit-mask-image:var(--i-back);mask-image:var(--i-back)}
.req-none{font-size:12.5px;color:var(--ink-3)}
@media (max-width:640px){
  .req{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "amt" "body" "why" "route" "act" "reason";padding:14px 14px 14px 18px}
  .req-amt{justify-self:start;font-size:20px}
  .req-act{justify-content:flex-start}
  .req-hint{text-align:left}
}

/* 承認ルート：✓ 済 → ● いま → ○ これから（丸の形と塗りで区別。線は済んだところまで緑） */
.route{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.5}
.route li{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);white-space:nowrap}
.route li::before{content:"";flex:none;box-sizing:border-box;width:17px;height:17px;border:2px solid var(--line-strong);border-radius:50%;background:var(--panel)}
.route li:not(:last-child){padding-right:30px}
.route li:not(:last-child)::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:2px;margin-top:-1px;background:var(--line-strong)}
.route li.is-done{color:var(--green-ink);font-weight:700}
.route li.is-done::before{border-color:var(--green);background:var(--green) var(--i-check-on) center/11px no-repeat}
.route li.is-done:not(:last-child)::after{background:var(--green)}
.route li.is-now{color:var(--blue-ink);font-weight:900}
.route li.is-now::before{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 3px var(--panel)}
.route.is-sm{font-size:12.5px}
.route.is-sm li::before{width:14px;height:14px}
.route.is-sm li.is-done::before{background-size:9px}
.route.is-sm li:not(:last-child){padding-right:22px}
.route.is-sm li:not(:last-child)::after{width:12px;right:5px}

/* 差し戻し理由 */
.reason{grid-area:reason;padding:12px 14px;border:1px solid var(--rose-line);border-radius:var(--r);background:var(--rose-bg)}
.reason label{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink)}
.reason-row{display:flex;gap:8px;flex-wrap:wrap}
.reason-row input{flex:1 1 220px;width:auto}
.reason-row .btn{flex:none}
.reason-err{display:none;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:700;color:var(--rose-ink)}
.reason-err::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--i-warn) center/contain no-repeat;mask:var(--i-warn) center/contain no-repeat}
.reason.is-error input{border-color:var(--rose);border-width:2px}
.reason.is-error .reason-err{display:flex}
.reason[hidden]{display:none}

/* GASの雛形：規則 */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px;padding:0;list-style:none}
.rules li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel-2)}
.rules li::before{content:"";grid-row:span 2;width:16px;height:16px;margin-top:4px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.rules b{font-size:14.5px;font-weight:900;color:var(--ink)}
.rules span{font-size:13px;color:var(--ink-2);line-height:1.7}
.rules .is-back{--ico:var(--i-back);color:var(--rose-ink)}
.rules .is-hold{--ico:var(--i-hold);color:var(--amber-ink)}
.rules .is-wait{--ico:var(--i-wait);color:var(--blue-ink)}
.rules .is-done{--ico:var(--i-arrow);color:var(--green-ink)}
@media (max-width:560px){.rules{grid-template-columns:minmax(0,1fr)}}
.code-box{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--panel-2)}
.code-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.code-file{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.code-act{display:flex;flex-wrap:wrap;gap:6px}
pre.code{margin:0;max-height:520px;overflow:auto;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink);white-space:pre;tab-size:2}

/* ---------- 5. 右カラム ---------- */
.side{display:flex;flex-direction:column;gap:16px}
@media (min-width:1024px) and (min-height:760px){.side{position:sticky;top:16px}}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden}
.side-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.side-h h2{font-size:14.5px;font-weight:900;line-height:1.4}
.side-tag{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.side-tag b{font-family:var(--lat);font-size:15px;font-weight:700;color:var(--green-ink)}

/* 裏で動くこと */
.behind{padding:14px 16px 16px;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.behind p + p,.behind p + ol,.behind ol + p{margin-top:10px}
.behind b{color:var(--ink)}
.behind code{padding:1px 5px;border-radius:var(--r-s);background:var(--sunk);color:var(--ink);font-size:12px;overflow-wrap:anywhere}
.behind ol{counter-reset:bh;margin:10px 0 0;padding:0;list-style:none}
.behind ol > li{counter-increment:bh;position:relative;padding:0 0 10px 30px}
.behind ol > li::before{content:counter(bh);position:absolute;left:0;top:2px;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-strong);border-radius:var(--r-s);font-family:var(--lat);font-size:13px;font-weight:700;color:var(--ink-2);background:var(--panel)}
.behind ol > li:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:1px;background:var(--line)}
/* 検査の順番＋結果（止めるものにチップ） */
.checks > li{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.checks .ck-t{color:var(--ink);font-weight:700;line-height:1.6}
.checks .ck-r{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12.5px}

/* 処理ログ：タイムライン */
.log{position:relative;max-height:min(480px,56vh);overflow:auto;overscroll-behavior:contain}
.log:focus-visible{outline-offset:-2px}
.tl{margin:0;padding:8px 16px 8px 14px;list-style:none}
.tl-item{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding:10px 0}
.tl-item::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line)}
.tl-item:first-child::before{top:18px}
.tl-item:last-child::before{bottom:auto;height:18px}
.tl-item:only-child::before{display:none}
.tl-node{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border:2px solid var(--line-strong);border-radius:50%;background:var(--panel);color:var(--ink-2)}
.tl-node::after{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico,var(--i-info)) center/contain no-repeat;mask:var(--ico,var(--i-info)) center/contain no-repeat}
.tl-item.is-done .tl-node{--ico:var(--i-done);border-color:var(--green);background:var(--green-bg);color:var(--green-ink)}
.tl-item.is-wait .tl-node{--ico:var(--i-wait);border-color:var(--blue);background:var(--panel);color:var(--blue-ink)}
.tl-item.is-hold .tl-node{--ico:var(--i-hold);border-color:var(--amber);border-radius:var(--r-s);background:var(--amber-bg);color:var(--amber-ink)}
.tl-item.is-back .tl-node{width:19px;height:19px;margin:4px 0 0 2.5px;border-color:var(--rose);border-radius:var(--r-s);background:var(--rose);color:var(--on-rose);transform:rotate(45deg)}
.tl-item.is-back .tl-node::after{--ico:var(--i-back);width:11px;height:11px;transform:rotate(-45deg)}
.tl-item.is-info .tl-node{width:12px;height:12px;margin:7px 0 0 6px;border:0;background:var(--line-strong)}
.tl-item.is-info .tl-node::after{display:none}
.tl-body{min-width:0}
.tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:1.6}
.tl-fn{padding:0 5px;border-radius:2px;background:var(--sunk);color:var(--ink-2);font-size:11px;overflow-wrap:anywhere}
.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;margin-top:3px;font-size:14px;line-height:1.55}
.tl-head b{font-weight:900}
.tl-target{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.tl-why{margin-top:4px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.tl-item.is-back .tl-why{color:var(--rose-ink)}
.tl-item.is-hold .tl-why{color:var(--amber-ink)}
/* 同じ瞬間に続けて起きたこと（因果） */
.tl-then{margin-top:8px;padding:8px 10px 8px 12px;border-left:3px solid var(--green-line);border-radius:0 var(--r) var(--r) 0;background:var(--panel-2)}
.tl-then-l{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.tl-then-l::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat}
.tl-then .tl-head{font-size:13.5px}
.tl-item.is-new > .tl-body{animation:flash 2.4s ease-out;border-radius:var(--r)}

/* ---------- 6. トースト・空の表示・フッター ---------- */
.toast{position:fixed;z-index:30;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-start;gap:10px;max-width:min(560px,calc(100% - 32px));padding:12px 18px 12px 14px;border-left:4px solid var(--toast-accent,var(--toast-done));border-radius:var(--r);background:var(--toast-bg);color:var(--toast-fg);box-shadow:var(--shadow-lift);font-size:14px;font-weight:700;line-height:1.6;opacity:0;transform:translate(-50%,12px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";flex:none;width:15px;height:15px;margin-top:3px;background:var(--toast-accent,var(--toast-done));-webkit-mask:var(--ico,var(--i-done)) center/contain no-repeat;mask:var(--ico,var(--i-done)) center/contain no-repeat}
.toast.is-wait{--toast-accent:var(--toast-wait);--ico:var(--i-wait)}
.toast.is-hold{--toast-accent:var(--toast-hold);--ico:var(--i-hold)}
.toast.is-back{--toast-accent:var(--toast-back);--ico:var(--i-back)}
.toast.is-done{--toast-accent:var(--toast-done);--ico:var(--i-done)}

.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:22px 20px;border:1px dashed var(--line-strong);border-radius:var(--r-l);background:var(--panel-2)}
.empty-mark{grid-row:span 3;width:34px;height:34px;border:2px dashed var(--line-strong);border-radius:50%}
.empty-t{font-size:15px;font-weight:900;line-height:1.5}
.empty-d{font-size:13.5px;color:var(--ink-2);line-height:1.8}
.empty .btn{justify-self:start;margin-top:8px}
.empty.is-compact{margin:12px 16px;padding:14px 14px}
.empty.is-compact .empty-mark{width:24px;height:24px}

.foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line)}
.foot p{max-width:80ch;font-family:var(--mono);font-size:12px;line-height:2;color:var(--ink-3)}
.foot p + p{margin-top:8px}

/* ---------- 7. 動きを減らす ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 8. 見本ページ専用（本番では不要） ---------- */
.mock-label{display:flex;align-items:center;gap:10px;margin:40px 0 10px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.mock-label::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px)}
.mock-label:first-child{margin-top:0}
.mock-gallery{margin-top:56px;padding:24px 26px;border:1px dashed var(--line-strong);border-radius:var(--r-l)}
.mock-gallery > h2{font-size:20px;font-weight:900;margin:6px 0 4px}
.mock-gallery > p{font-size:13.5px;color:var(--ink-2)}
.mock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin-top:22px}
.mock-grid > *{min-width:0}
.mock-grid h3{margin-bottom:10px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3)}
.mock-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mock-stack{display:grid;gap:10px}
.toast.mock-inline{position:static;transform:none;opacity:1;max-width:100%}
.mock-theme{display:inline-flex;gap:6px;margin-left:auto}
@media (max-width:720px){.mock-grid{grid-template-columns:minmax(0,1fr)}.mock-gallery{padding:18px 14px}}