:root {
  --bg: #f4efe7;
  --panel: #fffdf9;
  --panel-2: #f6f0e5;
  --ink: #2f2a25;
  --muted: #7d7268;
  --line: #ddd2c2;
  --accent: #b5793a;
  --floor: #d9c2a0;
  --wall: #f1e9da;
  --ok: #3d8a63;
  --warn: #b5533a;
  --shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 8px 24px rgba(60, 45, 30, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a18;
    --panel: #262320;
    --panel-2: #2e2a26;
    --ink: #ece5db;
    --muted: #a3978a;
    --line: #3b352f;
    --accent: #d59a5a;
    --floor: #3b332a;
    --wall: #2a2622;
    --ok: #6cbf95;
    --warn: #e08a70;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

/* **`hidden` を確実に効かせる。**
   `display: flex` などを当てた要素に `hidden` を付けても、
   クラスの指定のほうが強くて消えない（タブが隠れない不具合を実際に踏んだ）。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 横向きにしたときに Safari が本文を勝手に拡大するのを止める。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* ダブルタップ拡大とピンチ拡大を無効化する。スクロールは pan-x pan-y で残る。
     iOS はこれを無視するので、各ページの gesturestart 抑止と併用すること。 */
  touch-action: pan-x pan-y;
}

.spacer { flex: 1; }

/* ---------------------------------------------------------------- 全体構成 */

/* 社員ひとりぶんの幅。オフィスの部品はすべてこれを基準に伸縮させる。
   固定 px のままだと、中央の列が狭まったときに机や人が折り返して崩れる。 */
:root {
  --w: clamp(96px, 12vw, 148px);
  /* 部屋の中の人の大きさ。**什器より小さくすること。**
     人を大きくすると机が隠れ、部屋ではなく人の並びに見える（実際にそうなった）。 */
  --actor-w: clamp(54px, 6.4vw, 86px);
  /* 壁の高さ。**床はこの下から始まる。**
     ホワイトボードを窓の高さに合わせた（社長の指定）ぶん壁が高くなったので、
     ここも上げてある。**壁の中身を大きくしたら必ずここも見ること。**
     足りないと、壁の下端が床に食い込む。 */
  --wall-h: clamp(216px, 30vh, 280px);
}

/* 画面を 3 分割して、中央のオフィスに残り全部を渡す */
.app {
  display: grid;
  grid-template-columns: auto 1fr minmax(320px, 380px);
  /* 行を明示しないと中身なりの高さになり、子の overflow が効かなくなる */
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
}

/* ---------------------------------------------- 横に並ぶ操作の高さ
   **並べたものの高さは揃える。**`.btn` `.linkbtn` `input` `select` は
   文字の大きさも余白も違うので、そのまま並べると段差になる。
   **行ごとに直していると、また別の行で同じことが起きる**
   （社長の指摘が 3 回続いた。入力欄・ダイアログ・会話の切り替え）。
   高さをここ 1 か所で持ち、横並びの箱の中では全員がこれを見る。 */
:root { --control-h: 34px; }

.settings-section .row > .btn,
.settings-section .row > .linkbtn,
.settings-section .row > input,
.settings-section .row > select {
  height: var(--control-h);
}

.linkbtn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.linkbtn:hover { color: var(--ink); border-color: var(--accent); }
/* ボタンの形をした <a>（ダウンロードなど）。下線が出ると押す場所に見えない。 */
a.linkbtn { text-decoration: none; display: inline-block; }
.linkbtn.danger:hover { color: var(--warn); border-color: var(--warn); }

.btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------- 記号（アイコン）
   **道具側の文字に絵文字は使わない。**絵文字は端末が持っている絵なので、
   形も大きさも揃わない。歯車（⚙＝ただの文字）とベル（🔔＝絵文字）を
   並べたときに、歯車だけ小さく見えた（社長の指摘）。
   線画の SVG に統一し、**大きさと線の太さはここ 1 か所で持つ。**
   個々の SVG では width/height も stroke も書かないこと。 */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 文章の中に混ぜるときだけ、行に沿わせて少し小さくする */
.icon--inline {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
}

/* 認証状態の点。押すと入り直せるので、押せることが分かる程度に枠を付ける。 */
.cli-status {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex: none;
}
.cli-status:hover { border-color: var(--line); background: var(--panel); }

/* 認証が切れているときは、点だけでは気づけないので文字も出して目立たせる。
   ここが赤くなっていたら「入り直さないと何も動かない」という意味。 */
.cli-status.is-out {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  grid-auto-flow: column;
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  animation: auth-alert 1.6s ease-in-out infinite;
}
.cli-status.is-out .cli-dot { background: var(--warn); }
.cli-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--warn);
  white-space: nowrap;
}
.cli-status:not(.is-out) .cli-label { display: none; }

@keyframes auth-alert {
  0%, 100% { background: color-mix(in srgb, var(--warn) 8%, transparent) }
  50%      { background: color-mix(in srgb, var(--warn) 24%, transparent) }
}

@media (prefers-reduced-motion: reduce) {
  .cli-status.is-out { animation: none; }
}

.cli-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
.cli-dot.ok { background: var(--ok); }
.cli-dot.warn { background: var(--warn); }

/* ---------------------------------------------------------------- 左レール */

.rail {
  grid-area: 1 / 1;
  width: 244px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: width 0.18s ease;
}
.rail.collapsed { width: 0; border-right-color: transparent; }

.rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 48px;   /* 浮かせたトグルの下を空ける */
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  min-height: 50px;
}

/* レールの外に浮かせる。レールが隠れてもボタンだけは残る */
.rail-toggle {
  position: fixed;
  /* **ヘッダー（44px）の中で縦中央に置く。**ヘッダーを作る前の値のままだと
     下にずれて見える（社長の指摘）。 */
  top: 7px;
  left: 10px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.rail-toggle:hover { color: var(--ink); border-color: var(--line); background: var(--panel); }

/* レールを重ねて開いたときに、後ろを押して閉じられるようにする */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(30, 22, 14, 0.35);
  border: none;
}

/* min-height:0 が要る。**これが無いと、件数が多いときに一覧が伸びきって、
   下の更新ボタンが画面の外へ押し出される。** */
.project-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* プロジェクトに関係のないもの（アプリ・利用者・アカウント）の置き場所。
   歯車は「いま開いているプロジェクト」だけを扱う、という切り分け。 */
.rail-foot {
  margin-top: auto;          /* 一覧が短くても下端に貼り付く */
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}

.rail-link {
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.rail-link:hover { background: var(--panel-2); color: var(--ink); }

/* 更新があることの印。**畳んでいても見える場所（開閉ボタン）にも付ける。**
   ボタン自体は一覧の下にあるので、畳むと丸ごと見えなくなる。 */
/* 印（右上の丸）を置くための土台。
   **付ける相手が既に位置を持っているときは、上書きしないこと。**
   `.rail-toggle` は `fixed` で浮かせてある。ここで `relative` に戻すと
   流れの中へ入り、**後ろにあるもの全部がその高さぶん下へずれる。**
   実際、更新がある間だけ画面全体が 30px 下がっていた。
   `fixed` も `absolute` も、それ自体が中の `absolute` の土台になるので、
   土台としては何も足さなくてよい。 */
.has-update { position: relative; }
.rail-toggle.has-update { position: fixed; }
.has-update::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  /* 下地が場所によって違う（レールの上と本文の上）。細い縁で切り分ける。 */
  box-shadow: 0 0 0 1.5px var(--bg);
  animation: update-pulse 2s ease-in-out infinite;
}

@keyframes update-pulse {
  0%, 100% { transform: scale(1);   opacity: 1 }
  50%      { transform: scale(1.35); opacity: 0.75 }
}
@media (prefers-reduced-motion: reduce) {
  .has-update::after { animation: none; }
}

/* 更新があるときだけ、一覧の下に出る。
   **設定を開かないと気づけなかった**ので、いつも見えるところに置く。 */
.rail-update {
  margin: 0 0 6px;
  padding: 9px 10px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-update:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.rail-update:disabled { opacity: 0.6; cursor: progress; }
/* 取り込み済みで再起動していないときは、性質が違うので色を分ける */
.rail-update.is-restart {
  border-color: var(--warn);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.rail-update.is-restart:hover { background: color-mix(in srgb, var(--warn) 22%, transparent); }

.project-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.project-item:hover { background: var(--panel-2); }
.project-item.active { background: var(--panel-2); border-left-color: var(--accent); font-weight: 600; }
.project-item .meta { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.project-list .empty { padding: 20px 14px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- オフィス */

.stage { grid-area: 1 / 2; position: relative; overflow: hidden; min-height: 0; background: var(--wall); }

.blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.gauge { display: grid; gap: 2px; font-size: 10.5px; color: var(--muted); }
.gauge-top { display: flex; justify-content: space-between; align-items: baseline; }
.gauge-top b { font-size: 10px; font-weight: 700; }
.gauge-top span { font-size: 11px; font-weight: 700; color: var(--ink); }
.gauge-bar {
  display: block;
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
/* これまでの山の高さ。**いまの値だけでは、プランが妥当か分からない。**
   見ている瞬間がたまたま暇なだけ、ということが普通に起きる。 */
.gauge-bar u {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.gauge-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--office-accent, var(--accent));
  transition: width 0.4s ease;
}
.gauge-rest { font-size: 10px; }
.gauge.is-warn .gauge-bar i { background: #d08a3a; }
.gauge.is-danger .gauge-bar i { background: var(--warn); }
.gauge.is-danger .gauge-top span,
.gauge.is-danger .gauge-rest { color: var(--warn); }

.decor { display: block; overflow: visible; }
.decor--clock { width: 100%; aspect-ratio: 1; height: auto; }
.clock-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;   /* 分が変わるたびに幅が動かないように */
  letter-spacing: 0.02em;
}

/* 歩いているあいだの上下。歩幅に合わせるのではなく、動いていることが
   分かればよいので浅く短く。 */
@keyframes actor-step {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes blink {
  0%, 100% { opacity: 0.25 }
  50%      { opacity: 1 }
}
.phase {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel);
}
.phase::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.phase.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.phase.active::before { background: var(--accent); }
.phase.done { color: var(--ok); }
.phase.done::before { background: var(--ok); }

/* 社内ログ。左下に小さく重ねる */
.log {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  max-width: 320px;
  /* パスやコマンドが並ぶ場所。長い英字は既定では折り返されない */
  overflow-wrap: anywhere;
  max-height: 96px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.log:empty { display: none; }

/* --- 画像の拡大表示 --- */

.viewer {
  border: none;
  background: none;
  padding: 0;
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
}
.viewer::backdrop { background: rgba(20, 15, 10, 0.82); }
.viewer img {
  display: block;
  max-width: 94vw;
  max-height: 86vh;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
.viewer-name {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: #f2ece2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.composer textarea {
  display: block;
  width: 100%;
  resize: none;
  min-height: 46px;
  max-height: 160px;
  /* **左右にボタンのぶんの余白を取る。**これが無いと文字がボタンの下に潜る。 */
  padding: 12px calc(var(--btn-size) + 30px) 12px calc(var(--btn-size) + 14px);
  border: none;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font: inherit;
  /* 16px を下回らせないこと。iOS がフォーカス時に画面を拡大する。 */
  font-size: 16px;
  line-height: 1.4;
}
.composer textarea:focus { outline: none; }

/* ---------------------------------------------------------------- モーダル */

.modal {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  padding: 24px;
  width: min(460px, 92vw);
  box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(30, 22, 14, 0.45); }
.modal h2 { font-size: 16px; margin: 0 0 6px; }
.modal .hint { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.modal label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.modal input, .modal textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  /* 16px を下回らせないこと。iOS がフォーカス時に画面を拡大する。 */
  font-size: 16px;
  resize: vertical;
}
.modal input:focus, .modal textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* ボタンは中央に置く（社長の指定）。右端に寄せると、幅の広いダイアログで
   本文から目線が遠くなる。
   **横に並ぶボタンは高さを揃える。**`.btn` と `.linkbtn` は文字の大きさも
   余白も違うので、そのまま並べると段差になる（社長の指摘）。
   高さはここ 1 か所で持ち、両方がそれを見る。 */
/* **本文との間は必ず空ける。**ここを持っていなかったので、直前が
   入力欄でないダイアログ（資料・カード）ではボタンが本文に貼り付いていた
   （社長の指摘）。**行ごとに空けない。**また別のダイアログで同じことが起きる。
   直前が入力欄のときは、その margin-bottom と重なって 18px のままになる。 */
.modal-actions {
  --action-h: 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}
.modal-actions .btn,
.modal-actions .linkbtn {
  height: var(--action-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-actions .btn { padding: 0 18px; }
.modal-actions .linkbtn { padding: 0 14px; }

.modal--wide { width: min(620px, 94vw); max-height: 88vh; overflow-y: auto; }
/* カードの窓。**中身が増えたので広げた**（2026-08-28。社長の指定）。
   本文と経過は内側でスクロールさせず縦に伸ばし、窓ごとスクロールする
   （箱が二重にスクロールすると、どこを触っているのか分からなくなる）。 */
.modal--card { width: min(800px, 94vw); }

/* 聞くためだけの小さいダイアログ（confirm / prompt の代わり）。
   **本文は改行をそのまま出す。**「何が起きるか」を 2 行目以降に書いているので、
   1 行に詰めると読み飛ばされる。 */
.modal--ask { width: min(420px, 92vw); }
.ask-text { margin: 0; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; }
/* 消す・止めるを聞くときは、押すほうを赤で塗る */
.btn.danger { background: var(--warn); }

/* 閉じるボタンを置いていないので、閉じ方をここで伝える。
   ダイアログはスクロールするので、下端に貼り付けて常に見えるようにする
   （下まで送らないと見えないと、閉じ方が分からないまま迷う）。 */
/* 認証 URL は長いので折り返す。押せることが分かるよう色を付ける。 */
.auth-url {
  display: inline-block;
  font-size: 12px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.hint--dismiss {
  position: sticky;
  bottom: -24px;          /* .modal の padding ぶん食い込ませて余白を作らない */
  margin: 4px -24px -24px;
  padding: 10px 24px 12px;
  text-align: center;
  font-size: 11.5px;
  background: linear-gradient(to bottom, transparent, var(--panel) 55%);
}
.modal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
}

.settings-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.settings-section h3 { font-size: 13px; margin: 0 0 8px; }
.settings-sub { font-size: 12px; margin: 16px 0 8px; color: var(--muted); }
/* .row は align-items:flex-start なので、単体の文字だけボタンと高さが揃わない */
.settings-section .row .hint { align-self: center; margin: 0; white-space: nowrap; }
/* 高さは上の `--control-h` で揃えてある。縦は中央で合わせる
   （上端揃えだと、高さが同じでも文字の位置がずれて見える）。 */
.settings-section .row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
/* **入力欄を横幅いっぱいにしない。**`.modal input` の `width: 100%` が
   そのまま効くと、入力欄だけで 1 行を使い切り、隣のボタンが下へ落ちる
   （「リモート URL ＋ 保存」が 2 行に割れていた）。
   狭い画面では 220px を切った時点で、これまで通り折り返す。 */
.settings-section .row input { margin-bottom: 0; width: auto; flex: 1 1 220px; min-width: 0; }
.settings-section .row .linkbtn { padding: 9px 12px; }

.st-status {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.st-status.err { color: var(--warn); }
.st-status.ok { color: var(--ok, #2e7d32); }
/* 文の途中に挟む注意書き。**印と文字は必ず同じ色にする。**
   印だけ色が違うと、どこからが注意なのか読み取れない。 */
.warn-note { color: var(--warn); white-space: nowrap; }
.warn-note .icon { margin-right: 4px; }

/* FTP 接続フォーム。狭い画面では label を上に落とす */
.ftp-form {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin-bottom: 10px;
}
.ftp-form label { font-size: 12px; color: var(--muted); margin: 0; }
.ftp-form input, .ftp-form select { margin: 0; width: 100%; }
@media (max-width: 480px) {
  .ftp-form { grid-template-columns: 1fr; gap: 4px; }
  .ftp-form label { margin-top: 6px; }
}

/* フォルダ選択 */
.crumbs { font-size: 12px; margin: 0 0 8px; word-break: break-all; }
.crumbs a { color: var(--accent, #2563eb); text-decoration: none; }
.crumbs .sep { margin: 0 4px; color: var(--muted); }
.ftp-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
}
.ftp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-family: inherit;
}
.ftp-row:last-child { border-bottom: 0; }
.ftp-row:not(.is-file) { cursor: pointer; }
.ftp-row:not(.is-file):hover { background: var(--hover, rgba(127,127,127,0.08)); }
.ftp-row.is-file { color: var(--muted); }
/* 一覧の記号。フォルダは目立たせ、ファイルは字と同じ濃さで沈める */
.ftp-row .ic { flex: none; width: 16px; height: 16px; }
.ftp-row:not(.is-file) .ic { color: var(--accent); }
.ftp-row .tag {
  margin-left: auto;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* 同期の進捗。数分かかるので、押したあと無反応に見える時間を作らない */
.sync {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--panel, rgba(127, 127, 127, 0.06));
}
.sync-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.sync-head .dir { font-weight: 600; }
.sync-head .phase { color: var(--muted); }
.sync-head .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.sync-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.sync-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  transition: width .3s ease;
}
/* 総数が分からない段階（一覧を調べている間）は流れる縞で「動いている」ことだけ示す */
.sync-fill.is-idle {
  background: repeating-linear-gradient(
    90deg, var(--accent, #2563eb) 0 10px, transparent 10px 20px);
  animation: sync-scroll 0.8s linear infinite;
}
@keyframes sync-scroll { to { background-position: 20px 0; } }
.sync.is-done .sync-fill { background: var(--ok, #2e7d32); animation: none; }
.sync-label {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;      /* 長いパスは末尾（ファイル名）を残したい */
  text-align: left;
}

/* 設定画面のタブ。項目が増えたので分けている */
.tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 4px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs .tab {
  flex: none;
  padding: 8px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tabs .tab.is-active {
  color: inherit;
  border-bottom-color: var(--accent, #2563eb);
}

/* 発行された接続情報。読んで書き写すためのものなので選択しやすくする */
.cred {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.cred-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.cred-row:last-child { border-bottom: 0; }
.cred-row .k { flex: none; width: 92px; color: var(--muted); font-size: 12px; }
.cred-row .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
  word-break: break-all;
}

#st-ignore {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.env-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.env-row .k { font-family: ui-monospace, Menlo, monospace; font-weight: 600; flex: none; }
.env-row .v {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  /* 長い値でも行を突き破らないように折り返す。 */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 表示中の値は伏せ字と見分けがつくようにして、選択してコピーできるようにする。 */
.env-row .v.is-revealed { color: var(--ink); user-select: all; }

.env-row.is-editing { flex-wrap: wrap; }
.env-row input {
  flex: 1;
  min-width: 140px;
  height: 38px;
  padding: 0 10px;
  margin-bottom: 0;
  font-family: ui-monospace, Menlo, monospace;
}

/* 利用者の行。名前と役割は隣り合わせに置き、操作は右へ寄せる。
   狭い画面では折り返して、ボタンが枠から出ないようにする。 */
.env-row .who { font-weight: 600; flex: none; }
.env-row .tag {
  flex: none;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.env-row .tag.is-master { color: var(--accent); border-color: var(--accent); }
.env-row .tag.is-off { color: var(--warn); border-color: var(--warn); }
.env-row.is-off .who { text-decoration: line-through; color: var(--muted); }
.env-row select { width: auto; height: 30px; margin: 0; padding: 0 6px; font-size: 12px; }

/* 参加させるプロジェクトの選択。数が増えても縦に伸びすぎないようにする。 */
.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
}
.check-list label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0; }
.check-list input { width: auto; margin: 0; }

.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.switch input { width: auto; margin: 0; }

.warn-box {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
}

.error { color: var(--warn); font-size: 12.5px; margin: 0 0 12px; min-height: 18px; }

@keyframes think {
  0%, 100% { opacity: 0.25 }
  40%, 70% { opacity: 1 }
}
@keyframes think-pop {
  0%, 100% { transform: translateY(1.5px) scale(0.86) }
  45%      { transform: translateY(0) scale(1) }
}

@keyframes bob {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-2.5px) }
}
@keyframes type-l {
  from { transform: translate(var(--al, 28px), var(--ay, 94px)) rotate(-16deg) }
  to   { transform: translate(var(--al, 28px), var(--ay, 94px)) rotate(-26deg) }
}
@keyframes type-r {
  from { transform: translate(var(--ar, 72px), var(--ay, 94px)) rotate(16deg) }
  to   { transform: translate(var(--ar, 72px), var(--ay, 94px)) rotate(26deg) }
}
@keyframes gesture {
  from { transform: translate(var(--ar, 72px), var(--ay, 94px)) rotate(-26deg) }
  to   { transform: translate(var(--ar, 72px), var(--ay, 94px)) rotate(-68deg) }
}
@keyframes shift {
  0%, 100% { translate: 0 0 }
  30%      { translate: -2.5px 0 }
  65%      { translate: 2.5px 0 }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(4px) }
  to   { opacity: 1; transform: none }
}

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

/* 中央の列が狭くなるとオフィスが崩れるので、
   ここから下ではレールを場所を取らない「重ね表示」に切り替える。 */
@media (max-width: 1180px) {
  .app { grid-template-columns: 0 1fr minmax(300px, 360px); }

  .rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 256px;
    box-shadow: 8px 0 24px rgba(60, 45, 30, 0.18);
    transform: translateX(0);
    transition: transform 0.2s ease;
  }
  .rail.collapsed { width: 256px; transform: translateX(-100%); }
}

/* スマホ・縦長。
   **オフィスを画面いっぱいに広げ、チャットをその上に乗せる。**

   以前はオフィスを上の 220px の帯に押し込んでいた。壁を出す高さが無いので
   `display: none` にしていたが、そのせいで**時計・窓の天気・ホワイトボード・
   枠の残りが、スマホでは 1 つも出ていなかった。**
   壁は「開かないと分からない場所には置かない」ための場所（76 番）なので、
   出ないのでは置いた意味が無い。

   帯をやめて部屋を画面いっぱいにし、チャットは下から乗せる引き出しにした。
   既定では壁が全部見える高さで止まり、つまみで全開・畳むに動かせる。 */
@media (max-width: 820px) {
  :root {
    --w: 84px;
    --actor-w: 54px;
    /* 壁の高さ。**中身から決めている。**上に見出しのぶん 40px、
       下段のホワイトボードに 90px 前後を残す量。 */
    --wall-h: clamp(236px, 31dvh, 272px);
    /* 引き出しの高さ。段（畳む・標準・全開）に応じて JS が書き換える。 */
    --sheet-h: 50dvh;
  }

  .app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .stage { grid-area: 1 / 1; }

  /* ホームバーの下に入力欄が潜らないように（viewport-fit=cover のため） */
  .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #p-system      { grid-area: 2 / 3; }
  .gauge         { flex: 1; min-width: 0; }
  .phase { flex: none; }
  .phase { font-size: 10.5px; padding: 2px 8px; }
  .log { display: none; }
}

/* 横向きのスマホ。**壁を出す高さが無い。**
   縦が 400px 前後しかないので、壁（236px 以上）を出すと床がほとんど残らず、
   人が重なって誰が誰だか分からなくなる。ここだけは壁を諦めて床を見せる。
   壁の中身を見たいときは縦に持ち替える、という割り切り。

   **幅の上限は 820px では足りない。**いまの iPhone は横向きだと 844〜932px
   あり、この条件から外れて広い画面の組み方（3 列・壁 216px）に入っていた。
   縦 390px のうち 216px を壁が占め、ホワイトボードは 136px の枠に 303px の
   中身を抱えて切れていた。**この崩れは今回の作り直しより前からある。**
   950px にすれば Pro Max（932px）まで入る。 */
@media (max-height: 560px) and (max-width: 950px) {
  :root { --w: 78px; --actor-w: 50px; --wall-h: 42px; --sheet-h: 62dvh; }
}

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

/* 背景は昼夜どちらの設定でも「日が落ちたオフィス街」で固定する。
   ライトテーマに合わせて明るくすると窓の灯りが効かず、ただの
   格子模様に見えてしまうため。カードだけはテーマに追従させる。 */
:root {
  --login-tower-front: #100e0d;
  --login-tower-mid: #191512;
  --login-tower-far: #221b16;
  --login-win: rgba(255, 245, 230, 0.07);
  --login-win-lit: #ffc16b;
  --login-card: rgba(255, 253, 249, 0.9);
  --login-sheen: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root {
    --login-card: rgba(34, 30, 27, 0.86);
    --login-sheen: rgba(255, 255, 255, 0.14);
  }
}

/* ログイン画面だけは縦に伸びてよい。body の overflow: hidden のままだと
   キーボードが出たときに入力欄が画面外に押し出されて触れなくなる。 */
body.login-body { overflow: auto; }

/* --- 背景 --- */

.login-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #0c0a10 0%, #171320 34%, #3b2820 68%, #6b4526 100%);
}

/* 地平線の残照。ビルの足元を明るくして、シルエットを浮かび上がらせる。 */
.login-glow {
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: min(1400px, 190vw);
  aspect-ratio: 2 / 1.35;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 172, 84, 0.55) 0%,
    rgba(214, 110, 50, 0.28) 38%,
    transparent 68%);
}

.login-skyline {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 1.1vw, 12px);
}

.login-tower {
  --win: clamp(7px, 1.5vw, 13px);
  --gap: clamp(4px, 0.9vw, 8px);
  position: relative;
  flex: none;
  padding: calc(var(--gap) * 2.5) var(--gap) 0;
  border-radius: 3px 3px 0 0;
  background: var(--login-tower-front);
}
/* 遠いビルほど明るく霞ませる。空気遠近で奥行きが出る。 */
.login-tower.is-mid  { background: var(--login-tower-mid); }
.login-tower.is-far  { background: var(--login-tower-far); }
.login-tower.is-far  { --win: clamp(5px, 1.1vw, 10px); --gap: clamp(3px, 0.7vw, 6px); }

/* いちばん高いビルには屋上灯を立てる。 */
.login-tower.is-front::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: clamp(14px, 3vh, 28px);
  background: var(--login-tower-front);
  transform: translateX(-50%);
}
.login-tower.is-front::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(14px, 3vh, 28px));
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #ff6b4a;
  box-shadow: 0 0 8px 2px rgba(255, 107, 74, 0.75);
  animation: login-beacon 3.4s ease-in-out infinite;
}

@keyframes login-beacon {
  0%, 100% { opacity: 1; }
  55%, 85% { opacity: 0.15; }
}

.login-windows {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--win));
  gap: var(--gap);
}
.login-windows span {
  aspect-ratio: 3 / 4;
  border-radius: 1px;
  background: var(--login-win);
}
.login-windows span.is-lit {
  background: var(--login-win-lit);
  box-shadow: 0 0 7px rgba(255, 193, 107, 0.65);
}
.login-windows span.is-flicker { animation: login-flicker 14s ease-in-out infinite; }

@keyframes login-flicker {
  0%, 44%, 100% { opacity: 1; }
  48%, 62% { opacity: 0.12; }
  66% { opacity: 1; }
}

.login-ground {
  position: absolute;
  inset: auto 0 0;
  height: clamp(8px, 2.4vh, 22px);
  background: var(--login-tower-front);
}

/* --- カード --- */

.login-wrap {
  position: relative;
  z-index: 1;
  /* dvh にしないと、モバイルのアドレスバーぶんだけ中身が下にずれる。 */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
           calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

.login-card {
  position: relative;
  width: min(380px, 100%);
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--login-card);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 2px 6px rgba(40, 28, 16, 0.1), 0 24px 60px rgba(40, 28, 16, 0.22);
  animation: login-rise 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

/* 天面のふちに光を一本乗せて、ガラス感を出す。 */
.login-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--login-sheen), transparent);
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 認証が通ったあと、遷移までの一瞬だけ引く。 */
body.is-entering .login-card {
  transition: opacity 0.36s ease, transform 0.36s ease;
  opacity: 0;
  transform: translateY(-10px) scale(1.02);
}

.login-badge {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(160deg, var(--accent), rgba(96, 58, 22, 0.95));
  box-shadow: 0 5px 16px rgba(120, 75, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.login-badge svg { width: 26px; height: 26px; }

.login-title {
  font-size: 19px;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 5px;
}
.login-sub {
  margin: 0 0 22px;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}

/* 空のときは高さを持たせない。常時 18px 空けるとカードの上半分が
   間延びして見えるので、文言が出たぶんだけ押し広げる。 */
.login-error {
  margin: 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--warn);
}
.login-error:not(:empty) { margin: -6px 0 14px; }
.login-error.is-shake { animation: login-shake 0.36s ease; }

@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

.login-field { margin-bottom: 14px; }
.login-card label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--muted);
}

.login-inputwrap { position: relative; }

.login-card input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-family: inherit;
  /* 16px を下回らせないこと。iOS がフォーカス時に画面を拡大する。 */
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 121, 58, 0.22);
}
#password { padding-right: 60px; }

.login-reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.login-reveal:hover { color: var(--ink); }

.login-submit {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--accent), rgba(140, 88, 38, 0.95));
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 12px rgba(120, 75, 30, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}
.login-submit:active { transform: translateY(1px); box-shadow: 0 1px 6px rgba(120, 75, 30, 0.3); }
.login-submit:disabled { cursor: default; opacity: 0.75; }
.login-submit.is-busy { opacity: 0.9; }

@media (max-width: 420px) {
  .login-card { padding: 26px 20px 22px; border-radius: 18px; }
  .login-skyline { gap: 6px; }
}

/* 高さが足りない端末（横向き・キーボード表示中）では背景を畳んで
   カードだけに集中させる。 */
@media (max-height: 560px) {
  .login-skyline, .login-ground { display: none; }
  .login-badge { display: none; }
  .login-wrap { padding-top: 16px; padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-error.is-shake,
  .login-windows span.is-flicker { animation: none; }
  body.is-entering .login-card { transition: none; }
}

.board-view {
  position: absolute;
  inset: 0;
  /* 見出しはヘッダーへ移したので、上に空ける理由はもう無い */
  padding: 12px;
  overflow: hidden;
}

/* ---- 列の色（案 A）と、まとまり（案 B）----
   決めたことは docs/kanban-plan.md と、社長に見せた 4 案の比較。

   **色に 2 つの働きをさせる。**
   1. `--hue` … その列が何かを見分ける（6 列が同じ色だと読めない）
   2. まとまり … **誰の番か。**人が動く列を左に集めて、濃く出す

   色は 1 か所（ここ）で持つ。**個々の指定に色名を書かないこと。** */
:root {
  --c-consult: #4f7ca8;
  --c-todo: #8c8175;
  --c-doing: #b5793a;
  --c-answer: #b5533a;
  --c-review: #7d6aa5;
  --c-done: #3d8a63;
  /* 薄く敷くときの混ぜ具合。暗い画面では同じ％だと沈むので、下で上げる */
  --tint: 9%;
  --tint-strong: 18%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-consult: #7aa8cf;
    --c-todo: #a3978a;
    --c-doing: #d59a5a;
    --c-answer: #e08a70;
    --c-review: #a99ad0;
    --c-done: #6cbf95;
    --tint: 13%;
    --tint-strong: 24%;
  }
}

.board-wrap {
  display: flex;
  gap: 16px;
  height: 100%;
  overflow-x: auto;
}

/* まとまり 1 つ（あなたの番 / AI の番）。中の列で高さを分け合う。
   **中の列より狭くならないこと**（2026-08-28 修正）。`min-width: 0` を
   付けていたので、まとまりの箱（実測 452px）が中の 3 列（590px）より
   小さくなり、**列が隣のまとまりの上にはみ出して重なっていた**
   （確認待ちの札が未着手の列に隠れて読めない、という形で出た）。
   入り切らないときは `.board-wrap` が横に送る（狭い画面と同じ動き）。

   **左右は必ず半々**（2026-09-01 修正）。基底が `auto` だと中身の長さで
   取り分が決まり、題名の長い札が 1 枚あるだけで、そちら側のまとまりが
   広くなって左右が揃わなかった（1440px で 810 : 606）。基底を 0 にして
   画面から分ける。狭くなりすぎる心配は `min-width` が引き続き見る。 */
.board-group {
  flex: 1 1 0;
  min-width: min-content;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.group-rule { flex: 1; height: 1px; background: var(--line); }
.group-count {
  min-width: 18px;
  padding: 0 6px;
  text-align: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* **人が動く側だけを立てる。**放っておくと AI が止まったままになるのは、
   こちら側の列だけ。AI の番は静かにしておく。 */
.board-group.is-you .group-head { color: var(--warn); }
.board-group.is-you .group-rule { background: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.board-group.is-you .group-count { background: var(--warn); color: var(--panel); }

.group-cols {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
}

.col {
  flex: 1 1 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--hue) 32%, var(--line));
  border-radius: 12px;
  background: var(--panel-2);
}
/* 列ごとの色。**ここだけが色と列の対応を持つ。** */
.col[data-col="consult"] { --hue: var(--c-consult); }
.col[data-col="todo"]    { --hue: var(--c-todo); }
.col[data-col="doing"]   { --hue: var(--c-doing); }
.col[data-col="answer"]  { --hue: var(--c-answer); }
.col[data-col="review"]  { --hue: var(--c-review); }
.col[data-col="done"]    { --hue: var(--c-done); }

/* 人が動く側は、列そのものにも薄く色を敷く（AI 側は敷かない） */
.board-group.is-you .col { background: color-mix(in srgb, var(--hue) var(--tint), var(--panel-2)); }

.col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 28%, var(--line));
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--hue) 72%, var(--ink));
}
/* 見出しの前の四角。文字の色だけだと、細い字では色が読み取れない */
.col-head::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--hue);
}
.col-count {
  min-width: 20px;
  padding: 0 5px;
  text-align: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hue) var(--tint-strong), transparent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.col-add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.col-add .icon { width: 16px; height: 16px; }
.col-add:hover { background: var(--panel); color: var(--ink); }

/* 中身だけが伸びる。列の見出しは常に見えている */
.col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  padding: 9px 10px;
  border: 1px solid var(--line);
  /* 列の色をカードにも通す。**掴んで動かしている間も、どこの札か分かる。**
     クローンは body の直下に出るので、`--hue` が無いときの控えを持たせる。 */
  border-left: 3px solid var(--hue, var(--line));
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  /* パスや URL が題名に混じる。長い英字は既定では折り返されない */
  overflow-wrap: anywhere;
}
.card:hover { border-color: var(--accent); border-left-color: var(--hue, var(--accent)); }

/* ---- その場で書くカード（2026-08-17）----
   **列の中に開く。**別の画面へ行かせない。閉じないので続けて何枚でも書ける。 */
.card-new {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--hue) 50%, var(--line));
  border-left: 3px solid var(--hue, var(--accent));
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.card-new-text {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  outline: none;
}
/* 指で使う画面だけ 16px にする。**下回ると iOS が勝手に拡大する。**
   マウスの画面まで大きくすると、カードの題名より目立ってしまう。 */
@media (pointer: coarse) { .card-new-text { font-size: 16px; } }

/* **列は狭い。**3 つ並ばないときは折り返させる（縦書きになっていた）。 */
.card-new-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-new-actions > * { white-space: nowrap; flex: none; }
.card-new-actions .linkbtn { padding: 5px 9px; font-size: 11.5px; }
.card-new-actions .btn { margin-left: auto; }
.card-new-hint { margin: 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.card-head { display: flex; align-items: center; gap: 6px; }
/* **通し番号。**「#12 のやつ」と言えるようにするためだけのもの（2026-08-28）。
   題名より先に目に入ってはいけないので、細く・薄く・幅を揃える。 */
.card .card-no {
  flex: none;
  /* 題名が 2 行以上になっても、**1 行目に揃える**（真ん中に浮かない） */
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.card-clip { display: inline-flex; align-items: center; gap: 2px; }
.card-clip .icon { width: 12px; height: 12px; }
.card-title { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.card-last { margin: 5px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.card-foot { display: flex; gap: 8px; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.card-count { margin-left: auto; }

/* **実況は出さない。**動いていることと、長すぎることだけが分かればよい。 */
.card-spin {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: card-spin 0.9s linear infinite;
}
@keyframes card-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-spin { animation: none; border-top-color: var(--accent); }
}

/* カードの中身 */
.card-body {
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  font: inherit;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.card-log { display: flex; flex-direction: column; gap: 8px; }
/* 経過と書き込み欄をくっつけない。**どこまでが記録かが読めなくなる。** */
#card-reply-row { margin-top: 18px; }
/* 渡すボタンと、何が起きるかの一言を同じ行に置く。
   狭い画面では一言が下へ落ちる（ボタンだけ先に読めればよい）。 */
.card-attach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.card-attach-row .linkbtn { flex: none; cursor: pointer; }
.card-attach-row .hint { flex: 1 1 240px; min-width: 0; margin: 0; }
.card-log-row { border-left: 3px solid var(--line); padding-left: 9px; }
.card-log-row .who { display: block; font-size: 10.5px; color: var(--muted); }
.card-log-row p { margin: 2px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-log-row.is-ask { border-left-color: var(--warn); }
.card-log-row.is-error { border-left-color: var(--warn); }
.card-log-row.is-done { border-left-color: var(--accent); }

/* ---------------------------------------------------------------- カードの中身
   2026-08-28 に足したもの（社長の指定）。
   番号・その場で直す・渡したファイル・文字の整形。 */

/* 題名の行。番号は題名の左に、同じ行で置く。 */
.card-title-row { display: flex; align-items: baseline; gap: 8px; }
.card-title-row #card-title { flex: 1; min-width: 0; margin: 0 0 6px; }
#card-no {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* **押すと書ける見た目に変わる。**押せることが分かる程度に、触れたら色を敷く。 */
.rt-edit { cursor: text; border-radius: 10px; }
.rt-edit:hover, .rt-edit:focus-visible {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  outline: none;
}
h2.rt-edit { padding: 2px 6px; margin-left: -6px; }
#card-body.rt-edit:hover, #card-body.rt-edit:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--panel-2);
}
.rt-empty { margin: 0; color: var(--muted); font-size: 12px; }

/* 書く見た目。**読む見た目と同じ場所・同じ大きさに収まること。** */
.modal .rt-input { margin-bottom: 4px; font-size: 14px; }
.modal .rt-input--title { font-size: 16px; font-weight: 600; resize: none; overflow: hidden; }
.modal .card-body-input { resize: vertical; line-height: 1.7; }

/* 古い経過を開く口。**新しいものが下**なので、上に置く。 */
.card-log-more { display: block; margin: 0 0 8px; }

/* ---- 渡したファイル ----
   1 ファイル 1 行。左からサムネ／名前と日時／落とす／外す。 */
.card-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.card-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.card-file-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.card-file-thumb {
  flex: none;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.card-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-file-ext { font-size: 10px; font-weight: 700; color: var(--muted); }
.card-file-name {
  min-width: 0;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.card-file-name small { display: block; font-size: 10.5px; color: var(--muted); }
.card-file-open:hover .card-file-name { color: var(--accent); }
.card-file .linkbtn { flex: none; }

/* ダイアログのどこに落としても受ける。**見た目だけ。**
   `pointer-events: none` にしないと、これ自身が drop を横取りする。 */
.card-drop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 2px dashed var(--accent);
  background: color-mix(in srgb, var(--panel) 88%, var(--accent));
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  pointer-events: none;
}

/* **@ai が効いたかを、色ではなく言葉で言う。**
   textarea の文字には色を付けられず、下敷きを重ねる作りは 1px ずれると
   文字が二重に見える。起きることをそのまま書けば足りる。 */
#card-reply-hint.is-ordered { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- 文字の整形
   本文・経過をどう見せるか。中身は public/rich.js が作る。 */

.rt { font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 8px; }
.rt .rt-h { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.rt h5.rt-h, .rt h6.rt-h { font-size: 13px; color: var(--muted); }
.rt .rt-list { margin: 0 0 8px; padding-left: 1.35em; }
.rt .rt-list .rt-list { margin: 2px 0 2px; }
.rt li { margin: 2px 0; }
.rt .rt-check { list-style: none; margin-left: -1.35em; display: flex; gap: 6px; }
.rt .rt-box {
  flex: none;
  width: 14px; height: 14px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  color: var(--ok);
}
.rt .rt-check.is-on { color: var(--muted); }
.rt .rt-cont { margin: 0 0 4px 1.35em; color: var(--muted); }
.rt .rt-quote {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.rt code {
  padding: 1px 4px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}
.rt .rt-code {
  margin: 0 0 8px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 5%, var(--panel-2));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}
.rt hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
/* **表は中で横に送る。**窓ごと横に伸びると、他の行まで読めなくなる。 */
.rt .rt-table-wrap { margin: 0 0 8px; overflow-x: auto; }
.rt .rt-table { border-collapse: collapse; font-size: 12.5px; }
.rt .rt-table th, .rt .rt-table td {
  padding: 5px 9px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.rt .rt-table th { background: var(--panel-2); font-weight: 700; white-space: nowrap; }

.rt-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* カードへの参照。**押すとそのカードが開く。**番号はプロジェクトの中でだけ通じる。 */
.rt-ref {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.rt-ref:hover { text-decoration: underline; }
/* @ai。**これが「手を動かして」の合図**なので、目で見て分かること。 */
.rt-mention {
  padding: 0 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-weight: 700;
}

/* 狭い画面では、列を横に送って見る */
@media (max-width: 820px) {
  .board-view { padding: 46px 8px 8px; }
  .col { min-width: 76vw; }
}

/* ---- チャットの廃止（2026-08-15）----
   相談はボードの「相談」列で行う。列を 2 つにして、右をボードに渡す。
   要素は残してあるので、戻すときはここと index.html の hidden を外す。 */
.app { grid-template-columns: auto 1fr; }
@media (max-width: 1180px) { .app { grid-template-columns: 0 1fr; } }
@media (max-width: 820px) { .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); } }

/* チャットの見出しから移してきたもの（2026-08-15）。
   左メニューの下に並ぶので、他の項目と同じ見た目にそろえる。 */
.rail-foot .cli-status {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.rail-foot .cli-status:hover { background: var(--panel-2); color: var(--ink); }
.rail-foot .cli-status.is-out { color: var(--warn); }

/* ---------------------------------------------------------------- ヘッダー
   **状態を知らせるものだけを置く。**作業する場所ではないので細くする。
   左メニューの下が渋滞していたのと、オフィスの壁を畳むために作った。 */
/* **高さはここ 1 か所で持つ。**app の高さと食い違うと、下が切れるか
   余白が残る（36 番と同じ形）。 */
:root { --topbar-h: 44px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 12px 0 48px;   /* 左は開閉ボタンのぶん */
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-size: 12px;
  overflow: hidden;
}
/* **名前は最後に縮む。**右の数字より先に潰れると、どのプロジェクトを
   見ているのか分からなくなる。 */
.top-project {
  flex: 0 1 auto;
  min-width: 4em;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 数字の側は縮ませない（半端に切れると読めない） */
.topbar .cli-status, .top-clock, .top-gauge, .top-btn, .top-bell { flex: none; }

/* 記号だけのボタンは、枠を出さずに並べる（ベルと歯車で見た目をそろえる）。
   **押せる面を正方形で持つ。**中身の絵の大きさに任せると、絵ごとに
   当たり判定も見た目もばらつく（絵文字のときに実際にそうなった）。 */
.top-btn, .top-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}
.top-btn:hover, .top-bell:hover { color: var(--ink); background: var(--panel-2); }
.topbar .spacer { flex: 1; }
.topbar .cli-status {
  display: flex; align-items: center; gap: 5px;
  border: none; background: none; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.topbar .cli-status.is-out { color: var(--warn); }
.top-clock { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.top-clock .decor--clock { width: 20px; }
.top-clock .clock-time { font-size: 12px; }
/* 天気は廃止した（2026-08-15。場所を食うわりに使わない） */

/* 枠の残りとサーバーの余力。**横に並べる。**縦に積むとヘッダーが太る */
.top-gauge { display: flex; gap: 10px; }
.top-gauge .gauge { width: 92px; gap: 1px; }
.top-gauge .gauge-rest { display: none; }         /* 残り時間は畳む。押せば設定で見られる */
.top-gauge .gauge-top b { font-size: 9.5px; }

/* ヘッダーのぶん、下を詰める */
.app { height: calc(100dvh - var(--topbar-h)); }

@media (max-width: 820px) {
  /* **絶対に全部出す**（社長の指定）。390px に 4 本を横並びで入れると
     読めなくなるので、**2 列 × 2 段**にする。時計は削る（削ってよいと決まった）。 */
  :root { --topbar-h: 50px; }

  .topbar { padding-left: 42px; padding-right: 6px; gap: 6px; }
  .rail-toggle { top: 10px; left: 7px; }
  .topbar .cli-status .cli-label, .top-clock { display: none; }
  .top-project { min-width: 2.5em; font-size: 12px; }
  .top-btn, .top-bell { width: 28px; height: 28px; }
  .top-btn .icon, .top-bell .icon { width: 17px; height: 17px; }

  /* 枠の残り（セッション・今週）と余力（メモリ・CPU）を、それぞれ縦に積む。
     横に 2 つ並ぶので、全体では 2 列 × 2 段になる。 */
  .top-gauge { flex-direction: column; gap: 2px; }
  .top-gauge .gauge { width: 68px; gap: 0; }
  .top-gauge .gauge-top b { font-size: 8px; }
  .top-gauge .gauge-top span { font-size: 9px; }
  .top-gauge .gauge-bar { height: 4px; }
}

/* 掴んで動かしているとき（進捗クエストと同じ操作感）。
   実物はクローンがカーソルに追従し、**元の位置は灰色の穴**として残る。 */
body.is-dragging-card { cursor: grabbing; user-select: none; }
body.is-dragging-card .card { cursor: grabbing; }

.card.is-ghost {
  opacity: 0.35;
  filter: grayscale(1);
  pointer-events: none;
}

.card-clone {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(60, 45, 30, 0.28);
  transform: rotate(1.5deg);
  opacity: 0.96;
}

/* 落とす先に開く隙間。ここに入る、が手を離す前に分かる */
.card-gap {
  height: 46px;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---- スマホ（ボードだけになったあと。2026-08-15）----
   オフィスもチャットも無くなったので、以前の指定は当たらない。
   **列を横に送って見る形**にする。1 列がほぼ画面幅で、指で送れる。 */
@media (max-width: 820px) {
  /* 高さは --topbar-h が持つ。**ここで数字を書かないこと。**
     書くと下の指定と食い違って、2 段目が切れる（実際に切れた）。 */

  .board-view { position: absolute; inset: 0; padding: 8px; }
  .board-wrap {
    gap: 12px;
    /* 指で送ったときに、列の頭で止まる */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 8px;
    -webkit-overflow-scrolling: touch;
  }
  /* **まとまりは伸ばさない。**幅を分け合うと 1 列が 40vw になって読めない。
     中の列がそれぞれ画面幅を持ち、まとまりを跨いで横へ送る。 */
  .board-group { flex: none; }
  .group-cols { gap: 8px; }
  /* **幅は画面から決める。中身から決めさせない**（2026-09-01 修正）。
     `min-width` だけだと `flex: 1 1 0` のまま残り、まとまり（`flex: none`）は
     max-content で測られる。題名が長い札が 1 枚あるだけでその寄与が伸び、
     **同じまとまりの 3 列とも太った**（390px で 320 → 456px、横送りが伸びる）。
     基底を固定して、はみ出す分は札の中で折り返させる。 */
  .col {
    flex: 0 0 min(86vw, 320px);
    min-width: 0;
    scroll-snap-align: start;
  }
  .col-head { padding: 10px 12px; font-size: 13px; }
  .col-add { width: 28px; height: 28px; }
  .col-add .icon { width: 18px; height: 18px; }

  /* 指で掴めるように、カードを少し大きく */
  .card { padding: 11px 12px; }
  .card-title { font-size: 13.5px; }

  /* カードの中身は画面いっぱいで読む。**中で二重にスクロールさせない**
     （2026-08-28。本文も経過も縦に伸ばし、窓ごと送る）。 */
  .modal#card-dialog { width: 96vw; max-height: 92vh; }
  /* 指で押せる大きさに。並びが崩れるので、外すボタンは折り返させる。 */
  .card-file { flex-wrap: wrap; }
  .card-file-open { flex: 1 1 100%; }
}

/* 答えを待っているものは目立たせる。**放置するとその AI は止まったまま。** */
.col-count.is-waiting {
  background: var(--warn);
  color: #fff;
  font-weight: 700;
}

/* 設定の中のセレクト。**入力欄と同じ見た目にそろえる。**
   素のままだと OS の見た目が出て、隣の input と揃わない（社長の指摘）。 */
.settings-section select,
.modal select {
  appearance: none;
  height: var(--control-h);
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  /* 矢印は自分で描く（appearance:none で消えるため） */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings-section select:focus,
.modal select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* 消すボタンは、押し間違えないよう他と見分けがつく形にする。
   **戻せない操作だけ**この見た目にすること（増やすと意味が薄れる）。 */
.linkbtn.danger {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.linkbtn.danger:hover {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}

/* 支払いが止まっているときの帯。**ヘッダーより上に、動かない位置で出す。**
   スクロールで消えると、見なかったことにできてしまう。 */
.license-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding: 8px 16px;
  background: #b3261e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
/* 帯のぶんだけ全部を下げる。**ヘッダーに重ねない。** */
body.has-license-bar .topbar { top: 34px; }
body.has-license-bar .app { padding-top: 34px; }

/* ---- 資料 ---- */
/* 仕切り線の左右は、同じだけ空ける（12px + gap の半分ずつ）。
   片側だけ詰まっていると、線が本文にくっついて読みにくい。 */
.docs-body { display: grid; grid-template-columns: 210px 1fr; gap: 20px; min-height: 320px; }
.docs-list {
  border-right: 1px solid var(--line, #e3ddd3);
  padding-right: 12px; max-height: 60vh; overflow-y: auto;
}
.docs-list button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: inherit; cursor: pointer;
}
.docs-list button:hover { background: rgba(0, 0, 0, .05); }
.docs-list button.is-on { background: rgba(0, 0, 0, .08); font-weight: 700; }
.docs-list .when { display: block; font-size: 11px; opacity: .6; }
.docs-view {
  /* 一覧の項目は上下に 7px の余白を持っている。ここにも同じだけ入れて、
     1 行目どうしの高さをそろえる（無いと右だけ少し上に浮く）。 */
  padding-top: 7px;
  max-height: 60vh; overflow: auto; font-size: 13px; line-height: 1.8;
  white-space: pre-wrap; word-break: break-word;
}
/* **狭い画面では一覧を上に。**横に並べると、どちらも読めない幅になる */
@media (max-width: 640px) {
  .docs-body { grid-template-columns: 1fr; }
  .docs-list { border-right: 0; border-bottom: 1px solid var(--line, #e3ddd3); padding: 0 0 10px; max-height: 30vh; }
}

/* ---- 画面の下に浮かせる知らせ ----
   **出し先が無いまま捨てない。**オフィスを撤去したときに書き込み先の要素が
   消えて、更新の失敗理由が誰にも見えなくなっていた。 */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 300; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 10px;
  background: #2b2723; color: #fff;
  font-size: 13px; line-height: 1.6; text-align: left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  white-space: pre-wrap; word-break: break-word;
  opacity: 1; transition: opacity .3s;
}
#toast.is-error { background: #b3261e; }
#toast.is-gone { opacity: 0; pointer-events: none; }