:root {
  color: #173328;
  background: #f5faf6;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: #f5faf6;
  line-height: 1.6;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px max(20px, calc((100% - 1120px) / 2));
  border-bottom: 1px solid #d8e8dc;
  background: #fff;
}

.back-link {
  color: #21643a;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.topbar-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
}

nav,
.drawer-header {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 8px;
}

.admin-nav {
  padding-right: 16px;
  border-right: 1px solid #d8e8dc;
}

.admin-nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #355c45;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.admin-nav a:hover { background: #edf7ef; }

.admin-nav a[aria-current="page"] {
  border-color: #b9dfc2;
  background: #dff3e3;
  color: #185f32;
}

button,
input,
select,
textarea {
  font: inherit;
  font-size: 13px;
}

button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #355c45;
  cursor: pointer;
  font-weight: 700;
}

button:hover { background: #edf7ef; }

button[aria-current="page"],
.history-filters button[aria-pressed="true"] {
  border-color: #b9dfc2;
  background: #dff3e3;
  color: #185f32;
}

#app {
  width: min(100% - 40px, 1760px);
  margin: 0 auto;
  padding: 44px 0 64px;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  margin-bottom: 8px;
  color: #173328;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.25;
}

h2 { font-size: 20px; }

h3 {
  margin-bottom: 16px;
  font-size: 16px;
}

p {
  margin-bottom: 0;
  color: #52705d;
  font-size: 14px;
}

.eyebrow {
  margin-bottom: 6px;
  color: #287847;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.actor-control {
  width: min(100%, 240px);
  flex: 0 0 240px;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 20px;
}

/* 状態ごとの色。左の帯 + 背景 + 数字の 3 点で出す。
   0 件のカードは .summary-card-empty で無彩色に戻す (下の方に定義してあるので後勝ち) —
   「確認待ち 0件」を目立たせても意味がなく、色が多いほど何が大事か読めなくなるため。 */
.summary-card {
  --summary-accent: #cddbd2;
  --summary-bg: #fff;
  --summary-fg: #173328;
  display: grid;
  min-height: 126px;
  padding: 16px;
  border-color: #d4e6d8;
  border-left: 4px solid var(--summary-accent);
  background: var(--summary-bg);
  text-align: left;
}

/* 未振り分けは「悪い状態」ではないが、数が積み上がると誰も動いていない塊になる。
   他の状態と競合しない落ち着いた色で、無視はされない程度に出す */
.summary-card-unassigned {
  --summary-accent: #7d9186;
  --summary-bg: #f8faf9;
  --summary-fg: #2f4a3a;
}

.summary-card-doing {
  --summary-accent: #26864a;
  --summary-bg: #f2fbf4;
  --summary-fg: #185f32;
}

/* 確認待ち・止まっている = 人の行動を待っている状態。ここが一番目に入るべき */
.summary-card-review {
  --summary-accent: #d9a300;
  --summary-bg: #fffaec;
  --summary-fg: #765700;
}

.summary-card-blocked {
  --summary-accent: #c4453a;
  --summary-bg: #fef5f4;
  --summary-fg: #8b2f28;
}

.summary-card-done {
  --summary-accent: #8aa5ac;
  --summary-bg: #f5f8f9;
  --summary-fg: #3b5960;
}

.summary-card-empty {
  --summary-accent: #e3ebe5;
  --summary-bg: #fff;
  --summary-fg: #9aab9f;
}

.summary-card[aria-pressed="true"] {
  border-color: #26864a;
  box-shadow: 0 0 0 2px #ccebd5;
}

.summary-card-label,
.summary-card-help { font-size: 12px; }

.summary-card-count {
  color: var(--summary-fg);
  font-size: 24px;
  line-height: 1.25;
}

.summary-card-help {
  color: #5d7464;
  font-weight: 500;
}

.strategy-task-groups {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.strategy-task-groups-intro {
  color: #287847;
  font-size: 14px;
  font-weight: 800;
}

.strategy-task-track {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 12px;
}

.strategy-task-track:focus-visible {
  outline: 2px solid #26864a;
  outline-offset: 3px;
}

.strategy-task-group {
  display: flex;
  flex: 1 1 230px;
  min-width: 230px;
  max-width: 100%;
  flex-direction: column;
  gap: 10px;
  max-height: 74vh;
  padding: 12px;
  border: 1px solid #d4e6d8;
  border-radius: 12px;
  background: #fff;
}

.strategy-task-group-collapsed {
  flex: 0 0 180px;
  min-width: 180px;
  max-width: 180px;
  max-height: none;
}

.strategy-task-group-collapse {
  min-height: 26px;
  padding: 2px 8px;
  border-color: #d4e6d8;
  font-size: 11px;
  flex: none;
  white-space: nowrap;
}

.strategy-task-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.strategy-task-group-title {
  margin: 0;
  color: #185f32;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strategy-task-list {
  display: grid;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
}

.strategy-task-list .task-row {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  align-self: start;
  gap: 8px 12px;
  min-height: 0;
}

.strategy-task-list .task-row > *:not(.rank) {
  grid-column: 2;
  grid-row: auto;
  justify-self: start;
}

.strategy-task-list .task-row > .rank {
  grid-column: 1;
  grid-row: 1;
}

/* 高密度表示: 戦略列のカードは「順位+ID / タイトル / 担当+状態」だけに圧縮し、
   説明・作業場所・発案者・更新日はドロワー (クリックで開く) に退避する */
.strategy-task-list .task-row {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 8px;
  padding: 8px 10px;
  min-height: 0;
  /* 進捗ラインをカード下端に敷くための基準。overflow: hidden は角丸に沿わせるため
     (カード内に position: absolute の子は進捗ラインと対象エリアの帯だけ) */
  position: relative;
  overflow: hidden;
  /* 左端の帯は「対象エリアの色」1 本に絞る。状態の色 (border-left) と並べると
     4px の帯が 2 本立って意味が読めなくなるため。状態はチップ・背景の色味・
     下端の進捗ラインの 3 つで足りている */
  border-left-width: 0;
}

/* 進捗ラインを出すカードだけ、下端に線のぶんの余白を足して文字と重ならないようにする */
.strategy-task-list .task-row:not(.task-row-status-not_started),
.strategy-task-list .task-row-has-ai-progress { padding-bottom: 11px; }

.strategy-task-list .task-row .summary,
.strategy-task-list .task-row .workspace,
.strategy-task-list .task-row .creator,
.strategy-task-list .task-row .last-updated,
.strategy-task-list .task-row .task-progress-bar { display: none; }

/* タイトルの読みやすさ: 太字の長文が壁になるのでウェイトを落とし、
   色も緑がかった濃色ではなくニュートラルな黒に寄せる */
.strategy-task-list .task-row .task-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #24292e;
}
.strategy-task-list .task-row .rank { font-size: 10px; color: #8a978e; }

/* 管理番号 (E-PHCY-3 等) はカード上では見ないので隠す。ドロワー内には残る */
.strategy-task-list .task-row .source-id { display: none; }
.strategy-task-list .task-row .assignee,
.strategy-task-list .task-row .status { font-size: 11px; }
.strategy-task-list .task-row .priority-band { font-size: 10px; }

/* 状態セルの見せ方 (2026-08-11 修正)。
   もとは .status が「1 行ラベル用のピル装飾」と「縦積みの grid」を同時に持っていて、
   ピルの丸い背景が ラベル + バー + % の 3 行ぶんに引き伸ばされ、正体不明の塊に見えていた。
   カード側では装飾を .status から外し、状態はドット付きチップ、進捗はカード下端のラインにする。 */
.strategy-task-list .task-row .status {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  justify-self: stretch;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

.strategy-task-list .task-row .status-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--status-bg);
  color: var(--status-fg);
  font-weight: 700;
  line-height: 1.6;
}

/* カード上では「状態: 」は文脈から自明なので出さない (読み上げ用に DOM には残す) */
.strategy-task-list .task-row .status-label-prefix {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.strategy-task-list .task-row .status-label::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* デフォルト値はノイズなので隠す: 「担当: 未振り分け」と「状態: まだ始めていない」。
   作業中 / 確認待ち / 止まっている / 完了 と、担当が付いたものだけ表示して例外を目立たせる */
.strategy-task-list .task-row-unassigned .assignee { display: none; }
.strategy-task-list .task-row-status-not_started .status { display: none; }

/* 一旦保留: デフォルトでは一覧から消える (「保留も表示」で出す)。表示時は薄く + チップ */
.task-row-shelved { opacity: .55; }

/* 新着バッジ: この端末でまだ詳細を開いていないタスク (開くと消える) */
.new-chip {
  flex: 0 1 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E8837C;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.shelved-chip {
  flex: 0 1 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e8ebee;
  color: #5a6670;
  font-size: 10px;
  font-weight: 800;
}

.shelve-toggle { display: grid; gap: 6px; justify-items: start; }

.shelve-note {
  color: #5d7464;
  font-size: 12px;
}

/* 保留中タスクの常設一覧 (戦略列の下、折りたたみ式) */
.shelved-section {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.done-section { display: grid; gap: 10px; margin-bottom: 20px; }

.done-section-toggle {
  justify-self: start;
  padding: 8px 14px;
  border: 1px dashed #9fc3ad;
  border-radius: 10px;
  background: #fff;
  color: #2f6b45;
  font-size: 13px;
}

.done-section-heading { margin: 4px 0 0; font-size: 13px; color: #405c4b; }

.summary-card-done[aria-pressed="true"] { outline: 2px solid #9fc3ad; }

.shelved-section-toggle {
  justify-self: start;
  padding: 8px 14px;
  border: 1px dashed #b9cfc0;
  border-radius: 10px;
  background: #fff;
  color: #52705d;
  font-size: 13px;
}

/* 一覧ビューの進捗を見やすく: バーを太く・長く、%も添える */
.task-list .task-row .task-progress-bar {
  max-width: none;
  height: 9px;
}

.progress-percent {
  color: #52705d;
  font-size: 11px;
  font-weight: 800;
}

.strategy-task-list .task-row .progress-percent { display: none; }

/* 進捗が動いているタスクと AI 見立てのあるタスクは、上のカードにもバーと % を出す。
   バーはカードの最下端に敷く細いラインにして、情報が増えてもカードが縦に伸びないようにする */
.strategy-task-list .task-row:not(.task-row-status-not_started) .task-progress-bar,
.strategy-task-list .task-row-has-ai-progress .task-progress-bar {
  display: block;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-width: none;
  height: 4px;
  border-radius: 0;
  /* 地の色はカードの背景 (状態ごとに薄く色が付く) より必ず濃くする。
     薄すぎるとラインが敷かれていること自体が見えない */
  background: rgba(36, 62, 45, .12);
}

/* 下端のラインでは塗りの角を落とす。丸いままだと線ではなく浮いた粒に見える */
.strategy-task-list .task-row .task-progress-bar-fill { border-radius: 0; }

.strategy-task-list .task-row:not(.task-row-status-not_started) .progress-percent,
.strategy-task-list .task-row-has-ai-progress .progress-percent {
  display: inline;
  /* 状態チップが隠れている未着手カードでも右端に揃うよう、列を固定する
     (grid-column を指定しないと 1 列目に流れ込んで左寄りになる) */
  grid-column: 2;
  justify-self: end;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #6b8274;
}

/* 未着手でも AI 見立てが 0% 超なら status セルを出す (状態ラベルは隠したままバーと % だけ) */
.strategy-task-list .task-row-status-not_started.task-row-has-ai-progress .status { display: grid; gap: 2px; }
.strategy-task-list .task-row-status-not_started.task-row-has-ai-progress .status-label { display: none; }

/* ドロワー冒頭の進捗ヘッドライン: カードの % と同じ数字をタイトル直下で大きく見せる */
.drawer-progress-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 14px;
  border: 1px solid #d8e8dc;
  border-radius: 12px;
  background: #f7fbf8;
}

.drawer-progress-percent {
  color: #185f32;
  font-size: 20px;
  line-height: 1.2;
}

.drawer-progress-source {
  color: #7a8b80;
  font-size: 11px;
}

.drawer-progress-track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: #e3efe6;
  overflow: hidden;
}

.drawer-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #2f9256;
}

/* ドロワー内の AI 進捗内訳 */
.ai-progress {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #d8e8dc;
  border-radius: 12px;
  background: #f7fbf8;
}

.ai-progress-title { margin: 0; font-size: 14px; }

.ai-progress-rationale {
  color: #405c4b;
  font-size: 12.5px;
}

.ai-progress-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 4px;
  list-style: none;
  font-size: 12.5px;
}

.ai-progress-step { display: flex; gap: 8px; color: #52705d; }

.ai-progress-step-done { color: #185f32; }

.ai-progress-step-mark { flex: none; width: 14px; font-weight: 800; }

.ai-progress-note {
  color: #7a8b80;
  font-size: 11px;
}

/* 進捗ログ (施工プランの下。エージェントが作業のたびに 1 行追記、新しい順) */
.ai-progress-log { display: grid; gap: 4px; }

.ai-progress-log-title { margin: 4px 0 0; font-size: 12.5px; color: #2f4a3a; }

.ai-progress-log-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 4px;
  list-style: none;
  font-size: 12px;
}

.ai-progress-log-item { display: flex; gap: 8px; align-items: baseline; color: #405c4b; }

.ai-progress-log-date { flex: none; min-width: 38px; font-weight: 800; color: #52705d; }

.ai-progress-log-note { flex: 1; line-height: 1.5; }

/* いまエージェントが触っているタスク: 枠を点滅させて一目で分かるようにする */
@keyframes now-working-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 82, 0.55); border-color: #e05252; }
  50% { box-shadow: 0 0 0 6px rgba(224, 82, 82, 0); border-color: #f2a1a1; }
}

.task-row-now-working {
  border: 2px solid #e05252;
  animation: now-working-pulse 1.4s ease-in-out infinite;
}

.now-working-chip {
  flex: 0 1 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fde8e8;
  color: #b42323;
  font-size: 10px;
  font-weight: 800;
  animation: now-working-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .task-row-now-working, .now-working-chip { animation: none; }
}

/* BOARD に起票せず片付けた作業の完了カード */
.off-board-chip {
  flex: 0 1 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e6eef9;
  color: #2f4f7a;
  font-size: 10px;
  font-weight: 800;
}

.strategy-task-groups-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.strategy-task-groups-intro-row .button-secondary {
  flex: none;
  font-size: 12px;
  padding: 4px 12px;
  min-height: 30px;
}

.field {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #274d36;
  font-size: 13px;
  font-weight: 700;
}

.field-label { display: block; }

.field-help {
  color: #5d7464;
  font-size: 12px;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #b9cfc0;
  border-radius: 7px;
  background: #fff;
  color: #173328;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

.button-primary {
  background: #216b3a;
  color: #fff;
}

.button-primary:hover { background: #18572e; }

.button-secondary {
  border-color: #8ebc99;
  background: #edf7ef;
  color: #185f32;
}

.button-danger {
  border-color: #c9837b;
  background: #fff1ef;
  color: #842d26;
}

.button-danger:hover { background: #fbe2df; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 12px;
}

.result-count {
  color: #52705d;
  font-size: 13px;
  font-weight: 700;
}

.task-list { display: grid; min-width: 0; max-width: 100%; gap: 8px; }

.task-row {
  display: grid;
  align-self: start;
  height: auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  grid-template-columns: 54px minmax(160px, 1.1fr) minmax(200px, 1.5fr) 88px minmax(150px, .9fr) 150px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-color: #d4e6d8;
  background: #fff;
  text-align: left;
}

.task-row-compact {
  grid-template-columns: 48px minmax(220px, 1.8fr) 88px minmax(140px, .9fr) 150px;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px;
}

.task-row-compact .summary,
.task-row-compact .creator,
.task-row-compact .last-updated { display: none; }

.task-row:hover {
  border-color: #a8cfb1;
  background: #f9fcfa;
}

.rank,
.assignee,
.summary,
.creator,
.last-updated,
.workspace,
.status { font-size: 12px; }

.rank,
.assignee { color: #52705d; }

.task-title-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-title {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.source-id {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 3px 7px;
  border-radius: 7px;
  background: #e8f1ea;
  color: #315b3e;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
}

.source-haruka { background: #eee8ff; color: #55339a; }

.priority-band {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.priority-band-now { --band-color: #21643a; --band-bg: #dff3e3; }
.priority-band-next { --band-color: #245b83; --band-bg: #e1f1fb; }
.priority-band-waiting { --band-color: #765700; --band-bg: #fff1c9; }
.priority-band-later { --band-color: #65439a; --band-bg: #eee8ff; }
.priority-band-archive { --band-color: #4f6268; --band-bg: #e8edef; }

.priority-band.priority-band-now,
.priority-band.priority-band-next,
.priority-band.priority-band-waiting,
.priority-band.priority-band-later,
.priority-band.priority-band-archive {
  background: var(--band-bg);
  color: var(--band-color);
}

.priority-band-row { border-left: 4px solid var(--band-color); }

.summary {
  color: #52705d;
  font-weight: 500;
}

.creator,
.last-updated {
  color: #5d7464;
  font-weight: 500;
}

.task-row .creator { grid-column: 2 / 4; }
.task-row .last-updated { grid-column: 4 / -1; }

.status {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e8f1ea;
  color: #315b3e;
}

.workspace {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid #c9ddce;
  border-radius: 999px;
  background: #f4f8f5;
  color: #355c45;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* 状態ごとの色は変数で持つ。一覧ビューは .status 自体を色付きピルにし、
   戦略列のカードは中の .status-label をチップにするので、同じ値を両方から使う */
.status { --status-bg: #e8f1ea; --status-fg: #315b3e; }
.status-doing { --status-bg: #dff3e3; --status-fg: #185f32; }
.status-review { --status-bg: #fff1c9; --status-fg: #765700; }
.status-blocked { --status-bg: #fbe2df; --status-fg: #8b2f28; }
.status-done { --status-bg: #e4edef; --status-fg: #3b5960; }

.status-doing,
.status-review,
.status-blocked,
.status-done { background: var(--status-bg); color: var(--status-fg); }

.task-row > *,
.reorder-task-row > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.empty-state {
  padding: 34px;
  border: 1px dashed #b9cfc0;
  border-radius: 10px;
  text-align: center;
}

.reorder-empty-state {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.reorder-empty-message { max-width: 540px; }

.reorder-mode,
.reorder-task-list,
.idea-list,
.history-section,
.history-list {
  display: grid;
  gap: 12px;
}

.reorder-heading h2,
.idea-pool h2,
.history-header h2 { margin-bottom: 4px; }

.reorder-mode > .field { max-width: 560px; }

.reorder-task-row {
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #d4e6d8;
  border-radius: 8px;
  background: #fff;
}

.reorder-task-details {
  display: grid;
  min-width: 0;
  max-width: 100%;
  justify-items: start;
  gap: 3px;
}

.reorder-controls,
.idea-controls,
.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.history-filter-groups {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.reorder-button {
  min-width: 40px;
  border-color: #b9cfc0;
  background: #f9fcfa;
  font-size: 18px;
}

.reorder-button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.idea-pool {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid #cbd2ce;
  border-radius: 12px;
  background: #ecefed;
}

.idea-composer {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid #c9ddce;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(23 51 40 / 6%);
}

.idea-form {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) auto;
  align-items: end;
  gap: 16px;
}

.idea-form-heading { grid-column: 1 / -1; }

.idea-form-heading h2 { margin-bottom: 4px; }

.idea-form-heading p { color: #52655a; }

.idea-pool-help { color: #626d66; }

.idea-list { margin-top: 16px; }

.idea-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #c7ceca;
  border-radius: 8px;
  background: #f7f8f7;
}

.idea-card-details { display: grid; gap: 4px; }

.idea-title { color: #3e4d44; font-size: 14px; }

.idea-card p { color: #68736c; }

.idea-controls select { min-width: 128px; }

.history-section,
.idea-pool { margin-top: 28px; }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.history-filters {
  padding: 3px;
  border: 1px solid #d4e6d8;
  border-radius: 10px;
  background: #fff;
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-item {
  padding: 16px;
  border: 1px solid #d4e6d8;
  border-radius: 9px;
  background: #fff;
}

.history-item > * { margin-bottom: 4px; }

.history-item > *:last-child { margin-bottom: 0; }

.history-meta { color: #5d7464; font-size: 12px; }

.history-reason {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f1f6f2;
  color: #355c45;
}

.drawer-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgb(18 43 28 / 48%);
}

.task-drawer {
  position: relative;
  width: min(100%, 720px);
  max-width: none;
  height: auto;
  max-height: min(86vh, 880px);
  margin: 0;
  padding: 28px 32px;
  overflow-y: auto;
  border: 1px solid #c9ddce;
  border-radius: 16px;
  background: #fff;
  color: #173328;
  box-shadow: 0 24px 64px rgb(20 52 32 / 26%);
}

.drawer-actor-notice {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
  padding: 14px 16px;
  border: 1px solid #d8e8dc;
  border-radius: 10px;
  background: #f3f8f4;
  color: #355c45;
  font-size: 12px;
}

.drawer-actor-notice .field { max-width: 260px; }

.drawer-header {
  align-items: flex-start;
  justify-content: space-between;
}

.drawer-header h2 {
  margin-bottom: 8px;
  line-height: 1.35;
}

.drawer-close {
  flex: 0 0 auto;
  border-color: #d4e6d8;
}

.drawer-overview {
  padding-bottom: 4px;
  font-size: 12px;
}

.task-origin {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2ece4;
  color: #5d7464;
  font-size: 12px;
}

.discard-confirmation {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid #dca39d;
  border-radius: 9px;
  background: #fff7f5;
  box-shadow: 0 8px 20px rgb(74 34 28 / 10%);
}

.discard-confirmation h3,
.discard-confirmation p { grid-column: 1 / -1; }

.discard-confirmation h3 { margin-bottom: 0; }

.discard-confirmation p { color: #70443e; }

.discard-confirmation .button-danger { grid-column: 2; }

.drawer-form {
  display: grid;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #e2ece4;
}

.drawer-form:last-child { border-bottom: 0; }

.conditional-fields {
  display: grid;
  gap: 16px;
  padding: 16px;
  border-radius: 9px;
  background: #f3f8f4;
}

[hidden] { display: none !important; }

.form-note { font-size: 12px; }

#toast-root {
  position: fixed;
  z-index: 200;
  right: 20px;
  bottom: 20px;
}

.toast {
  max-width: min(400px, calc(100vw - 40px));
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #9dc8a7;
  border-radius: 9px;
  background: #e9f7ec;
  color: #174b2a;
  box-shadow: 0 8px 24px rgb(23 51 40 / 15%);
  font-size: 13px;
  font-weight: 700;
}

.toast-error {
  border-color: #dca39d;
  background: #fff0ee;
  color: #842d26;
}

.toast-neutral {
  border-color: #b9cfc0;
  background: #fff;
  color: #355c45;
}

:focus-visible {
  outline: 3px solid #26864a;
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-row { grid-template-columns: 52px 1fr 120px; }
  .task-row .summary { grid-column: 2 / -1; grid-row: 2; }
  .task-row .workspace { grid-column: 2; grid-row: 3; }
  .task-row .status { grid-column: 3; grid-row: 3; }
  .task-row .creator { grid-column: 2; grid-row: 4; }
  .task-row .last-updated { grid-column: 2 / -1; grid-row: 5; }
  .idea-card { grid-template-columns: 1fr; }
  .idea-form { grid-template-columns: 1fr 1fr; }
  .idea-form .button-primary { grid-column: 1 / -1; justify-self: start; }
  .idea-controls { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  #app { width: min(100% - 28px, 1120px); padding-top: 30px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .actor-control { width: 100%; flex-basis: auto; }
  .summary-cards { grid-template-columns: 1fr; }
  .summary-card { min-height: 108px; }
  .list-header { align-items: flex-start; flex-direction: column; }
  .task-row { grid-template-columns: 48px 1fr; gap: 8px 10px; }
  .task-row-compact {
    grid-template-columns: 48px 1fr;
    gap: 8px 10px;
    padding: 14px 16px;
  }
  .task-row-compact .summary,
  .task-row-compact .creator,
  .task-row-compact .last-updated { display: inline; }
  .task-row .summary,
  .task-row .assignee,
  .task-row .creator,
  .task-row .last-updated,
  .task-row .workspace,
  .task-row .status { grid-column: 2; }
  .task-row .summary,
  .task-row .creator,
  .task-row .last-updated,
  .task-row .workspace,
  .task-row .status { grid-row: auto; }
  .reorder-task-row { grid-template-columns: 42px minmax(0, 1fr); }
  .reorder-controls { grid-column: 2; }
  .idea-controls,
  .history-header { align-items: stretch; flex-direction: column; }
  .idea-form { grid-template-columns: 1fr; }
  .idea-form .button-primary { grid-column: auto; justify-self: stretch; }
  .idea-controls select { min-width: 0; }
  .history-filter-groups { justify-items: start; }
  .history-filters { align-self: flex-start; }
  .drawer-backdrop { padding: 16px 12px; }
  .task-drawer {
    width: 100%;
    max-height: 92vh;
    padding: 20px;
  }
  .discard-confirmation { grid-template-columns: 1fr; }
  .discard-confirmation .button-danger { grid-column: auto; }
}

@media (max-width: 240px) {
  #app { width: calc(100% - 16px); }
  .topbar { padding-inline: 8px; }
  .task-row,
  .reorder-task-row { padding: 10px; }
  .task-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .reorder-task-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .task-row > * {
    grid-column: 1;
    grid-row: auto;
  }
  .task-row .task-title-cell,
  .task-row .summary,
  .task-row .assignee,
  .task-row .creator,
  .task-row .last-updated,
  .task-row .workspace,
  .task-row .status {
    grid-column: 1;
    grid-row: auto;
  }
  .reorder-task-row > *,
  .reorder-controls {
    grid-column: 1;
    grid-row: auto;
  }
}

.status {
  display: grid;
  gap: 5px;
}

.task-progress-bar {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2ece4;
}

.task-progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2f9256;
}

.task-progress-bar-done .task-progress-bar-fill { background: #1f7a43; }
.task-progress-bar-blocked .task-progress-bar-fill { background: #c9615a; }
.task-progress-bar-not_started .task-progress-bar-fill { background: #b9cfc0; }

.task-progress {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d8e8dc;
  border-radius: 12px;
  background: #f7fbf8;
}

.task-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-progress-step { min-width: 0; }

.task-progress-step-button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 1px solid #d4e6d8;
  border-radius: 10px;
  background: #fff;
  color: #5d7464;
  text-align: center;
}

.task-progress-step-button[data-progress-step-state="done"] {
  border-color: #b9dfc2;
  background: #eaf6ed;
  color: #21643a;
}

.task-progress-step-button[aria-current="step"] {
  border-color: #26864a;
  background: #dff3e3;
  color: #15522c;
  box-shadow: 0 0 0 2px #ccebd5;
}

.task-progress-step-index {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.task-progress-step-label {
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-progress-blocked {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e6c2bd;
  border-radius: 9px;
  background: #fff1ef;
  color: #842d26;
  font-size: 12px;
  font-weight: 700;
}

.task-progress-blocked-toggle {
  justify-self: start;
  min-height: 32px;
  padding: 5px 10px;
  border-color: #e0d0c6;
  color: #8a5a3c;
  font-size: 12px;
}

.task-content {
  display: grid;
  gap: 16px;
  padding: 4px 0 0;
}

.task-content-heading {
  margin: 0 0 4px;
  color: #185f32;
  font-size: 13px;
}

.task-content-body {
  margin: 0;
  color: #274d36;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-content-block-unrecorded .task-content-body {
  color: #7d8f83;
  font-style: italic;
}

/* 出来ている画面のスクリーンショット。横並びで小さく置き、クリックで原寸を開く。
   幅は 160px 固定 = 縦長のスマホ画面 3 枚が狭い画面でも 1 行に収まる下限 */
.task-screenshot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.task-screenshot {
  margin: 0;
  width: 160px;
}

.task-screenshot-link {
  display: block;
  border-radius: 10px;
  border: 1px solid #cfe0d5;
  overflow: hidden;
  background: #fff;
  transition: border-color .15s;
}

.task-screenshot-link:hover {
  border-color: #7fb894;
}

.task-screenshot-image {
  display: block;
  width: 100%;
  height: auto;
}

.task-screenshot-caption {
  margin-top: 4px;
  color: #4d6b58;
  font-size: 12px;
  line-height: 1.5;
}

.task-reference-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-reference-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #bcd4f0;
  background: #eaf2fc;
  color: #1d4f91;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.task-reference-link:hover {
  background: #d9e8fb;
  border-color: #8fb6e6;
}

.task-reference-link::after {
  content: '↗';
  font-size: 11px;
  opacity: 0.7;
}

.task-edit-toggle { justify-self: start; }

/* --- 質問 (人を指定して聞く) --------------------------------------------- */

.task-questions {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid #e2ece4;
}

.task-questions-empty,
.questions-mode-empty {
  margin: 0;
  color: #7d8f83;
  font-size: 13px;
}

.task-question,
.question-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dcebe1;
  background: #f7fbf8;
}

.task-question-meta {
  margin: 0;
  color: #4d6b58;
  font-size: 12px;
  font-weight: 600;
}

.task-question-body {
  margin: 0;
  color: #274d36;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 回答は一目で「返ってきたもの」と分かるよう左に線を引く */
.task-question-answer {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid #7fb894;
  color: #185f32;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.task-question-pending {
  margin: 0;
  color: #a06b1f;
  font-size: 12px;
  font-weight: 600;
}

.task-question-answer-form,
.task-question-form {
  border-bottom: 0;
  padding: 12px 0 0;
  gap: 8px;
}

/* チェックボックスは幅指定を明示する。フォーム内の input は幅 100% になる規則があり、
   放っておくと巨大な四角になってラベルが下へ落ちる */
.question-blocks-field {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4d6b58;
  font-size: 13px;
  cursor: pointer;
}

.question-blocks-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* 「あなたに N 件の質問が来ています」の帯。読み飛ばされないよう色を変える */
.question-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid #e6c98f;
  background: #fdf6e7;
}

.question-banner-text {
  margin: 0;
  color: #7a5312;
  font-size: 14px;
  font-weight: 600;
}

/* 取り下げは目立たせない (誤操作を誘わない)。押せることは分かる程度に */
.question-withdraw {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #8a6d3b;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.questions-mode {
  display: grid;
  gap: 24px;
}

.questions-mode-group {
  display: grid;
  gap: 12px;
}

.questions-mode-heading {
  margin: 0;
  color: #185f32;
  font-size: 15px;
}

/* タスク名は押せる (押すとそのタスクの詳細が開く) と分かる見た目にする */
.question-card-task {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #1d4f91;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 640px) {
  .task-progress-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.task-row {
  border-left: 4px solid #d4e6d8;
}

/* 状態が一目で分かるよう、カード背景の濃さを揃える。
   薄い緑 (#f7fcf8) は白と見分けがつかず、「作業中」だけ無色に見えていた
   (「止まっている」の薄い赤は同じ濃さでも赤みとして認識されるため / 2026-08-11 K 指摘)。
   完了だけは薄いまま — 終わったものが目に入り続ける必要はない。 */
.task-row-status-not_started { border-left-color: #c2d6c8; }
.task-row-status-doing { border-left-color: #2f9256; background: #eaf7ef; }
.task-row-status-review { border-left-color: #d09a2c; background: #fff6e0; }
.task-row-status-blocked { border-left-color: #c9615a; background: #fdeeec; }
.task-row-status-done { border-left-color: #1f7a43; background: #f4faf6; }

/* 返事待ちの質問が付いたタスク。作業中でも「そこで止まっている」ので確認待ちの色にする。
   状態そのもの (task.status) は書き換えていない — 人が付けた状態を機械が変えないため。
   **状態色より後ろに置くこと**。同じ詳細度なので、前に置くと状態色に負けて効かない。 */
.task-row-question-pending {
  border-left-color: #d9a300;
  background: #fff6e0;
}

.question-pending-chip {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdeec2;
  color: #7a5312;
  font-size: 11px;
  font-weight: 700;
}

/* 「返事が来るまで進められない」と明示された質問は、確認待ちではなく止まっている扱い。
   .task-row-question-pending より後ろに置いて後勝ちさせる */
.task-row-question-blocking {
  border-left-color: #c4453a;
  background: #fdeeec;
}

.question-blocking-chip {
  background: #f8d7d3;
  color: #8b2f28;
}

/* 「作業中」なのにブランチが無いタスク。状態は書き換えず、そう見えることだけ伝える */
.stale-doing-chip {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed #c9a227;
  color: #7a5312;
  font-size: 11px;
  font-weight: 600;
}

.strategy-task-list .task-row .stale-doing-chip {
  grid-column: 1 / -1;
  justify-self: start;
}

/* 戦略列のカードでは状態セルが 2 列 grid なので、質問の行は全幅を取らせる。
   放っておくと 2 列目の狭い枠に押し込まれ、1 文字ずつ縦に折り返して読めなくなる */
.strategy-task-list .task-row .question-pending-chip {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
}

.strategy-task-list .task-row .question-blocking-reason {
  grid-column: 1 / -1;
  justify-self: stretch;
}

/* 何を聞かれているかが分からないと相手は動けない。カード上で判断できるよう 4 行まで出す
   (2 行だと「決めたいのは「どこ…」で切れて、結局開かないと分からなかった) */
.question-blocking-reason {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #8b2f28;
  font-size: 11px;
  line-height: 1.5;
}

/* ── 対象ごとの色分け (2026-08-06 けんせい方針、2026-08-08 はるか指示でドラッグストアを分離) ──
   ドラッグストア = 紫 / 調剤薬局 = オレンジ / 病院・クリニック = 赤 / To C = 青 / 共通基盤 = 緑。
   ドラッグストアと調剤薬局は対象(チェーン店 vs 個人経営薬局)が違うため、置き場所も色も分ける。
   1 タスク 1 エリアが原則なので、通常は左端に 1 色の帯が出る。
   例外的に 2 エリアへ割り当てたタスクだけ、2 色のストライプになる。 */
.strategy-task-groups {
  --area-drugstore: #7C4DBE;
  --area-pharmacy: #E8833C;
  --area-hospital: #D64545;
  --area-toc: #2F6FD0;
  --area-foundation: #2E9E63;
}

.strategy-task-group[data-strategy-group='drugstore']  { border-top: 4px solid var(--area-drugstore); }
.strategy-task-group[data-strategy-group='pharmacy']   { border-top: 4px solid var(--area-pharmacy); }
.strategy-task-group[data-strategy-group='hospital']   { border-top: 4px solid var(--area-hospital); }
.strategy-task-group[data-strategy-group='toc']        { border-top: 4px solid var(--area-toc); }
.strategy-task-group[data-strategy-group='foundation'] { border-top: 4px solid var(--area-foundation); }

.strategy-task-group[data-strategy-group='drugstore']  .strategy-task-group-title { color: #5B2E96; }
.strategy-task-group[data-strategy-group='pharmacy']   .strategy-task-group-title { color: #A9541C; }
.strategy-task-group[data-strategy-group='hospital']   .strategy-task-group-title { color: #962929; }
.strategy-task-group[data-strategy-group='toc']        .strategy-task-group-title { color: #1F4E96; }
.strategy-task-group[data-strategy-group='foundation'] .strategy-task-group-title { color: #185f32; }

/* カード左端の帯。単一エリアなら 1 色 */
.task-row[data-strategy-areas] { position: relative; padding-left: 16px; }
.task-row[data-strategy-areas]::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 6px;
  width: 4px;
  border-radius: 2px;
  background: #c9d6cd;
}
.task-row[data-strategy-areas~='drugstore']::before  { background: var(--area-drugstore, #7C4DBE); }
.task-row[data-strategy-areas~='pharmacy']::before   { background: var(--area-pharmacy, #E8833C); }
.task-row[data-strategy-areas~='hospital']::before   { background: var(--area-hospital, #D64545); }
.task-row[data-strategy-areas~='toc']::before        { background: var(--area-toc, #2F6FD0); }
.task-row[data-strategy-areas~='foundation']::before { background: var(--area-foundation, #2E9E63); }

/* 2 エリアに跨るタスクだけ 2 色。上半分と下半分で色を分ける */
.task-row[data-strategy-areas='drugstore pharmacy']::before {
  background: linear-gradient(180deg, var(--area-drugstore, #7C4DBE) 0 50%, var(--area-pharmacy, #E8833C) 50% 100%);
}
.task-row[data-strategy-areas='drugstore hospital']::before {
  background: linear-gradient(180deg, var(--area-drugstore, #7C4DBE) 0 50%, var(--area-hospital, #D64545) 50% 100%);
}
.task-row[data-strategy-areas='drugstore toc']::before {
  background: linear-gradient(180deg, var(--area-drugstore, #7C4DBE) 0 50%, var(--area-toc, #2F6FD0) 50% 100%);
}
.task-row[data-strategy-areas='pharmacy hospital']::before {
  background: linear-gradient(180deg, var(--area-pharmacy, #E8833C) 0 50%, var(--area-hospital, #D64545) 50% 100%);
}
.task-row[data-strategy-areas='pharmacy toc']::before {
  background: linear-gradient(180deg, var(--area-pharmacy, #E8833C) 0 50%, var(--area-toc, #2F6FD0) 50% 100%);
}
.task-row[data-strategy-areas='hospital toc']::before {
  background: linear-gradient(180deg, var(--area-hospital, #D64545) 0 50%, var(--area-toc, #2F6FD0) 50% 100%);
}

/* 施工プラン (手動編集の工程チェックリスト) */

/* プランの出自 + 承認状態 */
.plan-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef6f0;
  font-size: 12px;
}

.plan-provenance-text { color: #5d7464; font-weight: 700; }
.plan-provenance-approved { color: #185f32; }


/* ---- 既読者アバター (誰が確認済みか) ---- */
.seen-avatars { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.seen-avatar { border-radius: 50%; border: 2px solid transparent; }
.seen-avatar-seen { border-color: #2e9e5b; }
.seen-avatar-unseen { filter: grayscale(1); opacity: 0.35; }

/* ---- この端末を使う人: アバター選択 ---- */
.actor-avatar-picker { display: flex; gap: 10px; margin-top: 8px; }
.actor-avatar-button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px; border: 2px solid #d3ddd6; border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit;
}
.actor-avatar-button:hover { border-color: #7fae90; }
.actor-avatar-selected { border-color: #2e9e5b; background: #eef8f1; }
.actor-avatar-img { border-radius: 50%; }
.actor-avatar-name { font-size: 12px; font-weight: 700; }
.actor-avatar-selected .actor-avatar-name { color: #185f32; }
/* select はテスト・支援技術向けの実体として残し、視覚上はアバターに譲る */
.actor-select-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   E-INFRA-4 (2026-09-01): カードを「開かなくても読める」構成にする
   見出し (短い技術名) / 説明 (bizTitle) / 太い進捗バー + 大きい % + 工程数 /
   次にやること (誰が) / 止まっている理由 / 最終更新。文字は 13〜14px。
   けんせい指摘: 「一覧で見にくい」「どこまで進んでるか確認しにくい」
   ═══════════════════════════════════════════════════════════════════════ */

/* 列を広くする。5 列を無理に詰めず、入らなければ折り返す */
.strategy-task-group { flex: 1 1 300px; min-width: 300px; max-height: 78vh; }

.strategy-task-list { gap: 10px; }

.strategy-task-list .task-row {
  gap: 4px 10px;
  padding: 11px 13px 12px;
}

/* 旧: 下端 4px の進捗ラインと 10px の % は使わない (太いバーの段に置き換え) */
.strategy-task-list .task-row:not(.task-row-status-not_started),
.strategy-task-list .task-row-has-ai-progress { padding-bottom: 12px; }
.strategy-task-list .task-row:not(.task-row-status-not_started) .task-progress-bar,
.strategy-task-list .task-row-has-ai-progress .task-progress-bar,
.strategy-task-list .task-row:not(.task-row-status-not_started) .progress-percent,
.strategy-task-list .task-row-has-ai-progress .progress-percent { display: none; }
.strategy-task-list .task-row-status-not_started.task-row-has-ai-progress .status { display: none; }

/* 管理番号を出す (E-PHCY-8 など。相談・ブランチ名・質問で使う共通言語) */
.strategy-task-list .task-row .source-id { display: inline-block; font-size: 11px; padding: 2px 6px; }

.strategy-task-list .task-row .task-title-cell { gap: 6px; row-gap: 4px; }

/* 見出し = 短い技術名。14px 太字、黒に寄せる */
.strategy-task-list .task-row .task-title {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f2a24;
}

/* 説明 (bizTitle)。3 行で省略、全文はホバーで */
.strategy-task-list .task-row .task-card-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #465a4e;
  font-size: 12.5px;
  line-height: 1.55;
  justify-self: stretch;
}

/* 進捗の段: 太いバー + 大きい % + 工程数 */
.strategy-task-list .task-row .task-card-progress {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  justify-self: stretch;
  margin-top: 4px;
}

.strategy-task-list .task-row .task-card-bar {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(36, 62, 45, .12);
  overflow: hidden;
}

.strategy-task-list .task-row .task-card-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2e9a54;
}

.strategy-task-list .task-row-status-blocked .task-card-bar-fill { background: #c2542f; }
.strategy-task-list .task-row-status-done .task-card-bar-fill { background: #185f32; }

.strategy-task-list .task-row .task-card-percent {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1f4a30;
}

.strategy-task-list .task-row .task-card-steps {
  font-size: 11px;
  font-weight: 700;
  color: #6b8274;
  white-space: nowrap;
}

/* 次にやること: 「次 ▸ [けんせい] 画面を見て OK を出す」 */
.strategy-task-list .task-row .task-card-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  justify-self: stretch;
  color: #24382c;
  font-size: 12.5px;
  line-height: 1.5;
}

.strategy-task-list .task-row .task-card-next-label {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: #1f4a30;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}

.strategy-task-list .task-row .task-card-next-complete { color: #185f32; font-weight: 700; }

/* 誰が動くか (カードと施工プランで共通) */
.task-card-who {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8f1ea;
  color: #315b3e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.task-card-who-kensei { background: #dbeaf7; color: #1f4f7a; }
.task-card-who-haruka { background: #fbe4ec; color: #8a2f56; }
.task-card-who-anna { background: #f3e8fb; color: #5d3a8a; }
.task-card-who-business { background: #fff1d6; color: #7a5410; }
.task-card-who-doctor { background: #ffe3e0; color: #8a2b22; }

/* 止まっている理由: 薄い赤のバンドで、見落とさないように */
.strategy-task-list .task-row .task-card-stuck {
  justify-self: stretch;
  padding: 4px 8px;
  border-radius: 7px;
  background: #fdf0ec;
  color: #8a3a2a;
  font-size: 12px;
  line-height: 1.5;
}

.strategy-task-list .task-row .task-card-updated {
  color: #8a978e;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.strategy-task-list .task-row .rank { font-size: 11px; }
.strategy-task-list .task-row .assignee,
.strategy-task-list .task-row .status { font-size: 12px; }

/* 一覧ビュー (戦略列以外) ではカード本文の要素を出さない */
.task-list .task-row .task-card-description,
.task-list .task-row .task-card-progress,
.task-list .task-row .task-card-next,
.task-list .task-row .task-card-stuck,
.task-list .task-row .task-card-updated { display: none; }

/* ── 詳細 (ドロワー) 側 ── */
.ai-progress-stuck {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fdf0ec;
  color: #8a3a2a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.ai-progress-step { align-items: baseline; flex-wrap: nowrap; line-height: 1.6; }
.ai-progress-step > span:last-child { flex: 1 1 auto; min-width: 0; }
.ai-progress-who { margin-right: 2px; }

.ai-progress-tech {
  border: 1px dashed #c9dbcf;
  border-radius: 8px;
  padding: 6px 10px;
  color: #5d7464;
  font-size: 12px;
}
.ai-progress-tech-summary { cursor: pointer; font-weight: 700; }
.ai-progress-tech-body {
  margin: 6px 0 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.task-content-block-collapsible .task-content-collapsible {
  border: 1px dashed #c9dbcf;
  border-radius: 8px;
  padding: 6px 10px;
  color: #5d7464;
}
.task-content-block-collapsible .task-content-heading { cursor: pointer; margin: 0; font-size: 12.5px; }
.task-content-block-collapsible .task-content-body { margin: 6px 0 0; font-size: 12.5px; color: #5d7464; }

/* 「[けんせい] が 〜する」の「が」と、施工プランの「誰が動くか」凡例 (2026-09-01) */
.task-card-who-particle { flex: none; color: #6b8274; font-size: 11px; }
.ai-progress-who-legend {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef5f0;
  font-size: 12px;
}
.ai-progress-who-legend-title { font-weight: 800; color: #2f4a3a; }
.ai-progress-who-legend-row { display: flex; gap: 8px; align-items: baseline; margin: 0; }
.ai-progress-who-legend-role { color: #405c4b; line-height: 1.5; }