/* 「毎月の運用」の見た目。
 *
 * ★★ **色の名前は、運んできた `shared/tokens.css` が正**（統括の裁定・2026-08-29）。
 *
 *   前は仕様1.1（モックの配色）の名前で書いていた。入口を前の本体のものに
 *   載せ替えたら、**その紙が読まれなくなり、10個の色が消えた。**
 *
 *     --navy --navy2 --orange --muted --bg --soft --greenbg --red --redbg --font
 *
 *   ★ **エラーは出ない。**未定義の変数は宣言ごと捨てられて親を継ぐだけ。
 *     **矢羽根が、ただの文字になって並んでいた**（実物で見つけた）。
 *
 *   **私が「差し替えると11色が黙って消える」と言ったのと、同じ形が起きた。**
 *   **言っていたのに、載せ替えのときに一緒に直さなかった。**
 *
 *   ★ 見張りは LP の `tests_css_vars.py`。**定義の無い名前を数える。**
 *
 * ★ **ここで色を作らない。**足したくなったら shared/tokens.css を見ること。
 */

* { box-sizing: border-box; }

/* ★ **`hidden` を、必ず効かせる**（2026-08-29・実物で踏んだ）。
 *
 *   `hidden` は、ブラウザが `display: none` として扱う「弱い」決まり。
 *   **こちらが `display: grid` と書くと、そちらが勝つ。**
 *   → `#app[hidden]` なのに**画面が出た。**ログイン前に、空の画面が見えた。
 *
 *   ★ **属性は正しく付いていた。検査も全部緑だった。**
 *     `hasAttribute("hidden") === true` なのに `display: grid`。
 *     **目で見るまで分からなかった。**
 *
 *   画面の出し分けは全部 `hidden` でやっている（app / loginBox / empty /
 *   navMaster / ops-toast）ので、**1つ書き忘れると、そこだけ黙って出る。**
 *   **一覧を持たず、全部にまとめて効かせる。** */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  line-height: 1.55;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
}

button, input, select, textarea { font: inherit; }

/* ------------------------------------------------------------ 全体の骨 */

.app { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; }

/* ------------------------------------------------------------ 左の帯 */

.side {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  background: var(--accent-ink); color: #fff; padding: 24px 18px;
}

.ops-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 850; padding: 0 8px 24px;
}

.side-label {
  padding: 0 10px; margin: 15px 0 7px; color: #90aac1;
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
}

/* ★ **flex にしない。**説明（.soon）が横に並んで、名前のほうが1文字ずつ
 *   折り返した（2026-08-29、実物で見つけた）。**名前の下に説明**が正しい形。 */
.nav-btn {
  width: 100%; display: block;
  border: 0; background: transparent; color: #c9d7e3;
  padding: 10px 12px; border-radius: 10px; text-align: left; cursor: pointer;
  font-size: 13px; font-weight: 700; line-height: 1.4;
}

.nav-btn:hover, .nav-btn.is-on {
  background: rgba(255, 255, 255, .1); color: #fff;
}

/* ★ **並びには出すが、まだ開かない画面。**
 *   「準備中」の貼り紙を出さない（統括の指示・2026-08-29）。
 *   **何が入るかを書く。**押しても何も起きないより、その方が分かる。
 *   ★ **触る画面には hover が無い**ので、常に出す（前は hover のときだけだった）。 */
.nav-btn .soon {
  display: block; font-size: 10px; line-height: 1.35; color: #7e97ad;
  margin-top: 3px; white-space: normal;
}

.nav-btn.is-on .soon { color: #b8cadb; }

.side-foot {
  margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 16px;
}

.side-foot .company { font-size: 13px; font-weight: 750; }
.side-foot .role { font-size: 11px; color: #9eb3c5; }

/* ------------------------------------------------------------ 上の帯 */

.main { min-width: 0; }

.ops-topbar {
  height: 70px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; position: sticky; top: 0; z-index: 5;
}

.ops-crumb { font-size: 13px; color: var(--ink-3); }

.content { padding: 26px 30px 48px; }

/* ------------------------------------------------------------ 見出し */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}

.page-head h1 { margin: 2px 0 6px; font-size: 25px; }

.ops-eyebrow {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--amber);
}

.lead { margin: 0; font-size: 13px; color: var(--ink-3); max-width: 60ch; }

.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav strong { min-width: 8.5em; text-align: center; font-size: 15px; }

.month-nav button {
  width: 34px; height: 34px; border: 1px solid var(--line);
  background: var(--card); border-radius: 10px; cursor: pointer;
  color: var(--accent); line-height: 1;
}

.month-nav button:hover { background: var(--accent-soft); }

/* -------------------------------------------------------------- 指標 */

.summary-grid {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric {
  background: var(--card); border: 1px solid var(--line); border-radius: 15px;
  padding: 16px 18px; box-shadow: var(--shadow);
}

.metric-label {
  font-size: 12px; font-weight: 750; color: var(--ink-3); margin-bottom: 4px;
}

.metric-value { display: flex; align-items: baseline; gap: 5px; }
.metric-value strong { font-size: 27px; line-height: 1.1; }
.metric-value span { font-size: 12px; color: var(--ink-3); }
.metric-foot { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.metric.is-late .metric-value strong { color: var(--clay); }

/* ------------------------------------------------------------- 箱 */

.ops-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 17px;
  box-shadow: var(--shadow); overflow: hidden;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line);
}

.panel-head h2 { margin: 0; font-size: 15px; }
.panel-body { padding: 16px 20px 20px; }

/* ---------------------------------------------------------- 矢羽根 */
/*
 * 仕様 5.1.2。**工程を横並びの矢羽根で出し、3色で示す。**
 *   完了＝緑 ／ 現在＝紺 ／ 未着手＝グレー
 * 押すと、その工程のタスクだけが下に開く（他は閉じる）。
 */

.phases {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px;
}

.phase {
  position: relative; border: 0; cursor: pointer; text-align: left;
  padding: 10px 22px 10px 26px; background: var(--accent-soft); color: var(--ink-3);
  font-size: 12px; font-weight: 750; line-height: 1.35;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%,
                     calc(100% - 12px) 100%, 0 100%, 12px 50%);
}

.phase:first-child { padding-left: 18px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }

.phase small { display: block; font-size: 10px; font-weight: 600; opacity: .85; }

/* ★ **色は、サーバが返した state をそのまま使う**（仕様 5.1.2）。
 *   `done` / `current` / `todo` の3つ。**画面で決め直さない。**
 *   ★ 2026-08-29、ここが `is-now` のままで、**「現在」が紺にならなかった。**
 *     口の言葉が変わったのに、CSS の名前を直し忘れた形。
 *     **クラス名は `is-` ＋ state** なので、state が増えたらここに足す。 */
.phase.is-done { background: var(--green-soft); color: var(--green); }
.phase.is-current { background: var(--accent); color: #fff; }
.phase.is-todo { background: var(--accent-soft); color: var(--ink-3); }
.phase.is-open { outline: 2px solid var(--amber); outline-offset: -2px; }

/* -------------------------------------------------------------- 行 */

.group { margin-bottom: 6px; }

.group-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 2px; font-size: 13px;
}

.group-head span { font-size: 11px; color: var(--ink-3); }

/* ★★ **3社を実測して、この値にしました**（2026-08-30・docs/他社調査ログ.md）。

       行の角    Trello ★★ **8px** ／ Notion 0px ／ ★ 前のうち 12px  → ★ **8px**
       行の文字  Trello 14px ／ Notion ★★ **16px** ／ ★ 前のうち 17px → ★ **16px**
       行の間    Trello 8px ／ ★ うち 8px                            → ★ **すでに一致**
       行間      Notion 24px（16px の ★★ **1.5倍**）                 → ★ **1.5倍**

   ★ **行の高さは採っていません**（★ 72 / 34 / 18px と ★★ **3社ばらばら**）。
   ★★ **「もう少しこうしたい」は、1つも足していません。** */
.task {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 16px 14px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 10px; background: var(--card);
  font-size: 15px; line-height: 1.5; cursor: pointer;
}

/* ★★ **読むための札**（★ 選ばせない。押すと詳細が開く）。
   ★ **Trello も、札は行に出しています**（★ 状態を「選ばせて」いないだけ）。 */
.task-tag { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.task-state {
  font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-2); white-space: nowrap;
}
.task-state-select {
  min-height: 26px; padding: 3px 24px 3px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--line-2); color: var(--ink-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.task-state-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.task-who { min-width: 10em; padding: 0 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.task:hover { border-color: var(--accent); background: var(--accent-soft); }
.task:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* 仕様 5.1.3。**完了した行は、地を --bg に、題を --muted に。** */
.task.completed { background: var(--paper); }
.task.completed .task-title { color: var(--ink-3); }

/* ★ **名前と「詳細」を、横に並べる**（2026-08-30・画像で見つけた）。
   `.rename` が `display: block` で幅いっぱいを取るので、
   **「…」が名前の下に落ちて、押しどころに見えなかった。** */
.task .name { min-width: 0; display: flex; align-items: baseline; gap: 2px; }
.task .task-title { display: block; min-width: 0; font-size: 14px; font-weight: 700; }

/* ★ **名前を、その場で直す**（2026-08-30・オーナー指示①）。
   ★ **押せる見た目にしない。**ふだんは、ただの名前に見せる——
     **一覧の全部の行にボタンが並ぶと、どれが押しどころか分からなくなる。**
     指を乗せたときだけ、下線で「押せます」と伝える。 */
.task .name .rename {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: text;
}
.task .name .rename:hover { text-decoration: underline dotted var(--ink-3); }
.task .name .rename:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.task.completed .name .rename { color: var(--ink-3); }

.task .name .rename-box {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  background: var(--card, #fff);
  color: inherit;
}
.task .name .rename-box:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ★ **期限も、その場で直す**（2026-08-30・オーナー逐語「名前・期限・担当」）。
   **文字と同じ見た目のまま**にする——押せる形にしすぎると、
   **一覧が「書く画面」に見える。**ふだんは読むための画面。 */
.task .due-pick {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer; min-width: 78px; text-align: left;
}
.task .due-pick:hover { text-decoration: underline dotted var(--ink-3); }
.task .due-pick:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.task .due-box {
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  background: var(--card, #fff);
  color: inherit;
}
.task .due-box:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ★ **消す**（2026-08-30・口が来てから出した）。
   ★ **ふだんは目立たせない。**一覧に赤い × が並ぶと、
     **消すための画面に見える。**ここは、ふだん押して進める画面。
     指を乗せたときだけ、赤くする。 */
.task .del {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--ink-3);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.task .del:hover { color: var(--clay); border-color: var(--clay); background: var(--clay-soft); }
.task .del:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ★ **「消す／やめる」は、その場で出す。**confirm() を使わない——
   **画面全体が固まり、検査からも触れなくなる。** */
/* ★ **消す口の幅を、先に取っておく**（2026-08-30・画像で見つけた）。
   「消す／やめる」に変わると幅が広がり、**その行だけ列がずれて、
   上下の行と揃わなくなる。**行ごとに格子を組んでいるため。
   → **いちばん広い形の幅を、最初から空けておく。** */
.task .del-slot {
  display: inline-flex; justify-content: flex-end;
  min-width: 108px;
}
.task .del-ask { display: inline-flex; gap: 6px; white-space: nowrap; }
.task .del-yes {
  border-color: var(--clay); background: var(--clay); color: #fff;
}
.task .del-yes:hover { filter: brightness(.94); }
.btn.small { padding: 3px 9px; font-size: 12px; }

.task .name small {
  display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px;
}

.due { position: relative; padding-right: 1.5em; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.due::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.35em; transform: translateY(-50%); text-align: center; }
.due.late::after { content: "🔥"; }

.due.late {
  color: var(--clay); background: transparent; border-radius: 6px;
  padding: 2px 4px; font-weight: 750;
}

/* 遅れて終わったもの。**数は出すが、赤くしない**——もう片付いているので。 */
.due.was-late { color: var(--ink-3); }

.status {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  background: var(--card); color: var(--ink); cursor: pointer; min-width: 11em;
}

.status:disabled { cursor: default; color: var(--ink-3); background: var(--paper); }

.empty { color: var(--ink-3); font-size: 13px; margin: 4px 2px; }

/* ------------------------------------------------------------ 押すもの */

.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 700;
}

.btn:hover { background: var(--accent-soft); }
.btn.small { padding: 6px 11px; font-size: 12px; }

/* ★ **2つの書き方の、どちらでも効くようにしてある。**
 *   仕様 1.2 は `.btn.primary`、index.html は `btn btn-primary` と書いていた。
 *   **書き直したとき、片方しか置かず、ログインの押しボタンが白いままになった。**
 *   番人（「丸ごと置き換えていませんか」）に止められて気づいた。
 *   **どちらかに寄せるのは、画面7枚がそろってから。**いま名前を変えると、
 *   まだ書いていない画面と食い違う。 */
.btn.primary, .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.btn.primary:hover, .btn-primary:hover { background: var(--accent-ink); }

/* ---------------------------------------------------------- ログイン */

.login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }

.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-radius: 17px; padding: 28px;
  box-shadow: var(--shadow);
}

.login-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--accent); }
.login-card p { margin: 0 0 18px; font-size: 13px; color: var(--ink-3); }

.login-card label {
  display: block; font-size: 12px; font-weight: 750; margin-bottom: 13px;
}

.login-card input {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink);
}

/* ★ **押している所が分かるようにする。**書き直したときに落としていた。
 *   キーボードだけで使う人は、ここが無いと**どこに居るか分からない。** */
.login-card input:focus, .status:focus, .month-nav button:focus,
.nav-btn:focus, .phase:focus, .btn:focus {
  outline: 2px solid var(--amber); outline-offset: 1px;
}

.login-card .btn { width: 100%; margin-top: 4px; }
.error { color: var(--clay); font-size: 13px; margin-top: 12px; }

/* -------------------------------------------------------- 出る知らせ */

.ops-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  margin: 0; padding: 11px 20px; border-radius: 11px;
  background: var(--accent-ink); color: #fff; font-size: 13px; font-weight: 750;
  box-shadow: var(--shadow); z-index: 20;
}

.ops-toast.bad { background: var(--clay); }

/* ---------------------------------------------------------- 狭い画面 */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .side-foot { margin-top: 18px; }
  .content { padding: 20px 16px 40px; }
  .ops-topbar { padding: 0 16px; }
  .task { grid-template-columns: 1fr; }
  .status { min-width: 0; width: 100%; }
}

/* ★ **いま動いているものの印。**小さく、けれど必ず見える所に。
 *   オーナーが「古いんじゃないか」と悩まなくて済むように（2026-08-29）。 */
/* ★ **1つだけ置き、画面の外に出してある**（2026-08-29）。
 *   ログインの画面でも、読み込めなかった画面でも、同じものが見える——
 *   **いちばん要るのは、詰まったとき。** */
.version {
  position: fixed; left: 12px; bottom: 10px; z-index: 30;
  font-size: 10px; color: var(--ink-3); letter-spacing: .02em;
  background: rgba(255, 255, 255, .8); border-radius: 6px; padding: 2px 7px;
  pointer-events: none;
}

/* ★ **札の下で、中身が終わらないようにする**（2026-08-30・画像で見つけた）。
 *   札は `pointer-events: none` なので**押せる**が、**読めない。**
 *   いちばん下まで送ると「＋ やることを足す」に重なっていた。
 *   → **札の高さぶん、下に余白を置く。**札の位置を変えない
 *     （詰まったときに、いつも同じ場所に在ってほしいので）。 */
#monthly { padding-bottom: 38px; }

/* ============================================================
   毎月の運用：モック準拠の月次ワークスペース
   ============================================================ */
#monthly .view { max-width: 1240px; margin: 0 auto; }
#monthly .page-head { padding-top: 14px; }
#monthly .monthly-lead { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }

.connection-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.connection-strip > strong { white-space: nowrap; }
.connection-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.connection-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); font-size: 12px; background: var(--card-2, var(--card));
}
.connection-chip i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green, #23845a);
}
.connection-chip i.is-error { background: var(--clay, #b74242); }
.connection-chip small { color: var(--ink-3); }
.connection-note { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.connection-strip #openSystems { flex: none; }
.cn-candidates { display: grid; gap: 8px; margin-top: 12px; }
.cn-candidate { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-3); font-size: 12px; }
.cn-candidate strong { color: var(--ink-2); font-size: 13px; }

.workflow-panel {
  margin-bottom: 16px; padding: 18px 20px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.section-headline {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.section-headline h2 { margin: 0; font-size: 16px; }
.section-headline p { margin: 3px 0 0; color: var(--ink-3); font-size: 12px; }
.operation-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.operation-tab {
  min-height: 32px; padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink-2); cursor: pointer;
  font-size: 12px; font-weight: 700;
}
.operation-tab[aria-selected="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.workflow-stages { display: grid; grid-template-columns: repeat(var(--stage-count, 1), minmax(0, 1fr)); gap: 4px; }
.workflow-mobile-select-label, .workflow-mobile-select { display: none; }
.workflow-stage-frame {
  min-width: 0; min-height: 92px; padding: 2px;
  background: #8a96a3;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.workflow-stage-frame.is-done { background: #7c8792; }
.workflow-stage-frame.is-selected { background: #0b355f; }
.workflow-stage {
  position: relative; width: 100%; min-width: 0; min-height: 88px; padding: 14px 20px;
  border: 0; border-radius: 9px; background: var(--card);
  color: var(--ink-2); text-align: left; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  filter: none;
}
.workflow-stage.is-first, .workflow-stage.is-last { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.workflow-stage strong, .workflow-stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-stage strong { margin: 3px 0 4px; font-size: 14px; }
.workflow-stage small, .workflow-stage-index { color: var(--ink-3); font-size: 11px; }
.workflow-stage-index { font-weight: 800; }
.workflow-stage.is-done { background: #d7dde3; color: #1f2933; filter: none; }
.workflow-stage.is-current { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(15, 67, 121, .18); }
.workflow-stage.is-current:not([aria-selected="true"]) { border-color: var(--line); background: var(--card); color: var(--ink-2); box-shadow: none; }
.workflow-stage.is-current small, .workflow-stage.is-current .workflow-stage-index { color: rgba(255,255,255,.8); }
.workflow-stage[aria-selected="true"] { background: var(--accent); color: #fff; outline: 0; position: relative; z-index: 1; box-shadow: none; filter: none; }
.workflow-stage[aria-selected="true"] small, .workflow-stage[aria-selected="true"] .workflow-stage-index { color: rgba(255,255,255,.8); }
.workflow-stage.is-done[aria-selected="true"] { background: #d7dde3; color: #1f2933; outline: 0; box-shadow: none; filter: none; }
.workflow-stage.is-done[aria-selected="true"] small, .workflow-stage.is-done[aria-selected="true"] .workflow-stage-index { color: var(--ink-3); }
.workflow-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  margin-top: 12px; padding: 11px 14px; border-radius: 9px; background: var(--paper);
}
.workflow-detail strong { color: var(--accent); font-size: 13px; }
.workflow-detail p { margin: 2px 0 0; color: var(--ink-3); font-size: 12px; }
#workflowOwner { color: var(--ink-3); font-size: 11px; white-space: nowrap; }

.monthly-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .72fr); gap: 16px; align-items: start; }
.todo-panel, .month-summary {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.todo-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.todo-title { display: flex; align-items: center; gap: 8px; }
.todo-title h2, .month-summary h2 { margin: 0; font-size: 16px; }
.todo-title span { padding: 2px 8px; border-radius: 999px; background: var(--clay-soft); color: var(--clay); font-size: 12px; font-weight: 800; }
#taskAddSlot { margin-left: auto; }
#taskAddSlot .add-task { white-space: nowrap; }
.todo-head + #taskAddSlot { display: flex; justify-content: flex-end; width: 100%; margin: 0; padding: 0 18px 10px; }
.todo-head + #taskAddSlot .add-task { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.todo-filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.todo-filters button {
  min-height: 32px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-3); cursor: pointer; font-size: 12px;
}
.todo-filters button.is-active { border-color: #bdd6ec; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.task-assignee-select {
  min-height: 26px; width: 12em; min-width: 12em; max-width: 200px; padding: 3px 24px 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.2;
}
.task-assignee-select:focus, .task-state-select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
.action-list { padding: 14px 18px 4px; }
.action-list .task { margin-bottom: 8px; }
.task-context { display: block; margin-top: 3px; color: var(--accent); font-size: 11px; font-weight: 700; }
.action-empty { padding: 10px 18px 16px; }

.reconcile-section { margin: 10px 18px 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.reconcile-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; text-align: left; }
.reconcile-title #taskAddSlot { margin-left: auto; flex: 0 0 auto; }
.reconcile-title strong { font-size: 14px; }
.reconcile-title p { margin: 3px 0 0; color: var(--ink-3); font-size: 12px; }
.reconcile-list { display: grid; gap: 8px; }
.reconcile-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
}
.reconcile-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.reconcile-mark { padding: 3px 8px; border-radius: 999px; background: var(--amber-soft, #fff5e5); color: var(--amber); font-size: 10px; font-weight: 800; white-space: nowrap; }
.reconcile-copy { min-width: 0; }
.reconcile-copy strong, .reconcile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reconcile-copy strong { font-size: 13px; }
.reconcile-copy small { margin-top: 2px; color: var(--ink-3); font-size: 11px; }
.reconcile-arrow { color: var(--accent); font-size: 16px; }
.alert-card { text-align: left; }

.month-summary { position: sticky; top: 88px; padding: 18px; }
.month-summary h2 { margin-bottom: 14px; }
.progress-ring {
  --progress: 0%; width: 132px; height: 132px; margin: 4px auto 8px;
  display: grid; place-items: center; border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--accent) var(--progress), var(--line-2, #edf1f4) 0);
}
.progress-ring:after { content: ""; position: absolute; width: 102px; height: 102px; border-radius: 50%; background: var(--card); }
.progress-ring strong { position: relative; z-index: 1; font-size: 27px; color: var(--accent); }
.progress-caption { margin: 0 0 18px; text-align: left; color: var(--ink-3); font-size: 12px; }
.summary-list { margin: 0; padding: 0; }
.summary-list > div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.summary-list dt { color: var(--ink-3); }
.summary-list dd { margin: 0; }
.summary-list .is-late dd { color: var(--clay); }
.month-close-check { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.month-close-check strong { display: block; font-size: 13px; }
.month-close-check p { margin: 5px 0 10px; color: var(--ink-3); font-size: 12px; }
.month-close-check .btn { width: 100%; }
#prioritySlot { margin-top: 16px; }
#prioritySlot .ops-panel { margin: 0; border: 1px solid var(--line); box-shadow: none; }

@media (max-width: 1000px) {
  .workflow-stages { grid-template-columns: repeat(var(--stage-count, 1), minmax(0, 1fr)); }
  .monthly-layout { grid-template-columns: 1fr; }
  .month-summary { position: static; }
}
@media (max-width: 640px) {
  #monthly .view { padding-left: 0; padding-right: 0; }
  .section-headline, .reconcile-title { display: block; }
  .operation-tabs { justify-content: flex-start; margin-top: 12px; }
  .workflow-mobile-select-label { display: block; margin: 0 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
  .workflow-mobile-select { display: block; width: 100%; min-height: 44px; margin-bottom: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; }
  .workflow-stages { display: none; }
  .workflow-detail { grid-template-columns: 1fr; }
  #workflowOwner { white-space: normal; }
  .connection-note { margin-left: 0; flex-basis: 100%; }
  .connection-strip #openSystems { margin-left: auto; }
  .todo-filters { margin-left: 0; width: 100%; }
  .action-list { padding-left: 12px; padding-right: 12px; }
  .task { grid-template-columns: 1fr; gap: 6px; }
  .task .del-slot { min-width: 0; }
  .reconcile-section { margin-left: 12px; margin-right: 12px; }
}

/* チャット入力は、長い詳細でも常にドロワー内で送信できる位置に置く。 */
.drawer .td-post {
  position: sticky; bottom: 0; z-index: 1; padding: 10px 0 2px;
  background: var(--card, #fff); border-top: 1px solid var(--line);
}

/* ★ ロゴ（オーナー指示・2026-08-29）。**「トリまとめ」が正式名称。**
 *   元は 1626x388・222KB。**左メニューは 232px 幅**なので、2倍の 420px に縮めた。
 *   **大きさを HTML にも書いてある**（width/height）。書かないと、
 *   読み込む前と後で行の高さが変わり、**画面がガタつく。** */
.ops-brand { padding: 0 4px 22px; }

/* ★ **左メニューは 232px、両側に 18px の余白**＝中は 196px しかない。
 *   210px で置いたら、**「トリまとめ」の右端が切れた**（実物で見つけた）。
 *   **数を決め打ちにせず、入る幅いっぱい**にする。左メニューの幅を変えても切れない。 */
.ops-brand-logo {
  display: block; width: 100%; max-width: 176px; height: auto;
  /* ★ **紺の帯の上に、紺のロゴだと沈む**（実物で見つけた）。
   *   ロゴの色は #1E4C8C 系、帯は --navy2 (#0a315a)。**ほとんど同じ濃さ。**
   *   モックは、この帯の上を**白抜き**にしている（白い文字と白い印）。
   *   **そちらに合わせる。**元の絵は1枚のまま（色違いを2枚持たない）。
   *   ★ **ログインの画面は白地なので、こちらは掛けない。** */
  filter: brightness(0) invert(1);
}

.login-brand { margin: 0 0 6px; }
.login-brand img { display: block; width: 180px; height: auto; }

/* ------------------------------------------------- 業務ブロック（仕様 5.1.1）
 * その月に該当する業務が並び、**それぞれが矢羽根で工程を示す。** */

.op { margin-bottom: 16px; }

.op-count { font-size: 12px; color: var(--ink-3); }

/* 工程の中に1件も無いとき。**空欄にせず、そう書く。** */
.group .empty { margin: 6px 2px 2px; }

/* ------------------------------------ 優先して確認すること（仕様 5.1.7）
 * ★ **確認待ちは、ここに入らない。**サーバが分けている。画面で除かない。 */

.alerts .panel-body { display: grid; gap: 10px; }

.alert-card {
  border: 1px solid var(--line); border-left: 3px solid var(--clay);
  background: var(--clay-soft); border-radius: 12px; padding: 12px 14px;
}

.alert-card strong { display: block; font-size: 14px; }

.alert-card p { margin: 3px 0 0; font-size: 12px; color: var(--ink); }

.alert-who { font-size: 11px; color: var(--ink-3); }

/* ------------------------------------------- やることを足す（2026-08-30）
 * オーナー逐語:「ログイン後の画面でタスクとかが全然作れるようになってないです」
 * ★ **工程ごとに足す。**どの工程に入れるかは、押した場所が決める（選ばせない）。 */

.add-task { margin: 4px 2px 2px; }

.add-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 8px 0 2px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-2);
}

.add-form input[name="title"] { flex: 1 1 16em; min-width: 0; }

.add-form input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}

.add-form input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* 担当を選ぶ。★ **「自動連携」も、人と同じ並びに出る**（仕様 v1.0 §3）。 */
.assignee {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  background: var(--card); color: var(--ink); cursor: pointer; max-width: 12em;
}

.assignee:disabled { cursor: default; color: var(--ink-3); background: var(--paper); }

/* 期限／名前／状態・担当／削除。名前だけが残り幅を使う。 */
.task { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.task-open {
  display: block; width: 100%; padding: 0; border: 0; text-align: left;
  color: inherit; background: transparent; font: inherit; cursor: pointer;
}
.task-open:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (max-width: 900px) {
  .task { grid-template-columns: 1fr; }
  .assignee { max-width: none; width: 100%; }
}

/* ============================================================
   業務の型（operations・仕様 4.2）。2026-08-30。

   ★ **押しどころを置かない画面**（オーナー訂正）。**読むための紙**なので、
     枠と線を強くしない。**毎月の運用と同じ箱**を使い、**中を静かにする。**
   ============================================================ */
/* ★★ **業務を追加する箱**（2026-08-30・オーナー指示）。

   ★ **`.add-form`（やることを足す箱）と、同じ形にしています。**
     **同じことをする物を、2つの見た目にしない**——
     ★ 片方だけ直る形を、こちらから作らないため。

   ★ **欄は端から端まで伸ばしません。**画像で見て決めました
     （伸ばすと、名前も日付も同じ幅になり、**どれが大事か分からなくなる**）。 */
.op-new {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  margin: 10px 0 18px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-2);
}

.op-new .field { display: grid; gap: 4px; margin: 0; }
.op-new .field .k { font-size: var(--fs-sm); color: var(--ink-2); }

.op-new input, .op-new select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}

/* ★ **名前がいちばん大事なので、いちばん広く。** */
.op-new #opNewName { width: 22em; max-width: 100%; }
.op-new #opNewKind { width: 11em; }
.op-new #opNewDay  { width: 6em; }

.op-new-go { display: flex; gap: 8px; align-items: center; }

/* ★ **うまくいかなかったときの一言は、行を独り占めする。**
   横に並べると、押しどころの陰に隠れます。 */
.op-new #opNewError { flex: 1 0 100%; margin: 2px 0 0; }

/* ★★ **足す釦**（2026-08-30・オーナー逐語）。

   「★ **この業務の追加のボタン ★★ でかすぎるし、もっと右に寄せてくれ。**」

   ★ **3社の実測**（docs/他社調査ログ.md）:
     ★★ **一覧の中の釦は Trello 36px。**
     ★ Asana は 44px・58px ですが ★ **1社だけなので採りません。**
   ★ **前は 56px**（★ `.btn-lg` の既定）。★★ **「でかすぎる」は、そのとおりでした。**

   ★ **右に寄せる。**★ 一覧の中に置くと「どのカードに足すのか」と読み違えられるので、
     ★ **見出しの下のまま、右端へ。** */
/* ★★ **2026-08-25 の決定と、ぶつかります**（★ 隠さず書きます）。

     `components.css` に、こう在ります:
       「**大きいボタンも、高さは同じ**（2026-08-25 オーナー決定
         ★ **例外なく一つの高さに揃えてください**）。
         ★ **高さを変えると、同じ列に並べたときに肩が揃わない。**」

   ★★ **2026-08-30、オーナーが この釦を名指しで「でかすぎる」と言いました。**

   ★ **その理由（肩が揃わない）は、ここでは当たりません。**
     ★★ **この釦は、行に1つだけ**です（★ 隣に並ぶ釦が在りません）。
     → ★ **揃える相手が居ないので、揃わなくなりません。**

   ★ **`--btn-h` は 56px。**★ `min-height` なので、`height` だけでは勝てません。
   ★ **全部を 36px にする案は採っていません**——★★ **それは全画面の話**で、
     ★ 私が1人で決めることではありません。★ **統括に確かめを出しています。** */
#opAdd {
  min-height: 36px; height: 36px; padding: 0 14px;
  font-size: 14px; border-radius: 8px;
  margin: 6px 0 0 auto; display: block;
}

/* ============================================================
   ★★ **業務を直す・消す**（2026-08-30）。
   ★ **3社を実測して、この形にしました**（docs/他社調査ログ.md）。

       行の角      Trello 8px ／ Notion 8px ／ Asana 0px  → ★ **8px**（2社が同じ）
       行の間      8px ／ 0px ／ 8px                      → ★ **8px**（2社が同じ）
       一覧の文字  14px ／ 16px ／ 16px                   → ★ **14px**（一覧）
       釦の高さ    Trello 36px                            → ★ **36px**
       行間        Notion 24px（16px の1.5倍）            → ★ **1.5倍**

   ★★ **「もう少しこうしたい」は、1つも足していません。**
   ★ 採らなかったもの：丸い釦（Asana だけ）／区切り線だけ（Notion だけ）。
   ============================================================ */

/* ★ **一覧の中の釦は 36px**（★ Trello の実測値）。 */
.op-tools { display: flex; gap: 8px; margin-left: auto; }
.op-tools .btn { height: 36px; padding: 0 12px; font-size: 14px; border-radius: 8px; }

/* ★★ **月の升は、横に折り返す**（★ 3社とも、選ぶものは横）。
   ★ **縦に12段 並ぶと、画面が伸びます**——オーナー指摘「UI が重なってて汚い」。 */
.op-edit-months {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.op-edit-month-lab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: 14px; line-height: 1.5;
  cursor: pointer; white-space: nowrap;
}
.op-edit-month-lab:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
}

.op-edit-form { display: grid; gap: 14px; }
.op-edit-form .field { display: grid; gap: 6px; }
.op-edit-form .field .k { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.op-edit-form input, .op-edit-form select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: 14px;
}
.op-edit-go { display: flex; gap: 8px; }
.op-edit-go .btn { height: 36px; padding: 0 14px; font-size: 14px; }

.op-del-box { display: grid; gap: 14px; }
.op-del-go { display: flex; gap: 8px; }
.op-del-go .btn { height: 36px; padding: 0 14px; font-size: 14px; }

.ops-head { margin: 0 0 18px; }
#history .ops-head { padding-top: 14px; }
.ops-head .ttl { margin: 2px 0 6px; font-size: 25px; line-height: 1.25; }
.ops-head .lead { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
#opsBack { margin: 0 0 10px; }

.op-list { display: grid; gap: 14px; }
.op-card .panel-head { display: flex; align-items: baseline; gap: 12px; }
.op-card .panel-head h2 { margin: 0; font-size: 15px; }
.op-when {
  margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 700;
  background: var(--accent-soft); border-radius: 999px; padding: 2px 10px;
}
.op-desc { margin: 0 0 4px; color: var(--ink-2); }
.op-made { margin: 0 0 12px; color: var(--ink-3); font-size: 12px; }

/* ★ **工程は番号つき。**矢羽根と同じ「順番があるもの」だと分かるように
     ——ただし**ここは押せない**ので、矢羽根の形にはしない
     （**押せそうな見た目にしない**）。 */
.op-phases { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 12px; }
.op-phase-name { font-weight: 700; }

.op-tasks { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.op-tasks li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 10px; border-radius: 6px; background: var(--paper);
}
.op-task-name { min-width: 0; }
.op-task-who { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.op-tasks .empty, .op-phases .empty { background: none; color: var(--ink-3); }

@media (max-width: 640px) {
  .op-when { margin-left: 0; }
  .op-card .panel-head { flex-wrap: wrap; }
}

/* ============================================================
   画面へ行く道（仕様 1.3・4.1）。2026-08-30。

   ★ **運んできた並びの、いちばん左に置く。**そこが本筋の導線で、
     右にある「開発予定表・お知らせ・グループ管理・アカウント設定」は
     **たまに使うもの。****同じ強さで並べない。**
   ============================================================ */
.ops-nav { display: flex; gap: 6px; align-items: center; margin-right: auto; }
.ops-nav + * { margin-left: 0; }

.ops-nav-btn { font-weight: 700; }

/* ★ **いま居る所。**色だけに頼らない——**下の線でも示す**
     （色の見分けがつきにくい人に、印が届かないため）。 */
.ops-nav-btn.is-here {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ops-nav-btn.is-here:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
  .ops-nav { flex-wrap: wrap; }
  .ops-nav + * { margin-left: 0; }
}

/* ============================================================
   月次履歴（history・仕様 4.2）。2026-08-30。
   ★ **並べて見比べる画面**なので、月ごとに1行。
     **数字の位置を、行のあいだでそろえる**——ずれると比べられない。
   ============================================================ */
.his-head, .his-row { display: grid; grid-template-columns: 136px 112px 144px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.his-head { padding: 0 14px 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.his-rows { display: grid; gap: 8px; }
.his-row {
  padding: 12px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line); border-radius: 10px;
}
.his-when, .his-n { font-size: 14px; line-height: 1.5; font-weight: 700; }
.his-sub, .his-wait, .his-late { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
/* ★ **遅れが出た月だけ、色を付ける。**毎行が赤いと、比べられない。 */
.his-late.is-late {
  justify-self: start; color: var(--clay); font-weight: 700;
  background: var(--clay-soft); border-radius: 999px; padding: 2px 10px;
}

@media (max-width: 640px) {
  .his-head, .his-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   タスクの詳細ドロワー（仕様 5.2・1.3）。2026-08-30。
   ★ **右から出す**（仕様 1.3「詳細ドロワーは右からスライドインする」）。
   ★ **「保存」ボタンは無い**（仕様 5.2.2）。押した瞬間に保存する。
   ============================================================ */
.drawer-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 49, 90, .28);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(420px, 100%);
  background: var(--card, #fff);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(10, 49, 90, .12);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.drawer-title { margin: 0; font-size: 15px; line-height: 1.5; min-width: 0; }
.drawer-head .icon-btn { margin-left: auto; flex: none; }
.drawer-body { padding: 16px 18px 28px; display: grid; gap: 18px; }

.td-field { display: grid; gap: 6px; }
.td-field label, .td-label { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.td-field > .help { color: var(--ink-3); font-size: 12px; margin: 0; }
.td-field input, .td-field select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--card, #fff); color: inherit;
}
.td-field input:focus, .td-field select:focus {
  outline: 2px solid var(--amber); outline-offset: 1px;
}

/* ★ **状態は、ボタンの並び**（仕様 5.2.3）。選び直すと、その場で保存される。 */
.td-states { display: flex; flex-wrap: wrap; gap: 6px; }
.st-btn { font-size: 12px; padding: 5px 10px; }
.st-btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ★ **行の中の「詳細」。**ふだんは目立たせない——
     一覧に押しどころが増えると、どこを押せばよいか分からなくなる。 */
.task .open-task {
  margin-left: 8px; padding: 0 6px;
  border: 0; background: none; color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.task .open-task:hover { color: var(--accent); background: var(--accent-soft); }
.task .open-task:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

@media (max-width: 640px) {
  .drawer { width: 100%; }
}

/* ============================================================
   ドロワーの中：チェックリスト（仕様 5.3）とチャット（5.2.1）。2026-08-30。
   ============================================================ */
.td-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.td-check label {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400; color: inherit; cursor: pointer;
}
.td-check input { margin-top: 3px; flex: none; }
.td-check-label { min-width: 0; }
.td-check-amt { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.td-check-by { display: block; margin-left: 24px; color: var(--ink-3); font-size: 11px; }

.td-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.td-chat-row {
  padding: 8px 10px; border-radius: 8px; background: var(--paper);
}
.td-chat-who { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; }
/* ★ **立場は、名前のすぐ隣に。**誰の発言かが、読む前に分かるように。 */
.td-chat-party {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.td-chat-body { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }

.td-post { display: grid; gap: 6px; }
.td-post textarea {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; resize: vertical; background: var(--card, #fff); color: inherit;
  /* ★ **伸びすぎないようにする**（2026-08-30・画像で見つけた）。
     `rows="2"` を書いても、`.td-field` の格子が縦に引き伸ばすので、
     ★ **欄が画面の下まで伸びて、「書く」が画面の外に出ていた。**
     ——**書けるのに、送れない。** */
  min-height: 4.5em; max-height: 9em;
}
.td-post textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.td-post .btn { justify-self: start; }

/* ★ **読み上げにだけ渡す。**見た目には出さないが、
     **欄に名前が無いと、何を書く所か分からない人がいる。** */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}