/* COCKPIT
   方針: 黒基調・余白重視・書体で階層を作る。装飾で飾らない。
   - 面は「背景よりわずかに明るい」だけで表す。影と太い枠線は使わない
   - 色はパネルの上端の細い帯と見出しだけに使い、「そのパネルが何の話か」を表す。
     飾りで色を増やさない（増やすほど赤と琥珀の警告が埋もれるため）
   - 赤（--danger）と琥珀（--caution）は警告専用。分類色には絶対に使わない
   - 数字は等幅字形で桁を揃える */
:root {
  --accent: #5b8def;          /* config.json の brand.accent で上書きされる */
  --danger: #e5484d;          /* 取得失敗・本物の警告だけ。装飾に使わない */
  --caution: #e0a44a;         /* 未対応形式など、失敗ではない注意 */
  --bg: #0b0c0e;
  --surface: #141518;
  --surface-2: #1a1c21;
  --text: #edeef0;
  --text-2: #a9aeb6;
  --muted: #767c86;
  --line: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .12);
  --radius: 12px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  padding: 44px 40px 72px;
  max-width: 1680px;
  background: var(--bg);
  color: var(--text);
  /* 2026-08-16 モダン化: 欧文/数字は Inter（無ければ Segoe UI Variable）、
     和文は BIZ UDPゴシック（Windows同梱・UD=読みやすさ設計）を優先 */
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI",
               "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ── 見出し ─────────────────────────────
   ワードマークと日付を同じ主役級の大きさで並べる。
   大きさの差だけで階層を作り、線や色で飾らない */
/* 2026-08-11 日付を右へ移したので上端揃えにする。
   下端揃えのままだと、右列が高いぶんワードマークだけが上に取り残されて
   「名前」と「日付」が段違いに見える。上端で揃えると1行目に並ぶ */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  padding-bottom: 28px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
/* 見出し右側。日付・切り替えボタン・最終更新・起動列を縦に積む */
.headright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* 2026-08-11 オーナー指示「日付は画面右上に」。
   ワードマークと同じ行の右端に寄せる。margin-left:auto で残り幅を全部食わせるので、
   起動列が折り返して2行目に落ちても日付だけは1行目の右端に残る */
.topbar > .stamp-date { margin-left: auto; text-align: right; align-self: flex-start; }
/* 切り替えは「あることは分かるが主役ではない」強さにとどめる */
.viewswitch {
  display: inline-block; text-decoration: none;
  font-size: 13px; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px;
  white-space: nowrap;
}
.viewswitch:hover { color: #fff; border-color: var(--accent); }

/* 2026-08-09 オーナー指示「もっと近未来的に。今は野暮ったい」。
   やったこと: ①太いゴシックの塊 → 細身＋大きな字間で"計器盤の銘板"にする
   ②文字色をベタ白から上下グラデーションにして金属的な奥行きを出す
   ③下に細い走査線を1本引く（飾りではなく、見出しと本文の境界を兼ねる）
   光らせない・動かさない。近未来感は輝きではなく「細さ・字間・整列」で作る */
.wordmark {
  font-size: 64px; font-weight: 200; line-height: 1;
  letter-spacing: .34em; text-indent: .34em;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #8b93a1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
  margin-bottom: 14px;
  position: relative;
}
.wordmark::after {
  content: ""; position: absolute; left: 0; right: 12%; bottom: -10px; height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(91, 141, 239, 0));
}
/* 日付は計器の数値として扱う。等幅・細字・字間広めで「表示器」に見せる */
.stamp-date {
  font-size: 31px; font-weight: 300; line-height: 1.1;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  font-family: "SFMono-Regular", "Consolas", "Roboto Mono", ui-monospace, monospace;
  color: var(--text-2);
}
.stamp-date .dow { color: var(--muted); font-size: .5em; margin-left: .5em; letter-spacing: .1em; }
.updated {
  font-size: 13px; color: var(--muted);
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
  padding-bottom: 6px;
}

/* ── 起動列 ─────────────────────────────
   アイコンは大きく、名前は常に出す。
   ホバーで初めて名前が出る形は「何のボタンか分からない」ので採らない */
.launchbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 44px; align-items: stretch; }
.launch {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; width: 96px; padding: 16px 8px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.launch:hover { background: var(--surface-2); border-color: var(--line-strong); }
.launch img { width: 40px; height: 40px; object-fit: contain; }
/* パソコンのアプリを起動するもの。Webの行き先と見分けるための控えめな印 */
.launch.app::after {
  content: ""; position: absolute; right: 8px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.launch-name {
  color: var(--text-2); font-size: 13px; line-height: 1.35;
  letter-spacing: .02em; text-align: center; word-break: break-word;
}
.launch:hover .launch-name { color: var(--text); }
/* アイコンが読めなかったもの。空箱にせず名前だけで成立させる */
.launch.noicon { justify-content: center; }

/* ── パネル ───────────────────────────── */
/* 中身の少ないパネルを引き伸ばさない（空白の穴が空いて安っぽく見えるため）。
   格子ではなく段組にしてある。格子だと同じ行の一番高いカードに行の高さが揃い、
   短いカードの下に大きな空白が空くため。段組なら上から詰まる */
/* ── ジャンル帯（ゾーン）─────────────────────
   2026-08-09 オーナー指示「ジャンルで分けたい／縦軸と横軸が分かりにくい」。
   旧: 段組（column-width）に全パネルを流していた。段組は上→下→次の列に流れるため、
       隣り合うパネルの関係が読めない。
   新: 縦＝ジャンルの並び、横＝同じジャンルの中。軸の意味を固定する。 */
.grid { display: block; }

.zone { margin: 0 0 40px; }
.zone-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 2px 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.zone-title {
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--text); text-transform: uppercase;
}
.zone-note { font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.zone-count {
  margin-left: auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px;
}
/* 帯の見出しにもジャンル色を細く効かせる。面は塗らない（警告色が埋もれるため） */
.zone-focus   .zone-title { color: #b9a6ff; }
.zone-money   .zone-title { color: #8adcb4; }
.zone-time    .zone-title { color: #a9c8ff; }
.zone-comm    .zone-title { color: #c6b6ff; }
.zone-ops     .zone-title { color: #8ad6e6; }
.zone-private .zone-title { color: #f0b48a; }

.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .zone-grid { grid-template-columns: 1fr; }
}

.panel {
  position: relative;   /* 上端の色帯（::before）の基準 */
  background-color: var(--surface);
  /* パネルの上側だけほんのり色を含ませる。面全体を塗ると読みにくくなるので、
     上から100pxほどで消える薄い霞にとどめる（色無しのパネルでは何も起きない） */
  background-image: linear-gradient(180deg, var(--tint-wash, transparent), transparent 104px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
  min-width: 0;         /* 中身の長い行で横スクロールを起こさせない */
  width: 100%;
  margin: 0;
  /* 立体感（2026-08-09 オーナー指示）。厚みは3つの薄い層だけで出す:
     ① 天面のハイライト1px（光が上から当たっている） ② 下向きの柔らかい影
     ③ 面のごく弱い明度勾配。影を濃くすると安っぽくなるので、濃さより層の数で出す */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 1px 2px rgba(0, 0, 0, .40),
    0 8px 24px -12px rgba(0, 0, 0, .70);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* 触れたときだけわずかに浮かす。動きは200ms以下・情報のためだけに使う */
.panel:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 2px 4px rgba(0, 0, 0, .45),
    0 18px 40px -18px rgba(0, 0, 0, .85);
}

/* ── パネルの分類色 ─────────────────────────
   上端の細い帯と見出しの文字だけを、そのパネルの分類の色にする。
   色の割り当ては config.json の "accent"（time / comm / money / ops）で決める。
   ここにパネルidは書かない（他のクライアントの画面に使い回すため）。

   帯は --tint、見出しは --tint-text。見出し側をわざと明るい色にしてあるのは、
   帯と同じ濃さだと暗い面の上で読みにくくなるため。読みやすさを色より優先する。
   accent を書いていないパネルは、どちらも決まらないので今までどおり色無しで出る */
.panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tint, transparent);
}
.panel-title { color: var(--tint-text, var(--text)); }

/* --tint 帯・--tint-text 見出し・--tint-wash 上側の霞 */
.panel.accent-time  { --tint: #4f8ff0; --tint-text: #a9c8ff; --tint-wash: rgba(79, 143, 240, .09); }   /* 時間 */
.panel.accent-comm  { --tint: #8b6ff0; --tint-text: #c6b6ff; --tint-wash: rgba(139, 111, 240, .09); }  /* 連絡 */
.panel.accent-money { --tint: #35a06f; --tint-text: #8adcb4; --tint-wash: rgba(53, 160, 111, .10); }   /* お金 */
.panel.accent-ops   { --tint: #2f9fb5; --tint-text: #8ad6e6; --tint-wash: rgba(47, 159, 181, .10); }   /* 実行 */
/* 2026-08-09追加: ECX（事業をつくる）。色が定義されておらず、色無しで出ていた */
.panel.accent-focus   { --tint: #7c5cf0; --tint-text: #b9a6ff; --tint-wash: rgba(124, 92, 240, .11); } /* ECX */
.panel.accent-private { --tint: #d98a5a; --tint-text: #f0b48a; --tint-wash: rgba(217, 138, 90, .10); } /* プライベート */

/* 分類色の帯だけ、右へ向かって薄くする。10枚並んだときに帯が主張しすぎないため。
   警告（赤・琥珀）の帯は下でべた塗りに戻し、細くしても必ず目に入る形を保つ */
.panel[class*="accent-"]::before {
  background: linear-gradient(90deg, var(--tint) 0%, var(--tint) 34%, transparent 100%);
}

/* ここから下は警告。分類色より必ず後に置き、色を上書きする。
   分類色のせいで警告が埋もれたら、色を足した意味がなくなるため */

/* 古いデータは面を沈めない。沈めると読みにくいだけで、
   結局「読まない」ほうへ倒れる。面と文字は普通の明るさのまま、
   上端の帯を琥珀に変え、見出しの直下の琥珀色の札で「古い」と知らせる */
.panel.stale { --tint: var(--caution); --tint-wash: rgba(224, 164, 74, .10); }
/* 失敗は地味にしない。上端の赤帯・左端の赤帯・赤字で、並んでいても飛び込んでくる形にする */
.panel.failed {
  --tint: var(--danger);
  --tint-text: #f2a3a5;
  --tint-wash: rgba(229, 72, 77, .10);
  background-color: #191315;
  border-color: rgba(229, 72, 77, .38);
  box-shadow: inset 3px 0 0 0 var(--danger);
}
/* 失敗かつ古いときは、強い方（赤）を優先して出す */
.panel.failed.stale {
  --tint: var(--danger);
  --tint-text: #f2a3a5;
  --tint-wash: rgba(229, 72, 77, .10);
}
/* 警告の帯は薄めない。分類色の帯（右へ消える形）より強く、端まで塗り切る */
.panel.stale::before, .panel.failed::before { background: var(--tint); }

.panel h2 {
  margin: 0 0 10px; font-size: 18px; font-weight: 600;
  letter-spacing: .04em; line-height: 1.45;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
/* 見出しは何のパネルかを伝える主役。長くても折り返して全部読ませる（省略しない）。
   文字色は上の分類色の節で決める（色無しのときは var(--text)） */
.panel-title { min-width: 0; overflow-wrap: anywhere; }
/* 見出しの右端に小さく。主役は数字なので、リンクは薄く控えめに置く */
.panel-link {
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: none;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.panel-link:hover { color: var(--tint-text, var(--accent)); }
.panel .meta {
  color: var(--muted); font-size: 13px; line-height: 1.7;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
/* 「◯日前のデータ・古い」は見出しのすぐ下。目に入らなければ意味がないので、
   面を暗くする代わりにこの札をはっきり大きく出す */
.stale-flag {
  display: inline-block; margin: 0 0 8px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid rgba(224, 164, 74, .55);
  background: rgba(224, 164, 74, .14);
  color: #f0bd7c; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; white-space: nowrap;
}

/* ── 数字 ───────────────────────────── */
.metrics { display: flex; flex-wrap: wrap; gap: 16px 44px; }
.metric .value {
  font-size: 46px; font-weight: 400; line-height: 1.15;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.metric .label {
  font-size: 13px; color: var(--muted);
  letter-spacing: .08em; margin-top: 8px;
}
.metric.warn .value { color: var(--danger); }
.metric.none .value { color: var(--muted); font-size: 22px; }
/* 値が文章のもの。数字と同じ大きさだと画面を占領するので落とす */
.metric.long { flex: 1 1 100%; }
.metric.long .value { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }

/* ── 組み立て済みタイル（見出し → 数字 → 補足 → 推移 → 次の一手）────────
   2026-08-13 新設。それまでは「値」1つしか置けず、文脈を値に混ぜるしかなかった。
   結果、値の文字数でフォントが変わり、画面のサイズがバラバラに見えた。
   ここでは大きさの役割を固定する: 数字だけが大きい。ほかは全部小さい。 */
.metric.tile {
  flex: 1 1 250px; max-width: 340px;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(255, 255, 255, .06);
  border-top: 2px solid var(--muted);
}
.metric.tile .label {
  order: -1; margin: 0 0 10px; font-size: 11px; letter-spacing: .1em;
}
.metric.tile .value { font-size: 31px; line-height: 1.05; }
.metric.tile .sub {
  font-size: 13px; color: var(--text-2); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.metric.tile .note {
  font-size: 11px; line-height: 1.65; color: var(--muted);
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
/* 状態は上辺の線で示す。数字そのものは赤くしすぎない（並ぶと画面が赤く染まる） */
.metric.tile.ok      { border-top-color: var(--ok, #35a06f); }
.metric.tile.caution { border-top-color: var(--caution, #d99a35); }
.metric.tile.warn    { border-top-color: var(--danger); }
/* 注意の数字は白のまま（2026-08-14 認知負荷対策: 色で叫ぶのは赤だけ。琥珀は上枠と点で語る） */
.metric.tile.warn .value    { color: var(--danger); }

/* 推移のスパークライン。線は細く、最新の点だけ丸 */
svg.spark { width: 100%; height: 30px; margin-top: 10px; display: block; }
svg.spark polyline { fill: none; stroke: var(--text-2); stroke-width: 1.6;
                     stroke-linejoin: round; stroke-linecap: round; }
svg.spark circle { fill: var(--text-2); }
svg.spark.caution polyline, svg.spark.caution circle { stroke: var(--caution, #d99a35); fill: var(--caution, #d99a35); }
svg.spark.warn polyline, svg.spark.warn circle { stroke: var(--danger); fill: var(--danger); }

/* ── 一覧・時系列 ───────────────────────── */
ul.items { margin: 0; padding: 0; list-style: none; }
ul.items li {
  font-size: 15px; line-height: 1.6; color: var(--text);
  padding: 12px 0; border-top: 1px solid var(--line);
}
ul.items li:first-child { padding-top: 0; border-top: 0; }
ul.items li:last-child { padding-bottom: 0; }
.item-sub {
  display: block; color: var(--muted); font-size: 13px;
  line-height: 1.6; margin-top: 5px;
}
.tl-row { display: flex; align-items: baseline; gap: 8px; }
.tl-time {
  font-variant-numeric: tabular-nums; color: var(--text-2);
  font-size: 15px; letter-spacing: .04em; min-width: 3.6em; flex: none;
}
.badge {
  display: inline-block; flex: none;
  font-size: 11px; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .04);
  color: var(--text-2); margin-right: 6px;
}
.meta-inline { color: var(--muted); font-size: 13px; }

/* ── 並べ替え・完了ができるパネル ─────────────
   操作できることは形（つまみ・ボタン）で示す。色では示さない。
   赤は本物の警告のためだけに空けておく */
.board-list { position: relative; }
.board-row {
  font-size: 15px; line-height: 1.6; color: var(--text);
  padding: 12px 0; border-top: 1px solid var(--line);
  list-style: none;
  display: flex; align-items: baseline; gap: 8px;
}
.board-list > .board-row:first-child { padding-top: 0; border-top: 0; }
.board-title { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
/* つまみ。掴めることが分かる最小限の印にとどめる */
.board-grip {
  flex: none; width: 16px; color: var(--muted); font-size: 13px;
  line-height: 1; letter-spacing: -.08em; cursor: grab;
  user-select: none; opacity: .45; transition: opacity .12s ease;
}
.board-row:hover .board-grip { opacity: 1; }
.board-list.is-sorting .board-grip { cursor: grabbing; }
/* 掴んでいる項目。浮いて見えるように面を持ち上げる */
.board-row.is-dragging {
  background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 12px 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
  cursor: grabbing; pointer-events: none;
}
/* どこに落ちるかの印。破線の枠で落ち先の高さぶんを空ける。
   掴んだ札は少し右にずれるので、この枠は札の下に隠れず必ず見える */
.board-holder {
  border: 1px dashed var(--accent); border-radius: 6px;
  background: rgba(91, 141, 239, .10);
  padding: 0; box-sizing: border-box;
}
.board-check {
  flex: none; margin-left: auto; align-self: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--muted); font-size: 13px; line-height: 1;
  cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.board-check:hover { color: var(--text); border-color: var(--accent); }
.board-empty {
  list-style: none; color: var(--muted); font-size: 15px; padding: 4px 0;
}
.board-done { margin-top: 16px; }
.board-done-head {
  background: transparent; border: 0; padding: 0;
  color: var(--text-2); font-size: 13px; letter-spacing: .06em;
  cursor: pointer; font-family: inherit;
}
.board-done-head:hover { color: var(--text); }
.board-donelist { margin-top: 8px; }
/* たたんだ側にはつまみを出さない。その分だけ左を空けて、上のリストと行頭を揃える */
.board-row.is-done { color: var(--muted); padding-left: 26px; }
.board-row.is-done .board-title { text-decoration: line-through; }
.board-note {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .02em;
}

/* ── 今日の時間配分の帯 ───────────────────
   円グラフにしない理由: 分類が「仕事／家族」の2つしかなく、円にしても
   読み取れる情報が増えない。時間の帯なら「どれだけ埋まっているか」も同時に出る。
   色は増やさない。仕事＝そのパネルの分類色、家族＝白の濃淡、空き＝ほぼ地の色。
   赤と琥珀は警告専用なのでここには使わない */
.daybar { margin: 0 0 18px; }
.daybar-track {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.daybar-seg { height: 100%; }
.daybar-seg + .daybar-seg { border-left: 1px solid var(--bg); }
.seg-仕事 { background: var(--tint, var(--accent)); }
.seg-家族 { background: rgba(255, 255, 255, .34); }
.seg-free { background: rgba(255, 255, 255, .06); }
.daybar-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  margin-top: 9px; font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.daybar-key { display: inline-flex; align-items: center; gap: 4px; }
.daybar-key .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none;
}
.dot-仕事 { background: var(--tint, var(--accent)); }
.dot-家族 { background: rgba(255, 255, 255, .34); }
.dot-free { background: rgba(255, 255, 255, .12); }
.daybar-base { color: var(--muted); font-size: 11px; letter-spacing: .04em; }

/* ── 今日と明日の境目 ─────────────────────
   線1本と小さな見出しだけで区切る。明日は薄くして、今日から目を離させない */
.day-sep {
  list-style: none; display: flex; align-items: center; gap: 8px;
  margin: 18px 0 2px; padding: 0; border: 0;
}
.day-sep::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.day-sep-label {
  flex: none; font-size: 11px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
ul.items li.day-sep { padding: 18px 0 2px; border-top: 0; }
.board-next .day-sep { margin-top: 14px; }
/* 明日ぶんは参考。掴めない・完了にもできないので、つまみも丸ボタンも出さない */
.is-next { opacity: .62; }
.board-nextlist > .board-row { padding: 9px 0; font-size: 15px; }
.board-nextlist > .board-row:first-child { border-top: 0; }

/* 「→」＝明日へ動かす。押すとGoogleカレンダーのその予定が開く（この画面は書き込まない）。
   完了の✓と同じ形・同じ大きさに揃える。文字で書くと狭いパネルで見出しが折り返されるため */
.board-move {
  flex: none; align-self: center;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; text-decoration: none;
  border: 1px solid var(--line); color: var(--muted);
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
/* 常時出していると行が賑やかになり、予定そのものが読みにくくなる。
   触れたときだけ出す。キーボードで辿ったときも必ず見える */
.board-row:hover .board-move,
.board-move:focus { opacity: 1; }
.board-move:hover { color: var(--text); border-color: var(--line-strong); }

/* ── 失敗・注意の文 ─────────────────────── */
.failmsg { color: #f2797c; font-size: 15px; line-height: 1.7; }
.warnmsg { color: var(--caution); font-size: 15px; line-height: 1.7; }

/* ── 横棒グラフ ───────────────────────── */
.chart { display: flex; flex-direction: column; gap: 12px; }
.bar-row {
  display: grid; grid-template-columns: 7em 1fr 6.5em;
  align-items: center; gap: 12px; font-size: 13px;
}
.bar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: rgba(255, 255, 255, .07); border-radius: 999px; height: 6px; overflow: hidden; }
/* 棒もそのパネルの分類色に合わせる（色無しのパネルは今までどおり --accent） */
.bar-fill { background: var(--tint, var(--accent)); height: 100%; border-radius: 999px; }
.bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-total {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* ===== グラフ拡張（2026-08-18）=====
   円は構成比・棒は比較。色は identity にだけ使い、文字は常にテキスト色。
   系列色は dataviz の検証を通した3色（青#2563eb 緑#059669 紫#7c3aed・暗い面で全項目PASS）。
   紫は面のコントラストが3:1をわずかに切るため、必ず直接ラベル（凡例の数字）を添える。 */
.chart--donut { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; }
.donut-stage { position: relative; width: 104px; height: 104px; }
.donut { width: 104px; height: 104px; transform: rotate(-90deg); }
.donut-seg {
  transition: stroke-width .18s ease, opacity .18s ease;
  transform-origin: 60px 60px;
}
.donut-seg.is-hot { stroke-width: 19; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.donut-big { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
/* 中央の説明文字は輪の内側に入りきらないので出さない（凡例が同じことを言っている） */
.donut-cap { display: none; }
.donut-legend { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.lg-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center;
  font-size: 13px; padding: 2px 6px; border-radius: 6px; transition: background .15s ease;
}
.lg-row.is-hot { background: rgba(255, 255, 255, .05); }
.lg-dot { width: 10px; height: 10px; border-radius: 6px; }
.lg-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-note { grid-column: 2 / 4; font-size: 11px; color: var(--muted); opacity: .8; }

/* 目標に届いていたら、金の縁が一度だけ回る（高級車の文法: 短く柔らかく） */
.chart--donut.is-reached .donut-stage::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, rgba(212,175,55,0) 0deg, rgba(212,175,55,.85) 40deg, rgba(212,175,55,0) 90deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: donut-sweep 1.6s ease-out 1 both;
}
@keyframes donut-sweep { from { transform: rotate(0deg); opacity: 1; } to { transform: rotate(360deg); opacity: 0; } }

/* 横棒: 負の値は赤・棒は初回だけ伸びる（ループしない） */
.chart--hbar .bar-row { grid-template-columns: 13em 1fr 7em; }
.chart--hbar .bar-track { height: 9px; }
.chart--hbar .bar-fill { animation: bar-grow .45s cubic-bezier(.22,.61,.36,1) 1 both; }
.chart--hbar .bar-fill.is-neg { background: var(--bad, #dc2626); }
.chart--hbar .bar-value.is-neg { color: var(--bad, #dc2626); font-weight: 700; }
@keyframes bar-grow { from { width: 0 !important; } }

@media print {
  .chart--hbar .bar-fill, .chart--donut.is-reached .donut-stage::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .chart--hbar .bar-fill, .chart--donut.is-reached .donut-stage::after { animation: none !important; }
  .donut-seg { transition: none; }
}
@media (max-width: 640px) {
  .chart--donut { grid-template-columns: 1fr; justify-items: center; }
}

/* 画面全体が描けなかったときの最後の受け皿 */
body > .failmsg { padding: 40px 0; font-size: 15px; }

@media (max-width: 640px) {
  body { padding: 28px 20px 48px; }
  .wordmark { font-size: 31px; letter-spacing: .12em; text-indent: .12em; }
  .stamp-date { font-size: 31px; }
  .panel { padding: 22px 20px 24px; }
  .metric .value { font-size: 31px; }
  .launch { width: 84px; }
}

/* ── ミニガント（週の帯にタスクを並べる）─────────────
   2026-08-09 オーナー指示「次にやることもガントと一体で視覚的に」。
   横軸＝今週の7日。期限の日に印を置き、そこまでを薄い線でつなぐ。
   着手日は持っていないので、棒の長さで期間を表さない（無い情報を描かない）。 */
.gantt { display: flex; flex-direction: column; gap: 4px; }
.gantt-head { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 2px; }
.gantt-row  { display: flex; align-items: center; gap: 8px; min-height: 30px; }

.gantt-name {
  flex: 0 0 46%; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.35;
}
.gantt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-who {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  border-radius: 999px; padding: 1px 7px; border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.who-AI    { color: #b9a6ff; border-color: rgba(185, 166, 255, .35); }
.who-OWNER { color: #7fd8bd; border-color: rgba(127, 216, 189, .35); }

.gantt-cells { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; }
.gantt-day { text-align: center; font-size: 11px; color: var(--muted); line-height: 1.25; padding-bottom: 6px; }
.gantt-dow  { display: block; letter-spacing: .08em; }
.gantt-date { display: block; font-variant-numeric: tabular-nums; opacity: .75; }
.gantt-day.is-today { color: var(--text); }
.gantt-day.is-today .gantt-dow { color: var(--tint, var(--accent)); font-weight: 700; }

.gantt-cell { position: relative; height: 22px; }
/* 今日の列は縦線を通す。面を塗らないのは、警告色より目立たせないため */
.gantt-cell.is-today::before,
.gantt-day.is-today::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .14);
}
.gantt-day.is-today { position: relative; }

/* 期限までの助走線。細く薄く（主役は期限の印） */
.gantt-lead {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: rgba(255, 255, 255, .07);
}
.gantt-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--tint, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #0b0c0e;
}
.gantt-mark.is-late { background: var(--danger); }

.gantt-row.is-done .gantt-title { color: var(--muted); text-decoration: line-through; }
.gantt-row.is-done .gantt-mark  { background: #4ade80; }
.gantt-row.is-wait { opacity: .55; }
.gantt-row.is-wait .gantt-cells.no-due::after {
  content: "相手待ち"; grid-column: 1 / -1; text-align: center;
  font-size: 11px; color: var(--muted); letter-spacing: .06em;
}

/* ── 起動列を見出しの右へ畳む（2026-08-10 オーナー指示）─────────
   「開いた瞬間に全体を見たい」。96px角のカードが1行ぶんの高さを食っていたので、
   見出しの右側に小さく寄せる。名前は消さない（アイコンだけだと何のボタンか分からない）。 */
.headright { align-items: flex-end; gap: 12px; }
/* 2026-08-10 オーナー指示「アイコン群は1列が望ましい」。
   折り返すと右上の塊が2段になって、見出しの高さがまた伸びる。
   nowrap で必ず1行に保ち、幅が足りないときは各カードを縮める（名前は消さない）。 */
.headright .launchbar {
  margin: 0;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  max-width: none;
}
.headright .launch {
  width: 58px; min-width: 0; flex: 0 1 58px;
  padding: 8px 3px 7px; gap: 4px; border-radius: 12px;
}
.headright .launch img { width: 22px; height: 22px; }
.headright .launch-name { font-size: 11px; line-height: 1.25; letter-spacing: 0; }
.headright .launch.app::after { right: 5px; top: 5px; width: 4px; height: 4px; }

/* 画面が狭いときは見出しの下へ戻す（右に寄せると潰れて読めなくなるため）。
   ここでは1行に固執しない。潰して読めなくするより、折り返すほうがまし */
@media (max-width: 1100px) {
  .headright { align-items: flex-start; width: 100%; }
  .headright .launchbar { justify-content: flex-start; flex-wrap: wrap; }
  .headright .launch { flex: 0 0 62px; width: 62px; }
}

/* ── 予定の打ち込み枠（2026-08-10 オーナー指示）─────────────
   「打ち込む指示を入れる枠を作ってカレンダーに反映したい」。
   打った文をその場で解釈し、下に「こう解釈した」を必ず出してから開く。
   確定（保存）はGoogle側で人が押す＝日時の取り違えを黙って通さない。 */
.quickadd { margin: 0 0 16px; }
.quickadd-row { display: flex; gap: 8px; align-items: stretch; }
.quickadd-input {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; font-size: 15px;
  font-family: inherit; line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .15s ease;
}
.quickadd-input::placeholder { color: var(--muted); }
.quickadd-input:focus { outline: none; border-color: var(--accent); }
.quickadd-btn {
  flex: 0 0 auto;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  font-family: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.quickadd-btn:hover { background: #22252b; border-color: var(--accent); }
.quickadd-prev {
  margin-top: 8px; padding-left: 2px;
  font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.quickadd-prev.is-ok { color: #7fd8bd; }
.quickadd-prev.is-ng { color: var(--caution); }

/* 打ち込み枠: 複数行ぶんの読み取り結果（2026-08-10） */
.quickadd-input { resize: vertical; min-height: 62px; }
.quickadd-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.quickadd-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid #4ade80;
  border-radius: 6px; padding: 8px 12px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.quickadd-item.is-ng { border-left-color: var(--caution); color: var(--muted); }
/* 開いた行は落ち着かせる。どこまで入れたか分かるようにするための印 */
.quickadd-item.is-sent { opacity: .5; border-left-color: var(--muted); }
.quickadd-item.is-sent .quickadd-text { text-decoration: line-through; }
.quickadd-text { flex: 1 1 auto; min-width: 0; }
.quickadd-open {
  flex: 0 0 auto; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px 11px;
}
.quickadd-open:hover { color: #fff; border-color: var(--accent); }

/* ── 見出し右側の詰め直し（2026-08-10 オーナー指示）─────────────
   「アイコンを2倍に。ただし高さは増やさない」。
   切り替えボタンと最終更新を縦積み→1行の横並びにして、浮いた高さをアイコンへ回す。
   結果、右側は「メタ1行（約24px）＋アイコン1列（約88px）」＝左のワードマークとほぼ同じ高さ。 */
.headmeta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: nowrap; white-space: nowrap;
}
.headright .updated { padding-bottom: 0; }
.headright { gap: 8px; }

/* アイコンを約2倍に（画像 22px → 40px） */
.headright .launch {
  width: 88px; flex: 0 1 88px;
  padding: 12px 6px 10px; gap: 8px; border-radius: 12px;
}
.headright .launch img { width: 40px; height: 40px; }
.headright .launch-name { font-size: 11px; }
.headright .launch.app::after { right: 7px; top: 7px; width: 5px; height: 5px; }

@media (max-width: 1400px) {
  /* 幅が足りなくなったら、名前より先にアイコンの余白を削る */
  .headright .launch { width: 72px; flex: 0 1 72px; padding: 10px 4px 8px; }
  .headright .launch img { width: 34px; height: 34px; }
}

/* ガントの行から、その期限日で予定を下書きする「＋」（2026-08-10） */
.gantt-cal {
  flex: 0 0 auto; text-decoration: none;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  font-size: 13px; font-weight: 700;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px;
}
.gantt-cal:hover { color: #fff; border-color: var(--accent); }

/* ── 表（kind: table）─────────────────────────────
   2026-08-11 追加。SKU別の損益のように「行を目で追って危険を探す」データ用。
   決まりごと:
   - 色は --danger と --caution だけ。分類色は使わない（既存方針のとおり）
   - **危険を色だけで伝えない。**記号（🔴）か文字を必ず同じ行に置く。
     色覚特性・印刷・強制カラーモードで色は消えるが、記号と文字は残る
   - 数字は等幅字形で右揃え。桁が揃わないと大小が目で比べられない
   - 横に長い表は表の中だけで横スクロールさせる。画面全体を横に伸ばさない */
.dtable-wrap { overflow-x: auto; margin: 2px 0 4px; }
.dtable {
  width: 100%; border-collapse: collapse;
  font-size: 13px; white-space: nowrap;
}
.dtable th {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .04em;
  color: var(--muted); padding: 6px 14px 8px 0;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--surface);
}
.dtable td {
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.dtable tbody tr:last-child td { border-bottom: none; }
/* 1列目は行の名前。ここだけ主役級の明るさにする */
.dtable td:first-child { color: var(--text); font-weight: 600; }
.dtable .ta-r {
  text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* 危険な値。セル単位でも行単位でも付けられる */
.dtable td.st-warn { color: var(--danger); font-weight: 700; }
.dtable td.st-none { color: var(--muted); }
/* 行そのものが危険なときは、左端に細い帯を1本だけ引く。
   行全体を塗ると数字が読みにくくなり、赤の意味も薄まる */
.dtable tr.st-warn td:first-child {
  box-shadow: inset 2px 0 0 var(--danger); padding-left: 10px;
}
.dtable tr.st-warn td { background: rgba(229, 72, 77, .05); }
@media (max-width: 720px) { .dtable { font-size: 13px; } }

/* 入れ子の表（ASIN → SKU → キャンペーン）。
   最初は親だけ出し、クリックで直下の子だけ開く。
   全部開いて出すと数百行になり、目で追えなくなる */
.dtable tr.is-parent { cursor: pointer; }
.dtable tr.is-parent:hover td { background: rgba(255, 255, 255, .03); }
.caret { display: inline-block; width: 14px; color: var(--muted); font-size: 11px; }
.dtable tr.d1 td:first-child { padding-left: 22px; }
.dtable tr.d2 td:first-child { padding-left: 44px; }
/* 子の行は一段落ち着かせる。親と同じ強さだと、どれが集計行か分からなくなる */
.dtable tr.d1 td, .dtable tr.d2 td { color: var(--muted); }
.dtable tr.d1 td:first-child, .dtable tr.d2 td:first-child { font-weight: 400; color: var(--text-2); }
.dtable tr.d1 td.st-warn, .dtable tr.d2 td.st-warn { color: var(--danger); font-weight: 700; }

/* 列の多い表は横いっぱいに使う。他のパネルと同じ幅だと右が切れて一覧性が消える */
.panel.wide { grid-column: 1 / -1; }

/* 行の状態は3段階。色だけで伝えないこと（判定列に記号と文字を必ず置く）。
   2段（緑/赤）だけだと「目標未達だが黒字」と「売るほど赤字」が同じ赤になり、
   どれを先に止めるかが分からなくなる */
.dtable tr.st-caution td { background: rgba(224, 164, 74, .05); }
.dtable tr.st-caution td:first-child {
  box-shadow: inset 2px 0 0 var(--caution); padding-left: 10px;
}
.dtable td.st-caution { color: var(--caution); font-weight: 700; }
/* 健全な行にも左端に細い緑を引く。3色が同じ形で並んで初めて「3段階」に見える */
.dtable tr.st-ok td:first-child {
  box-shadow: inset 2px 0 0 #35a06f; padding-left: 10px;
}
/* 子・孫の行の帯は細くする。親と同じ太さだと、どれが集計行か分からなくなる */
.dtable tr.d1 td:first-child, .dtable tr.d2 td:first-child { box-shadow: none; }
.dtable tr.d1.st-warn td:first-child { box-shadow: inset 2px 0 0 rgba(229,72,77,.5); }
.dtable tr.d1.st-caution td:first-child { box-shadow: inset 2px 0 0 rgba(224,164,74,.5); }
.dtable tr.d1.st-ok td:first-child { box-shadow: inset 2px 0 0 rgba(53,160,111,.5); }

/* セルの下に敷く帯。中央が0、右がプラス、左がマイナス。
   数字は必ず残す（帯だけにすると正確な値が読めなくなる）。
   分類色は使わず、プラス=緑・マイナス=赤の2色だけ。意味は「符号」のみ */
.dtable td.has-bar { position: relative; padding-bottom: 11px; }
.cellbar {
  position: absolute; left: 0; right: 14px; bottom: 4px; height: 3px;
  background: rgba(255, 255, 255, .05); border-radius: 6px;
}
.cellbar i { position: absolute; top: 0; height: 3px; border-radius: 6px; }
.cellbar i.pos { background: #35a06f; }
.cellbar i.neg { background: var(--danger); }

/* 折りたたみ。明細の長いパネルは畳んでおき、見出しに要約だけ出す。
   全部開いていると画面が縦に伸びて、毎朝ぜんぶ見る気が失せる */
.panel h2.is-toggle { cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.panel-caret { margin-left: auto; color: var(--muted); font-size: 13px; }
.panel-sum {
  font-size: 13px; color: var(--text-2); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* 畳んでいるときは要約だけ見せる。開いているときは本文があるので要約は邪魔 */
.panel:not(.folded) .panel-sum { display: none; }
.panel.folded .meta { display: none; }
.panel.folded > *:not(h2) { display: none; }
.panel.folded { padding-bottom: 18px; }

/* リストの行の状態。優先順位や期限が並ぶリストで「どれが急ぎか」を出す。
   面を塗らず左端の細い帯だけにする（塗ると文字が読みにくくなり、赤の意味も薄まる） */
.items li.st-warn    { box-shadow: inset 2px 0 0 var(--danger);  padding-left: 12px; }
.items li.st-caution { box-shadow: inset 2px 0 0 var(--caution); padding-left: 12px; }
.items li.st-ok      { box-shadow: inset 2px 0 0 #35a06f;        padding-left: 12px; }
.items li.st-none    { color: var(--muted); }

/* ── デモ帯（2026-08-13 新設）──────────────────────────
   config の demo フラグでのみ出る。手動で消す操作を作らない。
   画面上端に固定し、スクロールしても消えない。撮影中も常に映る。 */
.demoband {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 18px;
  background: #7c2d12; border-bottom: 1px solid #c2410c;
  font-size: 13px; letter-spacing: .04em;
}
.demoband-tag {
  font-weight: 700; letter-spacing: .18em; font-size: 11px;
  background: #ea580c; color: #fff; border-radius: 6px; padding: 2px 9px;
}
.demoband-text { color: #fed7aa; }
body.has-demoband { padding-top: 34px; }
@media print { .demoband { position: static; } body.has-demoband { padding-top: 0; } }

/* ── 系統A「Executive Dark」の適用（2026-08-13）─────────────
   dashboard-ui スキルの標準に合わせる。外していたのは4点:
   ①主役がいない（全部同じ大きさ）②数字が等幅でない
   ③8pxグリッドに乗っていない ④1画面に収まっていない
   「かっこよさ」は色数とアニメでは作れない。整列・余白・等幅数字で作る。 */

/* 数字は計器の表示。プロポーショナル書体だと桁が揃わず、素人くさく見える */
.metric .value, .metric.tile .value {
  font-family: "SFMono-Regular", "Consolas", "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ヒーロー3枚（UI要件A）。引きで見て「どこから見ればいいか」が一目で決まる */
.metrics { gap: 16px; }
.metric.tile.hero {
  flex: 1 1 300px; max-width: none;
  padding: 24px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-top-width: 3px;
}
.metric.tile.hero .label { font-size: 13px; margin-bottom: 16px; }
.metric.tile.hero .value { font-size: 64px; line-height: 1; font-weight: 300; }
.metric.tile.hero .sub { font-size: 15px; margin-top: 12px; color: var(--text); }
.metric.tile.hero .note { margin-top: 16px; padding-top: 12px; font-size: 13px; }

/* 補助タイルは主役より一段落とす。8pxグリッドに乗せる */
.metric.tile { padding: 16px; border-radius: 12px; flex: 1 1 216px; max-width: 320px; }
.metric.tile .label { margin-bottom: 8px; }
.metric.tile .value { font-size: 31px; }
.metric.tile .sub { margin-top: 8px; }
.metric.tile .note { margin-top: 8px; padding-top: 8px; }

/* ヒーローと補助のあいだに区切りを入れる。線ではなく余白で分ける */
.metric.tile.hero + .metric.tile:not(.hero) { margin-left: 0; }
.metrics { align-items: stretch; }

/* ── 1画面モード（2026-08-13・UI要件C）────────────────────
   1920×1080でスクロールなしに収めるための密度。デモ・撮影用。
   構造は同じままCSSだけで詰める。数字の階層（ヒーロー＞補助）は保つ。
   詰める順序は「飾り→余白→文字」。数字の大きさは最後まで守る。 */
body.compact { padding: 20px 28px 28px; }
body.compact.has-demoband { padding-top: 48px; }
body.compact .wordmark { font-size: 31px; margin-bottom: 6px; }
body.compact .stamp-date { font-size: 22px; }
body.compact .topbar { padding-bottom: 10px; margin-bottom: 14px; }
body.compact .launchbar { margin: 0; gap: 8px; }
body.compact .launch { width: auto; padding: 6px 12px; }
body.compact .zone { margin-bottom: 16px; }
body.compact .zone-head { padding-bottom: 6px; margin-bottom: 10px; }
body.compact .zone-grid { gap: 12px; }
body.compact .panel { padding: 14px 18px 16px; }
body.compact .panel h2 { font-size: 15px; margin-bottom: 2px; }
body.compact .panel .meta { display: none; }   /* 取得時刻は毎朝の判断に不要。DEMOでは帯が兼ねる */
body.compact .metrics { gap: 8px; }
body.compact .metric.tile { padding: 10px 14px; }
body.compact .metric.tile .label { margin-bottom: 6px; font-size: 11px; }
body.compact .metric.tile .value { font-size: 22px; }
body.compact .metric.tile .sub { margin-top: 4px; font-size: 11px; }
body.compact .metric.tile .note { margin-top: 6px; padding-top: 6px; font-size: 11px; }
body.compact .metric.tile.hero { padding: 16px 18px; }
body.compact .metric.tile.hero .value { font-size: 46px; }
body.compact .metric.tile.hero .sub { margin-top: 8px; font-size: 13px; }
body.compact .metric.tile.hero .note { margin-top: 10px; padding-top: 8px; font-size: 11px; }
body.compact svg.spark { height: 22px; margin-top: 6px; }
body.compact .items li { font-size: 13px; padding: 6px 0 6px 12px; }
body.compact .items .item-sub { font-size: 11px; }

/* 1画面モードの追い込み。8タイルが1行に収まる幅まで基底を下げる。
   ヒーローの大きさは守る（ここを縮めたら密度のために主役を殺すことになる） */
body.compact .metric.tile { flex: 1 1 168px; max-width: none; }
body.compact .metric.tile.hero { flex: 1 1 280px; }
body.compact .zone { margin-bottom: 10px; }
body.compact .zone-head { margin-bottom: 8px; }
body.compact .items li { padding: 4px 0 4px 12px; }
/* 補足は1行に切る。全文は明細パネル側で読める（同じ文を2行かけて2か所に出さない） */
body.compact .items .item-sub {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 1画面モードの最終追い込み */
/* 今日やる3つは3列に並べる。縦に積むと1件75pxで一等地を225px食う */
body.compact .zone-focus .items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
/* 起動ボタン列は隠す。「どこに繋がっているか」は接続パネルが同じ話をより正確に語る。
   デモで7ボタンを見せるのは冗長で、折り返して縦を60px食っていた */
body.compact .launchbar { display: none; }
body.compact .zone-note { display: none; }

/* 畳んだパネルは1画面モードでは横に並べる。
   畳みバー1本が全幅を取ると、バー3本で縦120pxを食う。畳んでいる＝いま読まなくていい、
   なので場所も控えめでいい */
body.compact .panel.wide.folded { grid-column: auto; }
body.compact .panel.folded { padding: 10px 16px; }

/* 3列にした項目が右へはみ出す対策。grid の子は既定で中身の幅より縮めないので、
   長い見出しが列幅を無視して伸びる。min-width:0 で列幅に従わせ、見出しは折り返す */
body.compact .zone-focus .items li { min-width: 0; }
body.compact .zone-focus .items li > span:not(.item-sub) { overflow-wrap: anywhere; }
/* 1枚だけ余った行のタイルが全幅に伸びるのを止める（チャネル別が横一杯になっていた） */
body.compact .metric.tile { max-width: 460px; }
body.compact .metric.tile.hero { max-width: none; }

/* 1画面モード: 経営者ボードを1行に収める。
   ヒーロー3枚を少し細くし、補助5枚を同じ行に入れる（2行目の1枚が130px食っていた） */
body.compact .metric.tile.hero { flex: 1 1 250px; }
body.compact .metric.tile { flex: 1 1 150px; }
/* 予定・受信は文字を1段落とす（読み物ではなく確認物） */
body.compact .tl-item, body.compact .board-row { font-size: 13px; }

/* TODAY帯は3列固定: ①今日やる3つ ②予定 ③受信。
   縦に積むと3枚で500px食う。朝の確認は左から右へ1往復で終わる形にする */
body.compact .zone-focus .zone-grid { grid-template-columns: 1fr 1fr 1fr; }
body.compact .zone-focus .panel.wide { grid-column: 1 / -1; }
/* 3列にしたので、やること3件は縦積みに戻す（1列の中で3列に割ると読めない） */
body.compact .zone-focus .items { display: flex; flex-direction: column; gap: 4px; }
/* 補足のはみ出しは1行省略のまま */
body.compact .zone-focus .items .item-sub { max-width: 100%; }
/* 会社の健康診断の処方は2行まで。3行目からは畳む（全文は各機能の明細で読む想定） */
body.compact .metric.tile:not(.hero) .note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 1画面モード最終シェイプ（-56px）。削るのは飾りと余白だけ。数字には触れない */
body.compact { padding-bottom: 12px; }
body.compact.has-demoband { padding-top: 42px; }
body.compact .zone { margin-bottom: 8px; }
body.compact .panel { padding: 12px 16px 12px; }
body.compact .panel h2 { margin-bottom: 0; }
body.compact .tl-item { margin-bottom: 8px; }
body.compact .metric.tile.hero { padding: 14px 16px; }
body.compact .metric.tile.hero .note { margin-top: 8px; padding-top: 6px; }

/* 畳みバー4枚が1行に収まるように。畳んでいる＝いま読まない、なので最小限でいい */
body.compact .panel.folded { padding: 7px 14px; }
body.compact .panel.folded h2 { font-size: 13px; }

/* 最後の18px。帯の見出し行を1段細く */
body.compact .zone-head { padding-bottom: 4px; margin-bottom: 6px; }
body.compact .zone-title { font-size: 11px; }
body.compact .topbar { margin-bottom: 10px; padding-bottom: 8px; }

/* ── 信号サマリー（常時表示・2026-08-13）──────────────── */
.sigsum { display: flex; gap: 8px; margin-top: 2px; }
.sig {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  color: var(--text-2);
}
.sig-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.sig-n { font-weight: 700; font-variant-numeric: tabular-nums;
         font-family: "SFMono-Regular","Consolas",ui-monospace,monospace; }
.sig-warn    { border-color: rgba(229,72,77,.45); }
.sig-warn    .sig-dot { background: var(--danger); box-shadow: 0 0 8px rgba(229,72,77,.6); }
.sig-warn    .sig-n { color: var(--danger); }
.sig-caution { border-color: rgba(224,164,74,.4); }
.sig-caution .sig-dot { background: var(--caution); box-shadow: 0 0 8px rgba(224,164,74,.5); }
.sig-caution .sig-n { color: var(--caution); }
.sig-ok      .sig-dot { background: #35a06f; }
.sig-ok      .sig-n { color: #8adcb4; }
body.compact .sigsum { margin-top: 6px; }

/* タイルのラベルにも状態の点を打つ（上辺の線だけだと横目で拾いにくい） */
.metric.tile .label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; background: var(--muted); vertical-align: 1px;
}
.metric.tile.ok .label::before      { background: #35a06f; }
.metric.tile.caution .label::before { background: var(--caution); box-shadow: 0 0 6px rgba(224,164,74,.55); }
.metric.tile.warn .label::before    { background: var(--danger); box-shadow: 0 0 6px rgba(229,72,77,.65); }

/* ── 3D仕上げ（2026-08-13 オーナー指示「もっと洗練」）──────────
   光は上から1方向。層で厚みを出す: 天面ハイライト＋底面の締め＋接地影＋環境影。
   回転や派手なグラデーションはやらない（計器盤であって玩具ではない） */
.metric.tile {
  background:
    linear-gradient(168deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 42%, rgba(0,0,0,.14) 100%);
  border: 1px solid rgba(255,255,255,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.45),
    0 14px 30px -16px rgba(0,0,0,.85);
  transition: transform .16s ease, box-shadow .16s ease;
}
.metric.tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.5),
    0 22px 44px -18px rgba(0,0,0,.9);
}
/* 危険なヒーローは面がわずかに発光する。飾りではなく「ここを先に見ろ」の信号 */
.metric.tile.hero.warn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.45), 0 14px 30px -16px rgba(0,0,0,.85),
    0 0 42px -14px rgba(229,72,77,.5);
}
.metric.tile.hero.caution {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.45), 0 14px 30px -16px rgba(0,0,0,.85),
    0 0 36px -14px rgba(224,164,74,.38);
}
@media print { .metric.tile { box-shadow: none; } }

/* 信号サマリーを足したぶんの29pxを回収。ワードマークと信号を横一列にする */
body.compact .brandblock { display: flex; align-items: center; gap: 24px; }
body.compact .brandblock .wordmark { margin-bottom: 0; }
body.compact .sigsum { margin-top: 0; }

/* ── 色の統一（2026-08-13 オーナー指示「同じ色はまとめて」）──────────
   飾り色はアクセント1色（青）だけにする。帯ごとの紫・緑・水色をやめる。
   理由: 分類色が4色走ると、本当に意味のある赤黄緑（状態）が埋もれる。
   「色を見た瞬間に良し悪しだと分かる」状態にするには、それ以外の色を消すしかない */
body.compact .panel {
  --tint: #5b8def; --tint-text: #a9c8ff; --tint-wash: rgba(91, 141, 239, .055);
}
body.compact .zone-focus .zone-title, body.compact .zone-money .zone-title,
body.compact .zone-comm .zone-title, body.compact .zone-ops .zone-title,
body.compact .zone-time .zone-title, body.compact .zone-private .zone-title {
  color: #a9c8ff;
}

/* 受信のサービスロゴ。行の先頭に小さく。丸めて背景に少し浮かせる */
.item-icon {
  width: 16px; height: 16px; border-radius: 6px;
  margin-right: 8px; vertical-align: -3px;
  background: rgba(255, 255, 255, .08); padding: 1px;
}

/* ── ブレットゲージ／分解バー（2026-08-13）──────────────── */
svg.gauge { width: 100%; height: 14px; margin-top: 10px; display: block; }
svg.gauge .g-track { fill: rgba(255, 255, 255, .07); }
svg.gauge .g-zone-caution { fill: rgba(224, 164, 74, .18); }
svg.gauge .g-zone-warn { fill: rgba(229, 72, 77, .2); }
svg.gauge .g-val { fill: var(--text-2); }
.metric.tile.caution svg.gauge .g-val { fill: var(--caution); }
.metric.tile.warn svg.gauge .g-val { fill: var(--danger); }
svg.gauge .g-target { fill: #8adcb4; }

.flowbar { display: flex; gap: 4px; margin-top: 10px; height: 16px; }
.fb-seg {
  background: rgba(91, 141, 239, .35); border-radius: 6px;
  overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
}
.fb-seg.fb-neg { background: rgba(53, 160, 111, .4); }  /* 買掛=支払いを待ってもらえている側=緑系 */
.fb-label { font-size: 11px; color: var(--text-2); letter-spacing: 0;
            font-family: "SFMono-Regular","Consolas",ui-monospace,monospace; }

/* ゲージを足したぶんの高さを回収 */
body.compact .zone { margin-bottom: 6px; }
body.compact .panel { padding: 11px 16px 11px; }
body.compact .metric.tile.hero .note { margin-top: 6px; padding-top: 5px; }
body.compact svg.gauge { margin-top: 6px; height: 12px; }
body.compact .flowbar { margin-top: 6px; height: 14px; }

/* クリックできるタイル。押せることは矢印で示す（ホバーで浮く既存挙動と併用） */
.metric.tile.clickable { cursor: pointer; position: relative; }
.metric.tile.clickable::after {
  content: "↗"; position: absolute; top: 10px; right: 12px;
  font-size: 11px; color: var(--muted); opacity: .7;
}
.metric.tile.clickable:hover::after { color: var(--text); opacity: 1; }
/* ジャンプ着地の一瞬の目印（200ms規律の範囲で、光ではなく枠で示す） */
.panel.flash { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* 受信のリンク行 */
.item-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.25); }
.item-link:hover { border-bottom-color: var(--accent); color: #fff; }

/* ゲージ分の高さ回収（-97px） */
body.compact .metric.tile.hero .value { font-size: 31px; }
body.compact .metric.tile .value { font-size: 22px; }
body.compact .metric.tile.hero .note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.compact .items li { padding: 3px 0 3px 12px; }
body.compact .panel h2 { font-size: 15px; }
body.compact .zone-head { margin-bottom: 4px; }
body.compact .tl-item { margin-bottom: 6px; }
body.compact.has-demoband { padding-top: 38px; }
body.compact .metric.tile .note { font-size: 11px; }

/* ゲージ実装後の最終シェイプ（-59px） */
body.compact .items li { padding: 2px 0 2px 12px; font-size: 13px; line-height: 1.5; }
body.compact .items .item-sub { font-size: 11px; }
body.compact .tl-item { margin-bottom: 4px; }
body.compact .day-sep { margin: 6px 0 4px; }
body.compact .zone { margin-bottom: 4px; }
body.compact { padding-bottom: 8px; }
body.compact.has-demoband { padding-top: 36px; }
body.compact .demoband { padding: 5px 18px; }
body.compact .metric.tile .sub { font-size: 11px; }

/* 最後の18px */
body.compact .panel { padding: 10px 16px 10px; }
body.compact .metric.tile.hero { padding: 12px 16px; }
body.compact .topbar { margin-bottom: 8px; padding-bottom: 6px; }
body.compact .zone-head { padding-bottom: 2px; margin-bottom: 3px; }

/* 秘書のひとこと。画面で唯一の「文章」なので、他と混ざらない置き方にする */
.headline {
  margin-top: 8px; font-size: 13px; color: var(--text-2); letter-spacing: .02em;
}
.headline::before { content: "▍"; color: var(--accent); margin-right: 6px; }
body.compact .brandblock { display: block; }          /* ひとこと追加で2段に戻す */
body.compact .brandblock .wordmark { margin-bottom: 4px; }
body.compact .headline { margin-top: 4px; font-size: 13px; }
body.compact .sigsum { display: inline-flex; margin-left: 18px; vertical-align: 6px; }

/* 読み上げ。ボタンは控えめに、発話中は縦棒が呼吸する（発話中という情報の表示） */
.speak-btn {
  margin-left: 12px; font-size: 11px; letter-spacing: .06em;
  color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 12px; cursor: pointer;
  font-family: inherit;
}
.speak-btn:hover { color: var(--text); border-color: var(--accent); }
.headline.speaking::before { animation: hl-pulse 1s ease-in-out infinite; }
@keyframes hl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media print { .speak-btn { display: none; } }

/* ── 処方箋（クリックで開く・既定は閉＝1画面を守る）──────────── */
.rx-toggle {
  display: inline-block; margin-top: 4px; font-size: 11px; cursor: pointer;
  color: var(--accent); letter-spacing: .04em;
}
.rx-toggle:hover { text-decoration: underline; }
.rx {
  margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: rgba(91, 141, 239, .05); border: 1px solid rgba(91, 141, 239, .18);
}
.rx-block { margin-bottom: 10px; }
.rx-block:last-child { margin-bottom: 0; }
.rx-head {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--tint-text, #a9c8ff); margin-bottom: 4px;
}
.rx-steps { margin: 0; padding-left: 20px; }
.rx-steps li { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 2px; }
.rx-body { font-size: 13px; line-height: 1.7; color: var(--text-2); }

/* 指示文。処方箋の中で唯一「そのまま使う」もの。枠を実線にして格を変える */
.rx-order { border-top: 1px solid rgba(91,141,239,.25); padding-top: 10px; margin-top: 12px; }
.rx-to {
  margin-left: 10px; font-size: 11px; font-weight: 700;
  background: rgba(91,141,239,.15); color: #a9c8ff;
  border-radius: 999px; padding: 1px 10px; letter-spacing: .06em;
}
.rx-ordertext {
  white-space: pre-wrap; font-size: 13px; line-height: 1.75; color: var(--text);
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px; padding: 10px 12px; margin: 6px 0 8px;
}
.rx-copy {
  font-size: 11px; color: var(--text-2); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px;
  font-family: inherit; letter-spacing: .04em;
}
.rx-copy:hover { color: #fff; border-color: var(--accent); }

/* 下書きを開くボタン列。送信ではないことが分かる控えめさにする */
.rx-sendrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; }
.rx-send {
  display: inline-block; font-size: 11px; letter-spacing: .03em;
  color: var(--text-2); background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 13px;
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.rx-send:hover { color: #fff; border-color: var(--accent); background: rgba(91,141,239,.1); }
.rx-sendnote { font-size: 11px; color: var(--muted); line-height: 1.6; }

/* 出した指示のトラッカー */
.order-done {
  display: inline-block; margin-top: 4px; font-size: 11px; cursor: pointer;
  color: var(--text-2); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 12px; font-family: inherit;
}
.order-done:hover { color: #fff; border-color: #35a06f; }
.panel-sum { margin-left: 10px; font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── 今日の前進ゲージ ──────────────────────────── */
.t3-gauge { padding: 2px 0 10px; }
.t3-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.t3-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #4f8ff0, #5b8def);
  transition: width .25s ease;
}
.t3-fill.full { background: linear-gradient(90deg, #2f9e6e, #35a06f); }
.t3-label { margin-top: 6px; font-size: 11px; color: var(--text-2);
            font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.t3-label.full { color: #8adcb4; font-weight: 700; }
.t3-check {
  float: right; margin-left: 10px; font-size: 11px; cursor: pointer;
  color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 11px; font-family: inherit; white-space: nowrap;
}
.t3-check:hover { color: #fff; border-color: #35a06f; }
.items li.t3-done > span:first-of-type { opacity: .45; }
.items li.t3-done .t3-check { color: #8adcb4; border-color: rgba(53,160,111,.5); }

/* ── 全体消化ゲージ（ヘッダー常設）──────────────────── */
.gg { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px;
      padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line);
      background: rgba(255,255,255,.02); }
.gg-label { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.gg-track { display: inline-block; width: 110px; height: 7px; border-radius: 999px;
            background: rgba(255,255,255,.08); overflow: hidden; }
.gg-fill { display: block; height: 100%; border-radius: 999px;
           background: linear-gradient(90deg, #4f8ff0, #5b8def); transition: width .25s ease; }
.gg-fill.full { background: linear-gradient(90deg, #2f9e6e, #35a06f); }
.gg-num { font-size: 11px; color: var(--text-2); font-weight: 700;
          font-variant-numeric: tabular-nums;
          font-family: "SFMono-Regular","Consolas",ui-monospace,monospace; }

/* 2026-08-13 引き算: 予定パネルの「仕事」バッジを隠す（全行同じ値＝情報ゼロの飾り）。
   家族の予定が混ざる本番では色分けの意味が出るので、デモ画面に限定 */
section[data-pid="schedule_demo"] .badge { display: none; }
/* 信号チップが狭い窓で折り返しても崩れないように */
body.compact .brandblock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* ── 可読性パス（2026-08-13 オーナー指摘「字が小さい・見にくい」）────────
   1画面に収めるために詰めすぎた文字を一段戻す。
   相殺策: 横幅を全部使う（1680→ほぼ1880px）。列が広がると折り返しが減り、行が縮む。
   方針: 大きくするのは「読む文字」。飾りと余白は増やさない */
body.compact { max-width: none; }

/* ヘッダー: 信号と消化ゲージは開いた瞬間の主役。チップを一回り大きく */
body.compact .sig { font-size: 15px; padding: 6px 16px; gap: 8px; }
body.compact .sig-dot { width: 10px; height: 10px; }
body.compact .gg { padding: 6px 18px; gap: 8px; }
body.compact .gg-label { font-size: 13px; }
body.compact .gg-track { width: 150px; height: 9px; }
body.compact .gg-num { font-size: 13px; }
body.compact .headline { font-size: 15px; color: var(--text); }
body.compact .demoband { font-size: 13px; }
body.compact .wordmark { font-size: 31px; }

/* パネル見出しと帯 */
body.compact .panel h2 { font-size: 15px; }
body.compact .zone-title { font-size: 13px; }

/* タイル: ラベル・補足・処方を1段明るく大きく */
body.compact .metric.tile .label { font-size: 13px; color: var(--text-2); }
body.compact .metric.tile .value { font-size: 22px; }
body.compact .metric.tile.hero .value { font-size: 31px; }
body.compact .metric.tile .sub { font-size: 13px; color: var(--text); }
body.compact .metric.tile.hero .sub { font-size: 13px; }
body.compact .metric.tile .note { font-size: 11px; color: var(--text-2); }
body.compact .metric.tile.hero .note { font-size: 13px; }

/* リスト（今日やる3つ・受信・判断） */
body.compact .items li { font-size: 15px; line-height: 1.6; }
body.compact .items .item-sub { font-size: 13px; color: var(--text-2); }
body.compact .t3-check { font-size: 11px; padding: 3px 13px; }
body.compact .t3-label { font-size: 13px; }

/* 予定 */
body.compact .tl-item, body.compact .board-row { font-size: 15px; }

/* 処方箋・指示文 */
body.compact .rx-steps li, body.compact .rx-body { font-size: 13px; }
body.compact .rx-ordertext { font-size: 13px; }
body.compact .rx-head { font-size: 11px; }

/* 可読性パスの相殺（-64px）。文字は守り、余白と2行目を削る */
/* 受信の補足は1行省略（全文は項目クリックで元サービスに飛べば読める） */
body.compact section[data-pid="inbox_demo"] .item-sub {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.compact section[data-pid="schedule_demo"] .tl-item { margin-bottom: 3px; }
body.compact .items li { padding: 2px 0 2px 12px; }
body.compact .panel { padding: 9px 16px 9px; }
body.compact .metric.tile { padding: 9px 13px; }
body.compact .metric.tile.hero { padding: 11px 15px; }
body.compact .metric.tile .note { margin-top: 5px; padding-top: 5px; }
body.compact .t3-gauge { padding: 0 0 6px; }

/* 相殺つづき（-46px）。文字サイズは1pxも下げない */
/* 今日やる3つの補足も1行省略（全文は処方箋の中にある＝二重に読ませない） */
body.compact section[data-pid="today3"] .item-sub {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.compact .zone { margin-bottom: 3px; }
body.compact .zone-head { padding-bottom: 1px; margin-bottom: 2px; }
body.compact .topbar { margin-bottom: 6px; padding-bottom: 4px; }
body.compact.has-demoband { padding-top: 34px; }
body.compact .metric.tile.hero .note {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body.compact .rx-toggle { margin-top: 2px; }
/* 最後の8px */
body.compact { padding-top: 16px; padding-bottom: 6px; }
body.compact.has-demoband { padding-top: 32px; }
body.compact .demoband { padding: 4px 18px; }
body.compact.has-demoband { padding-top: 30px; }
body.compact .topbar { margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════════
   Linear パス（2026-08-13）— 参考: Linear / Vercel / Raycast
   原則: 静かなクローム・色は状態だけ・フラット＋ヘアライン・4pxグリッド。
   デモ（compact）に適用。機能と情報構造には触れない。
   ════════════════════════════════════════════════════════════════ */

/* P1: Typography — 表示装置風をやめ、静かな階層に */
body.compact .wordmark {
  font-size: 15px; font-weight: 600; letter-spacing: .16em;
  background: none; -webkit-text-fill-color: var(--text); color: var(--text);
}
body.compact .wordmark::after { display: none; }
body.compact .stamp-date {
  font-size: 13px; font-weight: 400; letter-spacing: .02em;
  font-family: inherit; color: var(--muted);
}
body.compact .stamp-date .dow { font-size: 1em; margin-left: .3em; }
body.compact .updated { font-size: 11px; letter-spacing: .02em; }
body.compact .headline { font-size: 15px; }
body.compact .headline::before { content: ""; display: none; }
body.compact .panel h2, body.compact .panel .panel-title {
  color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: .01em;
}
body.compact .zone-title { color: var(--muted); font-size: 11px; letter-spacing: .14em; }
body.compact .zone-note { display: none; }
body.compact .sig, body.compact .gg-label { letter-spacing: .02em; }

/* P2: Color — クロームから色を抜く。色が意味を持つのは状態だけ */
body.compact .panel { background-image: none; }
body.compact .panel::before { display: none; }        /* 上端の色帯を消す */
body.compact .zone-head { border-bottom-color: rgba(255,255,255,.05); }
body.compact .rx-head { color: var(--muted); }
body.compact .rx { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
body.compact .rx-to { background: rgba(255,255,255,.06); color: var(--text-2); }
body.compact .rx-toggle, body.compact .item-link:hover { color: var(--text); }
body.compact .item-link { border-bottom-color: rgba(255,255,255,.18); }

/* P3: 深さ — グラデ・多層影・発光を廃し、フラット＋ヘアライン */
body.compact .panel {
  background-color: #131417;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: none; border-radius: 12px;
}
body.compact .panel:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.13); }
body.compact .metric.tile, body.compact .metric.tile.hero {
  background: rgba(255,255,255,.024);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: none; border-radius: 6px;
}
body.compact .metric.tile:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.14); }
/* 状態は枠色を静かに寄せる＋点＋数字色。okは無色＝静かなまま */
body.compact .metric.tile.caution, body.compact .metric.tile.hero.caution {
  border-color: rgba(224,164,74,.32);
}
body.compact .metric.tile.warn, body.compact .metric.tile.hero.warn {
  border-color: rgba(229,72,77,.4);
}
body.compact .metric.tile.hero.warn, body.compact .metric.tile.hero.caution { box-shadow: none; }

/* P4: Spacing — 4pxグリッドに統一（8 / 12 / 16） */
body.compact .panel { padding: 12px 16px; }
body.compact .metric.tile { padding: 12px; }
body.compact .metric.tile.hero { padding: 16px; }
body.compact .metrics { gap: 8px; }
body.compact .zone-grid { gap: 8px; }
body.compact .zone { margin-bottom: 8px; }
body.compact .zone-head { padding-bottom: 4px; margin-bottom: 4px; }
body.compact .brandblock { gap: 8px 16px; }
body.compact .panel h2 { margin-bottom: 4px; }

/* P5: 形の統一 — 状態＝ピル／操作＝6px矩形 */
body.compact .sig, body.compact .gg { border-color: rgba(255,255,255,.08); background: transparent; }
body.compact .sig-warn { border-color: rgba(229,72,77,.35); }
body.compact .sig-caution { border-color: rgba(224,164,74,.3); }
body.compact .t3-check, body.compact .rx-send, body.compact .rx-copy,
body.compact .order-done, body.compact .speak-btn {
  border-radius: 6px; background: rgba(255,255,255,.03);
}
body.compact .panel.folded { border-radius: 6px; padding: 8px 14px; }
body.compact .rx, body.compact .rx-ordertext { border-radius: 6px; }

/* Linearパス 2巡目（2026-08-13）
   ① 注意(🟡)の枠色を廃止 — 琥珀の枠が5枚並んで騒がしかった。
     点＋数字色で十分伝わる。枠に色が付くのは🔴だけ＝赤が本当に目立つようになる。
     ヒーロー3枚だけは主役なので状態の枠色を残す（重要なものほど強く） */
body.compact .metric.tile.caution:not(.hero) { border-color: rgba(255,255,255,.06); }

/* ② 4pxグリッドのまま高さを回収（縦paddingを1段下げる: 12→8） */
body.compact .panel { padding: 8px 16px; }
body.compact .metric.tile { padding: 12px; }
body.compact .metric.tile.hero { padding: 14px 16px; }
body.compact .zone { margin-bottom: 4px; }
body.compact .panel.folded { padding: 8px 14px; }

/* ── パネルの並び替え ──────────────────────────── */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
section.panel.dragging { opacity: .45; border-style: dashed; }
.layout-reset {
  margin-left: 12px; font-size: 11px; color: var(--muted); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 10px; font-family: inherit;
}
.layout-reset:hover { color: var(--text); border-color: rgba(255,255,255,.2); }

/* 緑の復活（2026-08-13 オーナー指示）。正常は「安心の在庫」として見せる */
body.compact .sig-ok { border-color: rgba(53,160,111,.35); }
body.compact .sig-ok .sig-dot { background: #35a06f; box-shadow: 0 0 8px rgba(53,160,111,.5); }
body.compact .sig-ok .sig-n { color: #8adcb4; }
/* 正常タイルの点も一段明るく（消し込みすぎていた） */
body.compact .metric.tile.ok .label::before { background: #3db67e; }

/* 図を足したぶんの高さ回収: 健康診断の処方文は1行に（線が文脈を語るようになったため）。
   全文は各タイルのクリック先（元サービス）と経営者ボードにある */
body.compact section[data-pid="company"] .metric.tile .note {
  -webkit-line-clamp: 1;
}
/* 最後の2px */
body.compact svg.spark { margin-top: 4px; }

/* ── 会社健全度バー（2026-08-14）: 0-100・色は信号のみ・数字は等幅 ── */
.healthbar { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; }
.hb-label { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.hb-track { position: relative; width: 140px; height: 8px; border-radius: 6px;
  background: rgba(255,255,255,.08); }
.hb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  background: var(--muted); transition: width 200ms ease; }
.hb-tick { position: absolute; left: 80%; top: -3px; bottom: -3px; width: 1px;
  background: rgba(255,255,255,.35); }
.hb-num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.hb-max { font-size: 11px; color: var(--muted); }
.hb-ok .hb-fill { background: #35a06f; }
.hb-ok .hb-num { color: #8adcb4; }
.hb-caution .hb-fill { background: var(--caution); }
.hb-caution .hb-num { color: var(--caution); }
.hb-warn .hb-fill { background: var(--danger); }
.hb-warn .hb-num { color: var(--danger); }
body.compact .healthbar { margin-left: 10px; }
/* compact（1画面モード）では健全度バーを短縮形にする: ラベルは省き（tooltipに残る）、
   トラック90px・数字13px。ヘッダー1行を維持するため（2026-08-14 実測で折返しが出た） */
body.compact .healthbar { margin-left: 8px; gap: 4px; }
body.compact .hb-label { display: none; }
body.compact .hb-track { width: 90px; }
body.compact .hb-num { font-size: 13px; }

/* ── 視覚化バッチ（2026-08-14 オーナー指示 1-3）────────────────── */
/* ③手順の番号バッジ: 読むリスト→見る手順に */
.rx-steps { list-style: none; padding-left: 0; counter-reset: rxstep; }
.rx-steps li { counter-increment: rxstep; position: relative; padding-left: 30px; }
.rx-steps li::before { content: counter(rxstep); position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: rgba(91,141,239,.16);
  color: var(--accent); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
/* ①-a 金額チップ: 文中の金額を等幅・強調で浮かせる */
.money { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.07); border-radius: 6px; padding: 0 2px; }
/* ①-b 金額インパクトバー: 行ごとの金額を同じ物差しで。
   高さゼロ設計: 行の下端に重ねる（1画面1080pxを1pxも食わないため） */
.has-rx, .panel li { position: relative; }
.impact { display: block; height: 2px; border-radius: 6px;
  background: rgba(255,255,255,.05); position: absolute; left: 0; right: 0; bottom: -1px; }
.impact-fill { display: block; height: 100%; border-radius: 6px;
  background: var(--accent); opacity: .8; }
/* ②パネル分類アイコン */
.panel-icon { margin-right: 6px; opacity: .9; }
/* compactの .items li 子孫セレクタが手順liまで巻き込むため明示的に取り返す */
body.compact .rx-steps li { padding: 2px 0 2px 30px; }

/* ── 健全度バー＝画面の門（2026-08-14 オーナー指示「顔みたいな門だからもっと大きく」）── */
.healthbar { margin-left: 18px; gap: 8px; }
.hb-label { display: inline !important; font-size: 13px; }
.hb-track { width: 230px; height: 12px; border-radius: 6px; }
.hb-fill { border-radius: 6px; }
.hb-tick { top: -4px; bottom: -4px; }
.hb-num { font-size: 22px; font-family: "SFMono-Regular", "Consolas", ui-monospace, monospace;
  letter-spacing: -.02em; }
.hb-max { font-size: 11px; }
body.compact .healthbar { margin-left: 14px; gap: 8px; }
body.compact .hb-track { width: 230px; }
body.compact .hb-num { font-size: 22px; }
/* 門バー大型化の場所代: 「今日の消化」を縮める（門が主・消化は従。2026-08-14） */
body.compact .gg { padding: 4px 10px; gap: 4px; margin-left: 4px; }
body.compact .gg-track { width: 70px; }
body.compact .gg-label { font-size: 11px; }
body.compact .sigsum { gap: 8px; }
body.compact .sig { padding-left: 8px; padding-right: 8px; }

/* 門バーの場所代② : 読み上げはアイコンだけ・ひとことに上限幅（全文はtitleで）2026-08-14 */
body.compact .speak-btn { min-width: 34px; padding-left: 8px; padding-right: 8px; }
body.compact .headline-text { max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
body.compact .hb-num { font-size: 22px; line-height: 1; }
.hb-num { line-height: 1; }

/* ══ スマホ版（2026-08-14 オーナー指示「レスポンシブ・情報量は減らす」）══════
   設計: 朝の一瞥に必要な物だけ残す。①健全度の門 ②信号 ③秘書のひとこと
   ④今日やる3つ ⑤返信が要るもの ⑥金のヒーロー3枚。表・明細・健康診断はPCで見る。
   残すパネルは config.json の "mobile": true（.m-keep）が決める */
@media (max-width: 640px) {
  body, body.compact { min-width: 0; overflow-x: hidden; }
  /* パネルの取捨: m-keep 以外は出さない */
  .panel:not(.m-keep) { display: none !important; }
  /* 帯（zone）は縦積み・タイトル行は隠す（1列になった時点で仕切りの意味が薄い） */
  .zone-title, .zone-head, h2.zone { display: none !important; }
  main, .zones, .zone, .zone-body { display: block !important; min-width: 0; }
  .panel, .panel.wide { width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 10px 8px !important; }
  /* ヘッダー: 縦積み。門（健全度）が最上段・最大 */
  header.topbar, body.compact header.topbar { display: block; height: auto; padding: 10px 12px; }
  .brandblock { display: block; width: auto; }
  .wordmark { font-size: 15px; letter-spacing: .2em; }
  body.compact .sigsum { display: flex; margin: 8px 0 0; flex-wrap: wrap; gap: 8px; vertical-align: baseline; }
  .healthbar, body.compact .healthbar { display: flex; margin: 10px 0 2px; width: 100%; }
  .hb-track, body.compact .hb-track { flex: 1 1 auto; width: auto; height: 14px; }
  .hb-num, body.compact .hb-num { font-size: 31px; }
  body.compact .gg { display: none; }             /* 消化ゲージはPC用 */
  .headline { display: block; margin: 8px 0 0; }
  body.compact .headline-text { max-width: none; white-space: normal; display: inline; }
  .stamp-date, .headright, .dow { display: none !important; }
  /* 経営者ボード: ヒーロー3枚だけ（それ以外のタイルは隠す） */
  .m-keep .metric.tile:not(.hero) { display: none; }
  .m-keep .metrics { display: block; }
  .m-keep .metric.tile.hero { max-width: none; margin-bottom: 8px; }
  /* 触りやすさ: 行の縦パディングを広げる */
  body.compact .items li { padding: 8px 0 8px 12px; font-size: 15px; }
  .rx-sendrow .rx-send { padding: 8px 10px; }
  /* 並び順: 今日やる3つ→返信→金 の順は config の並びのまま（zoneが縦に落ちる） */
}
/* スマホ: zone-grid（グリッド）を1列に落とす（.zone-body 想定が実際は .zone-grid だった） */
@media (max-width: 640px) {
  .zone-grid, body.compact .zone-grid { display: block !important; }
  .zone-grid > .panel { width: auto !important; }
}
/* スマホ: DEMO帯が2行になり固定34pxでは足りずロゴに被る → 流し込みに変える */
@media (max-width: 640px) {
  .demoband { position: static; }
  body.has-demoband, body.compact.has-demoband { padding-top: 0; }
}
/* 人件費換算の行（2026-08-14）: パネル下端の静かな一行。金額はmoneyチップが浮かせる */
.human-cost { display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: var(--text-2); }
.human-cost-icon { opacity: .8; }
body.compact .human-cost { font-size: 13px; }

/* ══ 3Dデプス（2026-08-14 オーナー指示「立体感・近未来的に」・デモ限定）══════
   スコープ=body.has-demoband（デモ画面にだけ自動で付くクラス）＝本番テナント不干渉。
   流儀: ネオン/ガラス風はやらない。多層シャドウ＋上端ハイライト＋微グラデ＋門の発光。
   レイアウト寸法は不変（シャドウと背景のみ）＝1画面1080px無傷 */
body.has-demoband {
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(91,141,239,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.015) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.015) 47px 48px),
    var(--bg);
}
body.has-demoband .panel {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 90px),
    linear-gradient(180deg, var(--tint-wash, transparent), transparent 104px);
  border-color: rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.5),
    0 10px 28px rgba(0,0,0,.42);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
body.has-demoband .panel:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 4px rgba(0,0,0,.5),
    0 18px 44px rgba(0,0,0,.55);
}
/* タイル（数字カード）にも一段浅い奥行き */
body.has-demoband .metric.tile {
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,0,0,.35);
  border-radius: 12px;
}
body.has-demoband .metric.tile.warn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 18px rgba(229,72,77,.18);
}
/* 門バー: 発光（ゾーン色）＋トラックの掘り込み */
body.has-demoband .hb-track {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.04);
}
body.has-demoband .hb-ok .hb-fill      { box-shadow: 0 0 12px rgba(53,160,111,.45); }
body.has-demoband .hb-caution .hb-fill { box-shadow: 0 0 12px rgba(224,164,74,.45); }
body.has-demoband .hb-warn .hb-fill    { box-shadow: 0 0 12px rgba(229,72,77,.5); }
/* ヘッダーを面として浮かせる */
body.has-demoband header.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
@media print { body.has-demoband .panel { box-shadow: none; transform: none; } }

/* ══ 3Dデプス強化版（2026-08-14 オーナー指示「安っぽさはそこまで気にするな」）══
   デモ限定のまま出力を上げる: ネオンエッジ・強グロー・門バーに流れる光・二色背景 */
body.has-demoband {
  background:
    radial-gradient(1400px 700px at 20% -150px, rgba(91,141,239,.12), transparent 60%),
    radial-gradient(1200px 600px at 85% -100px, rgba(124,92,240,.10), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(120,160,255,.03) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(120,160,255,.03) 47px 48px),
    var(--bg);
}
/* パネル: 深い浮き＋分類色のネオンエッジ（上端）＋うっすらガラス */
body.has-demoband .panel {
  background-color: rgba(18, 20, 28, .88);
  border-color: rgba(140, 170, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 1px rgba(0,0,0,.4),
    0 14px 40px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.5);
}
body.has-demoband .panel::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 2px;
  border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tint, rgba(140,170,255,.5)), transparent);
  filter: blur(.3px); opacity: .8;
  box-shadow: 0 0 14px var(--tint, rgba(140,170,255,.35));
}
body.has-demoband .panel:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(120,160,255,.18),
    0 24px 60px rgba(0,0,0,.65),
    0 0 30px rgba(91,141,239,.12);
}
/* 門バー: 発光を強め、光が流れる（10秒周期・撮影で「生きてる計器」に見える） */
body.has-demoband .hb-fill { position: relative; overflow: hidden; }
body.has-demoband .hb-fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: hbsheen 10s ease-in-out infinite;
}
@keyframes hbsheen { 0%, 60% { left: -40%; } 85%, 100% { left: 110%; } }
body.has-demoband .hb-ok .hb-fill      { box-shadow: 0 0 20px rgba(53,160,111,.7); }
body.has-demoband .hb-caution .hb-fill { box-shadow: 0 0 20px rgba(224,164,74,.7); }
body.has-demoband .hb-warn .hb-fill    { box-shadow: 0 0 20px rgba(229,72,77,.75); }
/* 赤の数字はわずかに発熱（テキストグロー） */
body.has-demoband .metric.tile.warn .value { text-shadow: 0 0 18px rgba(229,72,77,.5); }
/* ゾーン見出し: ネオンヘアラインを右へ流す */
body.has-demoband .zone-title { position: relative; }
body.has-demoband h2.zone, body.has-demoband .zone > h2 {
  border-image: linear-gradient(90deg, rgba(120,160,255,.4), transparent) 1;
}
/* 信号チップも面で浮かせる */
body.has-demoband .sig {
  background: rgba(18,20,28,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.4);
}
@media print { body.has-demoband .hb-fill::after { animation: none; display: none; } }
/* カーソル追従スポットライト（2026-08-14・デモ限定） */
body.has-demoband .panel .spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 250ms ease; z-index: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(130,165,255,.11), transparent 65%);
}
body.has-demoband .panel:hover .spot { opacity: 1; }
/* タイルもマウスに反応（浮く＋縁が点く） */
body.has-demoband .metric.tile { transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; }
body.has-demoband .metric.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(140,170,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.5), 0 0 18px rgba(91,141,239,.15);
}

/* ══ 近未来×認知負荷減バッチ（2026-08-14・デモ限定）══════════════ */
/* ①フォーカス減光: hoverしたパネル以外を静かに沈める（照明効果＝雑音が消える） */
body.has-demoband:has(.panel:hover) .panel:not(:hover) { opacity: .68; }
body.has-demoband .panel { transition: transform 150ms ease, box-shadow 150ms ease, opacity 250ms ease; }
/* ②警告ドットの脈動: 動きを許すのは「見るべき場所」だけ */
@keyframes warnpulse { 0%,100% { box-shadow: 0 0 6px rgba(229,72,77,.5); } 50% { box-shadow: 0 0 14px rgba(229,72,77,.95); } }
body.has-demoband .sig-warn .sig-dot { animation: warnpulse 2.6s ease-in-out infinite; }
/* ③タイル下段の補足文は普段消す（hoverで浮かぶ）。opacityなので高さ不変＝ズレない */
body.has-demoband .metric.tile .note { opacity: 0; transition: opacity 200ms ease; }
body.has-demoband .metric.tile:hover .note { opacity: 1; }
/* 赤タイルの補足は常時出す（異常の説明は隠さない） */
body.has-demoband .metric.tile.warn .note { opacity: 1; }
/* ④視線ジャンプの着地リング */
@keyframes landring {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,.7); }
  100% { box-shadow: 0 0 0 18px rgba(229,72,77,0); }
}
body.has-demoband .land-flash { animation: landring 1.1s ease-out 2; }
body.has-demoband .sig-warn { cursor: pointer; }

/* ══ ラグジュアリー・コックピット（2026-08-14 オーナー指示「高級外車のコックピット」・デモ限定）══
   夜の高級車の計器盤: 漆黒＋ビネット／削り出し金属の縁／目盛り付きゲージ／
   シャンパンゴールドのアンビエントライト。信号色（データの言葉）は不変 */
body.has-demoband {
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(1400px 700px at 20% -150px, rgba(91,141,239,.08), transparent 60%),
    radial-gradient(1000px 500px at 85% -100px, rgba(232,193,122,.05), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(150,160,190,.02) 47px 48px),
    #0a0a0d;
}
/* アンビエントライト: ヘッダー下に細い光の帯（MBUX風・シャンパンゴールド→ブルー） */
body.has-demoband header.topbar {
  border-bottom: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  position: relative;
}
body.has-demoband header.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,193,122,.55) 25%, rgba(120,160,255,.45) 75%, transparent);
  box-shadow: 0 0 12px rgba(232,193,122,.25);
}
/* パネル: 削り出し金属の縁（上端が受光・下端が影）＋深い面 */
body.has-demoband .panel {
  background-color: rgba(14, 15, 20, .92);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(255,255,255,.03),
    0 1px 2px rgba(0,0,0,.6),
    0 16px 44px rgba(0,0,0,.55);
}
/* タイル: ベゼル付きの計器窓 */
body.has-demoband .metric.tile {
  background-color: rgba(10, 11, 15, .85);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 4px 14px rgba(0,0,0,.4);
}
/* 門バー → 本物のゲージ: 目盛り・金属ベゼル・掘り込み */
body.has-demoband .hb-track {
  border: 1px solid rgba(255,255,255,.12);
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.10) 24px 25px),
    rgba(0,0,0,.55);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.8),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.06);
}
body.has-demoband .hb-tick { background: rgba(255,255,255,.65); width: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,.4); }
/* ラベルは計器のタイポ: 小さく・広いトラッキング */
body.has-demoband .hb-label, body.has-demoband .metric.tile .label, body.has-demoband .gg-label {
  letter-spacing: .18em; font-weight: 600; opacity: .85;
}
/* ゾーン見出し（TODAY/COMPANY/MONEY）もクラスタ表示風 */
body.has-demoband .zone > h2, body.has-demoband h2.zone { letter-spacing: .3em; opacity: .75; }
/* ゲージの燃料部は面で光らせる（暗い盤面に対して視認性を上げる） */
body.has-demoband .hb-fill {
  background-image: linear-gradient(180deg, rgba(255,255,255,.25), transparent 55%);
}
body.has-demoband .hb-ok .hb-fill      { background-color: #3fbf85; }
body.has-demoband .hb-caution .hb-fill { background-color: #eab04e; }
body.has-demoband .hb-warn .hb-fill    { background-color: #ef5a5f; }

/* ── 社長決裁カード（2026-08-14・デモ限定・オーバーレイ＝1080px不可侵）── */
@keyframes urgentin { from { transform: translateX(120%) ; opacity: 0; } to { transform: none; opacity: 1; } }
.urgent-card {
  position: fixed; top: 64px; right: 22px; width: 400px; z-index: 9000;
  background: rgba(16, 14, 16, .97);
  border: 1px solid rgba(229,72,77,.35);
  border-radius: 12px; padding: 18px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.5),
    0 24px 60px rgba(0,0,0,.7),
    0 0 40px rgba(229,72,77,.18);
  animation: urgentin 380ms cubic-bezier(.2,.9,.3,1.1);
  font-size: 13px; color: var(--text);
}
.urgent-card::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(229,72,77,.9), transparent);
  box-shadow: 0 0 16px rgba(229,72,77,.6); border-radius: 6px;
}
.urgent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.urgent-badge { color: #ff8a8d; font-weight: 800; letter-spacing: .12em; font-size: 13px; }
.urgent-deadline { color: var(--caution); font-weight: 700; font-size: 13px; }
.urgent-title { font-weight: 800; font-size: 15px; line-height: 1.5; margin-bottom: 6px; }
.urgent-amount { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.urgent-facts { margin: 0 0 14px; padding-left: 18px; }
.urgent-facts li { margin: 4px 0; line-height: 1.55; color: var(--text-2); }
.urgent-actions { display: flex; gap: 8px; }
.urgent-btn { border-radius: 6px; border: 1px solid rgba(255,255,255,.14); cursor: pointer;
  padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,.05); transition: transform 120ms ease, box-shadow 120ms ease; }
.urgent-btn:hover { transform: translateY(-1px); }
.urgent-ok { background: rgba(53,160,111,.2); border-color: rgba(53,160,111,.5); }
.urgent-ok:hover { box-shadow: 0 0 14px rgba(53,160,111,.35); }
.urgent-ng { background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.4); }
.urgent-later { opacity: .7; }
.urgent-decided { color: #8adcb4; font-weight: 800; padding: 8px 0; }
@media (max-width: 640px) { .urgent-card { left: 10px; right: 10px; width: auto; top: 12px; } }

/* ── パネル別ミニゲージ＋完了の快感（2026-08-14・デモ限定）── */
.pgauge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 10px; }
h2:has(.pgauge) { display: flex; align-items: center; }
.pg-track { display: inline-block; width: 64px; height: 6px; border-radius: 6px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7); overflow: hidden; }
.pg-fill { display: block; height: 100%; width: 0; border-radius: 6px;
  background: var(--tint, #5b8def); transition: width 300ms cubic-bezier(.2,.8,.3,1); }
.pg-num { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pgauge.pg-full .pg-fill { background: #3fbf85; box-shadow: 0 0 10px rgba(63,191,133,.6); }
.pgauge.pg-full .pg-num { color: #8adcb4; font-weight: 800; }
@keyframes pgpop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.pgauge.pg-pop .pg-num { animation: pgpop 350ms ease; display: inline-block; }
/* 完了の瞬間: 行が一度だけ緑に走る */
@keyframes justdone {
  0% { background: rgba(63,191,133,.28); }
  100% { background: transparent; }
}
body.has-demoband li.just-done { animation: justdone 900ms ease-out; }
/* パネル全部済み: 縁が金色に一周光る（高級車のウェルカムライト） */
@keyframes panelgold {
  0% { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(232,193,122,.0), 0 16px 44px rgba(0,0,0,.55); }
  30% { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 2px rgba(232,193,122,.75), 0 0 34px rgba(232,193,122,.35), 0 16px 44px rgba(0,0,0,.55); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(232,193,122,.0), 0 16px 44px rgba(0,0,0,.55); }
}
body.has-demoband .panel.panel-complete { animation: panelgold 1.4s ease-out; }
/* 予定の型アイコン（2026-08-14）: 時刻の右に固定幅で。行の頭が揃う */
.tl-ico { display: inline-block; width: 1.6em; text-align: center; margin: 0 2px; }

/* ── 門バンド（2026-08-14 オーナー指示「健全度バーは5倍でかく」・デモ限定）──
   ヘッダー直下の全幅ゲージ。場所代はゾーン見出し（TODAY等）を畳んで払う */
body.has-demoband .gate-band {
  display: flex; align-items: center; gap: 16px;
  margin: 10px 0 2px; padding: 12px 26px;
  background: rgba(12, 13, 18, .92);
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 14px 40px rgba(0,0,0,.5);
}
body.has-demoband .gate-label {
  font-size: 13px; letter-spacing: .3em; color: var(--text-2); font-weight: 700;
  white-space: nowrap;
}
body.has-demoband .gate-num {
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
}
body.has-demoband .hb-caution .gate-num { color: var(--caution); text-shadow: 0 0 24px rgba(224,164,74,.4); }
body.has-demoband .hb-ok .gate-num      { color: #8adcb4; text-shadow: 0 0 24px rgba(53,160,111,.4); }
body.has-demoband .hb-warn .gate-num    { color: var(--danger); text-shadow: 0 0 24px rgba(229,72,77,.5); }
body.has-demoband .gate-max { font-size: 15px; color: var(--muted); align-self: flex-end; padding-bottom: 8px; }
body.has-demoband .gate-track { flex: 1 1 auto; width: auto; height: 22px; border-radius: 12px; }
body.has-demoband .gate-track .hb-fill { border-radius: 12px; }
body.has-demoband .gate-track .hb-tick { top: -5px; bottom: -5px; width: 2px; }
/* 場所代: ゾーン見出し行を畳む（パネル自体に見出しがあるので情報は失わない） */
body.has-demoband .zone > h2 { display: none; }
/* ヘッダー内の旧ミニバーはデモでは出ない（gate-bandに一本化） */
@media (max-width: 640px) {
  body.has-demoband .gate-band { margin: 8px; padding: 10px 14px; }
  body.has-demoband .gate-num { font-size: 46px; }
}
@media print { body.has-demoband .gate-band { box-shadow: none; } }
/* ── 議事録カード（2026-08-14・デモ限定）。決裁カードの型を青系で流用 ── */
.minutes-btn { margin-left: 8px; border: 1px solid rgba(120,160,255,.35); border-radius: 6px;
  background: rgba(91,141,239,.12); color: #a9c8ff; font-size: 11px; padding: 3px 8px;
  cursor: pointer; transition: transform 120ms ease; }
.minutes-btn:hover { transform: translateY(-1px); box-shadow: 0 0 10px rgba(91,141,239,.3); }
.minutes-card {
  position: fixed; top: 64px; right: 22px; width: 430px; z-index: 9000;
  background: rgba(13, 15, 22, .97);
  border: 1px solid rgba(91,141,239,.4); border-radius: 12px; padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.5),
    0 24px 60px rgba(0,0,0,.7), 0 0 40px rgba(91,141,239,.18);
  animation: urgentin 380ms cubic-bezier(.2,.9,.3,1.1);
  font-size: 13px; color: var(--text);
}
.minutes-card::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px;
  height: 2px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(91,141,239,.9), transparent);
  box-shadow: 0 0 16px rgba(91,141,239,.6); }
.minutes-badge { color: #a9c8ff; font-weight: 800; letter-spacing: .1em; font-size: 13px; }
.minutes-sec { font-size: 11px; color: var(--muted); letter-spacing: .14em; font-weight: 700;
  margin: 10px 0 4px; }
.minutes-new { margin-right: 4px; }
li.from-minutes { color: #cfe0ff; }
@media (max-width: 640px) { .minutes-card { left: 10px; right: 10px; width: auto; top: 12px; } }
/* 門バンドの場所代 精算（2026-08-14）: バンド自身を締め、デモの余白も詰めて1080に戻す */
body.has-demoband .gate-band { margin: 6px 0 0; padding: 8px 22px; gap: 12px; }
body.has-demoband .gate-num { font-size: 46px; }
body.has-demoband .gate-track { height: 18px; border-radius: 12px; }
body.has-demoband.compact { padding-top: 20px; padding-bottom: 14px; }
body.has-demoband .zone { margin-top: 10px; }
/* 門バンド修正（2026-08-14）: fillのinline化で幅0になっていた＋整列 */
body.has-demoband .hb-fill { display: block; height: 100%; }
body.has-demoband .gate-band { align-items: center; }
body.has-demoband .gate-num { font-size: 46px; line-height: .95; }
body.has-demoband .gate-label { align-self: center; }
body.has-demoband .gate-max { align-self: center; padding-bottom: 0; margin-top: 18px; }
/* 1080px精算②（2026-08-14）: パネル内余白と行の高さをデモだけ締める */
body.has-demoband.compact .panel { padding: 10px 16px 10px; }
body.has-demoband .zone { margin-top: 8px; }
body.has-demoband .minutes-btn { padding: 1px 6px; font-size: 11px; }
body.has-demoband.compact .items li { padding: 2px 0 2px 12px; line-height: 1.45; }
body.has-demoband .tl-row { line-height: 1.5; }
/* 1080px精算③（2026-08-14） */
body.has-demoband.compact .panel.folded { padding: 6px 14px; }
body.has-demoband .metric.tile { padding: 10px 12px; }
body.has-demoband.compact .items li { padding: 1px 0 1px 12px; }
body.has-demoband.compact { padding-bottom: 8px; }
body.has-demoband .zone { margin-top: 6px; }
body.has-demoband .gate-band { margin-top: 4px; padding: 6px 22px; }
body.has-demoband .gate-num { font-size: 46px; }
/* 門ゲージ 極太化（2026-08-14 オーナー指示「3倍太く」） */
body.has-demoband .gate-track { height: 48px; border-radius: 12px; }
body.has-demoband .gate-track .hb-fill { border-radius: 12px; }
body.has-demoband .gate-track .hb-tick { top: -6px; bottom: -6px; width: 3px; }
body.has-demoband .hb-track.gate-track {
  background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.10) 47px 49px),
    rgba(0,0,0,.55);
}
/* 1080px精算④: パネル内の「今日の前進」行は見出しミニゲージと二重＝デモでは畳む */
body.has-demoband .t3-gauge { display: none; }
body.has-demoband .zone { margin-top: 4px; }
body.has-demoband.compact { padding-top: 16px; padding-bottom: 6px; }
/* COMMAND HUB エンブレム化（2026-08-14 オーナー指示「大きく立体的にかっこよく」・デモ限定）
   高級車のリアエンブレムの文法: クロームの縦グラデ＋刻印の影 */
body.has-demoband .wordmark {
  font-size: 22px; font-weight: 800; letter-spacing: .32em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #cdd6e6 30%, #78829a 50%, #e2e9f5 62%, #8f98ac 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
body.has-demoband.compact { padding-top: 22px; }
/* ── 録音ドロップ→議事録（2026-08-14・デモ限定）── */
.drop-overlay { position: fixed; inset: 0; z-index: 9500;
  background: rgba(6, 8, 14, .82); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; }
.drop-inner { border: 2px dashed rgba(120,160,255,.5); border-radius: 12px;
  padding: 60px 90px; text-align: center;
  background: rgba(13,15,22,.8); box-shadow: 0 0 60px rgba(91,141,239,.25); }
.drop-ico { font-size: 64px; margin-bottom: 12px; }
.drop-text { font-size: 22px; font-weight: 800; letter-spacing: .08em; }
.drop-sub { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.proc-steps { list-style: none; margin: 8px 0 4px; padding: 0; }
.proc-steps li { padding: 7px 2px; font-size: 15px; color: var(--text-2);
  border-bottom: 1px solid rgba(255,255,255,.05); }
.proc-steps li.proc-done { color: #8adcb4; font-weight: 700; }
.minutes-source { font-size: 11px; color: var(--muted); margin: -2px 0 6px; }


/* == アクションのドラッグ振り分け（2026-08-14・デモ限定）== */
.minutes-actions .act-row { cursor: grab; display: flex; align-items: baseline; gap: 4px;
  border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 6px 8px !important;
  margin: 4px 0; background: rgba(255,255,255,.03); transition: transform 120ms ease; list-style: none; }
.minutes-actions { padding-left: 0 !important; }
.minutes-actions .act-row:hover { transform: translateY(-1px); border-color: rgba(120,160,255,.35); }
.minutes-actions .act-row:active { cursor: grabbing; }
.act-grip { color: var(--muted); font-size: 11px; letter-spacing: -2px; }
.panel.drop-ready { outline: 2px dashed rgba(120,160,255,.6); outline-offset: -2px;
  box-shadow: 0 0 30px rgba(91,141,239,.25) !important; }
.slot-pop { position: fixed; z-index: 9600; width: 190px;
  background: rgba(13,15,22,.98); border: 1px solid rgba(120,160,255,.4); border-radius: 12px;
  padding: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.7), 0 0 30px rgba(91,141,239,.2);
  display: flex; flex-direction: column; gap: 4px; animation: urgentin 200ms ease; }
.slot-title { font-size: 11px; color: var(--muted); letter-spacing: .1em; margin-bottom: 2px; }
.slot-btn { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px;
  background: rgba(255,255,255,.05); color: var(--text); font-weight: 700; font-size: 13px;
  cursor: pointer; font-variant-numeric: tabular-nums; }
.slot-btn:hover { background: rgba(91,141,239,.2); border-color: rgba(120,160,255,.45); }
.slot-cancel { opacity: .6; font-weight: 400; }

/* == G1 What-if（キーw）== */
.whatif-tag { margin-left: 14px; font-size: 11px; color: #8adcb4; letter-spacing: .08em;
  border: 1px solid rgba(63,191,133,.4); border-radius: 999px; padding: 3px 10px;
  background: rgba(63,191,133,.1); white-space: nowrap; }
.metric.tile { position: relative; }
.metric.tile .ghost { position: absolute; right: 10px; bottom: 8px; font-size: 11px;
  color: #8adcb4; background: rgba(63,191,133,.12); border: 1px solid rgba(63,191,133,.35);
  border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums;
  animation: urgentin 250ms ease; }
body.whatif .gate-band { box-shadow: inset 0 1px 0 rgba(255,255,255,.09),
  0 0 0 1px rgba(63,191,133,.35), 0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(63,191,133,.18); }

/* == G2 イグニッション（キーb）== */
.ign-off { opacity: 0 !important; transform: translateY(6px); }
.ign-on { transition: opacity 500ms ease, transform 500ms ease, box-shadow 500ms ease;
  opacity: 1 !important; transform: none;
  box-shadow: 0 0 34px rgba(232,193,122,.28) !important; }
.gate-band.ign-off, .panel.ign-off { transition: none; }

/* == G4 ライブ更新（キーu）== */
@keyframes livepop { 0% { box-shadow: 0 0 0 0 rgba(232,193,122,.5); }
  100% { box-shadow: 0 0 0 16px rgba(232,193,122,0); } }
.metric.tile.live-pop { animation: livepop 900ms ease-out; }
.live-note { position: absolute; right: 10px; top: 8px; font-size: 11px; color: var(--caution);
  font-weight: 700; animation: urgentin 250ms ease; }

/* == G5 夜勤タイムラプス == */
.lapse-off { opacity: .15; }
.lapse-on { transition: opacity 350ms ease; opacity: 1;
  background: rgba(63,191,133,.08); }


/* == 時間グリッド（2026-08-14 オーナー指示「カレンダーにドラッグして時間もあてはめる」）== */
.panel.grid-mode { position: relative; }
.time-grid { position: absolute; inset: 44px 10px 10px; z-index: 50;
  background: rgba(10, 12, 18, .97); border: 1px solid rgba(120,160,255,.35);
  border-radius: 12px; padding: 8px; overflow-y: auto;
  box-shadow: 0 0 30px rgba(91,141,239,.2); animation: urgentin 180ms ease;
  display: flex; flex-direction: column; gap: 4px; }
.tg-row { display: flex; gap: 4px; align-items: stretch; }
.tg-time { width: 44px; font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 11px; color: var(--muted); display: flex; align-items: center; }
.tg-cell-head { flex: 1; text-align: center; font-size: 11px; color: var(--text-2);
  letter-spacing: .2em; font-weight: 700; padding: 2px 0; }
.tg-cell { flex: 1; min-height: 20px; border: 1px dashed rgba(255,255,255,.12);
  border-radius: 6px; font-size: 11px; color: var(--muted);
  display: flex; align-items: center; padding: 0 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-cell:not(.tg-busy) { cursor: copy; }
.tg-busy { background: rgba(255,255,255,.05); border-style: solid; opacity: .55; }
.tg-hot { background: rgba(91,141,239,.28); border-color: rgba(120,160,255,.8);
  box-shadow: 0 0 12px rgba(91,141,239,.4); color: #cfe0ff; }

/* == 注文トースト（2026-08-14）== */
.order-toast { position: fixed; top: 64px; right: 22px; z-index: 9200;
  background: rgba(14, 16, 22, .97); border: 1px solid rgba(232,193,122,.4);
  border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 40px rgba(0,0,0,.6),
    0 0 26px rgba(232,193,122,.18);
  animation: urgentin 300ms cubic-bezier(.2,.9,.3,1.1);
  display: flex; align-items: center; gap: 8px; }
.order-toast-ico { font-size: 18px; }
.order-toast-src { color: var(--muted); font-size: 11px; }
.order-toast-out { transition: opacity 600ms ease, transform 600ms ease;
  opacity: 0; transform: translateX(30px); }

/* == 決裁カードの出どころ == */
.urgent-src { font-size: 11px; color: var(--muted); margin: -2px 0 8px; }

/* 決裁カードの金色フラッシュ（完了の快感の横展開・2026-08-14） */
@keyframes urgentgold {
  0% { border-color: rgba(232,193,122,.9); box-shadow: 0 0 0 2px rgba(232,193,122,.75), 0 0 40px rgba(232,193,122,.4), 0 24px 60px rgba(0,0,0,.7); }
  100% { border-color: rgba(63,191,133,.4); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.7); }
}
.urgent-card.urgent-gold, .minutes-card.urgent-gold { animation: urgentgold 1.2s ease-out; }


/* == レイヤー切替: 社長/全景（2026-08-14・デモ限定）== */
.layer-switch { display: inline-flex; margin-left: 12px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; overflow: hidden; }
.layer-btn { border: none; background: transparent; color: var(--text-2); font-size: 11px;
  font-weight: 700; padding: 4px 12px; cursor: pointer; letter-spacing: .06em; }
.layer-btn.layer-active { background: rgba(232,193,122,.18); color: #f0d9a8; }
body.has-demoband.layer-exec .panel:not(.m-keep) { display: none !important; }
body.has-demoband.layer-exec .zone-grid { display: flex !important; gap: 12px; }
body.has-demoband.layer-exec .zone-grid > .panel { flex: 1 1 0; }
body.has-demoband.layer-exec .m-keep .metric.tile:not(.hero) { display: none; }
body.has-demoband.layer-exec .metrics { display: flex !important; }
body.has-demoband.layer-exec .metric.tile.hero { flex: 1 1 0; max-width: none; }
body.has-demoband.layer-exec .metric.tile.hero .value { font-size: 46px; }
body.has-demoband.layer-exec.compact .items li { font-size: 15px; padding: 8px 0 8px 12px; line-height: 1.6; }
body.has-demoband.layer-exec .gate-num { font-size: 64px; }
body.has-demoband.layer-exec .gate-track { height: 56px; border-radius: 12px; }
body.has-demoband.layer-exec .gate-track .hb-fill { border-radius: 12px; }
body.has-demoband.layer-exec .gate-band { padding: 12px 26px; }
body.has-demoband.layer-exec .panel-title { font-size: 18px; }

/* == 返信の3択下書き（2026-08-14・デモ限定）== */
.reply-choices { display: flex; gap: 4px; margin-bottom: 8px; }
.reply-chip { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 14px;
  background: rgba(255,255,255,.04); color: var(--text-2); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 130ms ease; }
.reply-chip:hover { transform: translateY(-1px); }
.reply-chip.reply-on { background: rgba(91,141,239,.22); border-color: rgba(120,160,255,.55);
  color: #cfe0ff; box-shadow: 0 0 10px rgba(91,141,239,.25); }
.reply-text { white-space: pre-wrap; }
.reply-toggle { color: #a9c8ff; }
/* 返信トグルはメタ行の続きにインラインで置く（行を増やさない=1080px維持） */
body.has-demoband .reply-toggle { display: inline-block; margin-left: 10px; font-size: 11px; }
/* 返信トグルは行の右上（✓済の左隣）に絶対配置＝行を一切増やさない */
body.has-demoband .items li { position: relative; }
body.has-demoband .reply-toggle { position: absolute; right: 84px; top: 6px; margin: 0; }


/* == ドライバーツリー（2026-08-14 第18弾・デモ限定）== */
.gate-clickable { cursor: pointer; }
.tree-card { position: fixed; top: 150px; left: 50%; transform: translateX(-50%);
  width: 980px; max-width: 94vw; z-index: 9100;
  background: rgba(12, 14, 20, .98); border: 1px solid rgba(232,193,122,.35);
  border-radius: 12px; padding: 18px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.75),
    0 0 50px rgba(232,193,122,.15);
  animation: urgentin 300ms cubic-bezier(.2,.9,.3,1.1); }
.tree-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px;
  height: 2px; border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(232,193,122,.8), transparent);
  box-shadow: 0 0 16px rgba(232,193,122,.5); }
.tree-branches { display: flex; gap: 12px; margin-top: 12px; }
.tree-branch { flex: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 16px; background: rgba(255,255,255,.02); }
.tb-head { display: flex; justify-content: space-between; align-items: baseline; }
.tb-name { font-weight: 800; font-size: 15px; letter-spacing: .08em; }
.tb-score { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 31px; font-weight: 700; }
.tb-bar { height: 6px; border-radius: 6px; background: rgba(0,0,0,.5); margin: 8px 0 10px;
  border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.tb-fill { height: 100%; border-radius: 6px; }
.tb-ok .tb-fill { background: #3fbf85; } .tb-ok .tb-score { color: #8adcb4; }
.tb-caution .tb-fill { background: #eab04e; } .tb-caution .tb-score { color: var(--caution); }
.tb-warn .tb-fill { background: #ef5a5f; } .tb-warn .tb-score { color: var(--danger); }
.tb-row { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.tb-move { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: #cfe0ff; font-weight: 700; }
.tree-note { margin-top: 14px; font-size: 11px; color: var(--muted); line-height: 1.7;
  border-left: 2px solid rgba(255,255,255,.1); padding-left: 10px; }
.tree-close { margin-left: auto; }
@media (max-width: 640px) { .tree-branches { flex-direction: column; } .tree-card { top: 60px; } }


/* == ローリング・フォーキャスト（2026-08-14 第19弾・デモ限定）== */
.fcast { margin-top: 6px; padding: 3px 8px; font-size: 11px; color: #a9c8ff;
  border: 1px dashed rgba(120,160,255,.4); border-radius: 6px;
  background: rgba(91,141,239,.06); line-height: 1.5; }
.gate-fcast { margin-left: 12px; padding: 4px 12px; font-size: 13px; font-weight: 700;
  color: #a9c8ff; border: 1px dashed rgba(120,160,255,.45); border-radius: 999px;
  background: rgba(91,141,239,.08); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
body.has-demoband.layer-exec .gate-fcast { font-size: 15px; }
body.has-demoband .metric.tile.has-fcast .note { display: none; }
body.has-demoband .fcast { margin-top: 4px; }
/* 予測導入後の最終精算: あと13px */
body.has-demoband .fcast { margin-top: 3px; padding: 2px 8px; font-size: 11px; }
body.has-demoband .zone { margin-top: 3px; }
body.has-demoband.compact { padding-bottom: 4px; }


/* == 決定の学習ループ（2026-08-14 第20弾・デモ限定）== */
.urgent-precedent { display: flex; gap: 8px; align-items: baseline; margin: 2px 0 8px;
  padding: 7px 10px; border: 1px dashed rgba(232,193,122,.35); border-radius: 6px;
  background: rgba(232,193,122,.06); }
.prec-badge { font-size: 11px; font-weight: 800; color: #f0d9a8; white-space: nowrap;
  letter-spacing: .06em; }
.prec-text { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.tend-badge { margin-top: 8px; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.hold-chip { animation: urgentin 250ms ease; }

/* 設計鳥瞰図リンク（2026-08-14・デモ限定） */
.design-map-link { color: var(--text-2); font-size: 11px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 3px 9px;
  margin-right: 8px; white-space: nowrap; transition: all 130ms ease; }
.design-map-link:hover { color: #f0d9a8; border-color: rgba(232,193,122,.45);
  box-shadow: 0 0 10px rgba(232,193,122,.2); }

.demoband .design-map-link { margin-left: auto; margin-right: 14px; color: #ffe9c7;
  border-color: rgba(255,255,255,.35); }
.demoband { display: flex; align-items: center; }

/* ── 判断カンバン（web/kanban.js・2026-08-16 デモ先行） ─────────────
   列の色は decisions の状態色に合わせる: 判断中=琥珀 ／ 効いた=緑 ／ 効かなかった=赤。
   赤は「取得失敗」専用が原則だが、ここは元から decisions が ❌ に使っている文脈 */
.kanban { display: flex; gap: 8px; align-items: flex-start; }
.kanban-col { flex: 1 1 0; min-width: 0; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  transition: border-color .12s, background .12s; }
.kanban-col.is-target { border-color: var(--accent); background: rgba(91,141,239,.08); }
.kanban-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px;
  font-size: 13px; letter-spacing: .04em; }
.kanban-pending .kanban-head { color: var(--caution); }
.kanban-ok .kanban-head { color: #7fd8bd; }
.kanban-warn .kanban-head { color: #f2a3a5; }
.kanban-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.kanban-cards { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.kanban-card { background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 8px 10px; cursor: grab; user-select: none;
  touch-action: none; }
.kanban-card.is-dragging { cursor: grabbing; opacity: .92;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.kanban-title { font-size: 13px; line-height: 1.45; }
.kanban-card .item-sub { display: block; margin-top: 4px; }
.kanban-card.is-provisional { border-color: rgba(224,164,74,.55); }
.kanban-badge { display: inline-block; margin-top: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; color: #ffd9a0;
  background: rgba(224,164,74,.14); border: 1px solid rgba(224,164,74,.4); }
.kanban-empty { list-style: none; border: 1px dashed var(--line-strong); border-radius: 6px;
  padding: 12px 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* カンバン汎用化（2026-08-16）: 予定・メールの列と、カード内の付属品 */
.kanban-doing .kanban-head { color: var(--accent); }
.kanban-card .tl-time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.kanban-drafts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* カンバンの圧縮と掴みやすさ（2026-08-16 オーナー指摘「掴みにくい・縦長」）
   - グリップを左に出して「動かせる」を目で分からせる
   - メタは1行に刈り込み、全文はホバー（title属性）で
   - 返信案チップはホバー中だけ出す。常時出すと列が縦に伸びるだけ */
.kanban-card { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; }
.kanban-grip { color: var(--muted); cursor: grab; font-size: 13px; line-height: 1.5;
  flex: 0 0 auto; padding-top: 1px; }
.kanban-card:hover .kanban-grip { color: var(--text-2); }
.kanban-body { flex: 1 1 auto; min-width: 0; }
.kanban-card .item-sub { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.kanban-drafts { display: none; }
.kanban-card:hover .kanban-drafts { display: flex; }
.kanban-card:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* 処方箋の先頭に移した但し書き（2026-08-16） */
.rx-lead { color: var(--text-2); font-size: 13px; line-height: 1.6; }

/* locked カンバン（2026-08-16）: 列で見せるが動かせない。触れる顔をさせない */
.kanban-card.is-locked { cursor: default; }
.kanban-card.is-locked:hover { border-color: var(--line-strong); background: var(--surface); }

/* 順位メダル（2026-08-16「金額順の重要度が伝わる絵で」） */
.kanban-rank { font-size: 15px; margin-right: 4px; }

/* ── カンバンの状態を色で示す（2026-08-16 オーナー指示「パッと見で分かるように」）──
   Trelloの流儀に寄せる: 列の上端に色のライン（Trelloのラベルバー）、完了は緑。
   この画面の色ルールとの整合:
   - 済/実行した/効いた = 緑（完了は全画面共通で緑）
   - これから/未返信/判断中 = 琥珀（「注意・未処理」。赤は仰々しいので使わない）
   - 対応中 = 青（accent。動いている最中）
   - 効かなかった = 赤みの控えめな帯（decisions の ❌ と同系。警告色の乱用はしない） */
.kanban-col { border-top: 3px solid transparent; }
.kanban-pending { border-top-color: var(--caution);
  background: linear-gradient(rgba(224,164,74,.05), transparent 55%), var(--surface-2); }
.kanban-doing { border-top-color: var(--accent);
  background: linear-gradient(rgba(91,141,239,.06), transparent 55%), var(--surface-2); }
.kanban-ok { border-top-color: #35b98a;
  background: linear-gradient(rgba(127,216,189,.07), transparent 55%), var(--surface-2); }
.kanban-warn { border-top-color: rgba(229,72,77,.65);
  background: linear-gradient(rgba(229,72,77,.05), transparent 55%), var(--surface-2); }

/* 完了列のカード: 緑の縦ラインと ✓。読めるが「もう終わった」と分かる控えめさ */
.kanban-ok .kanban-card { border-left: 3px solid #35b98a; opacity: .82; }
.kanban-ok .kanban-card .kanban-title::before { content: '✓ '; color: #7fd8bd; }
.kanban-ok .kanban-card:hover { opacity: 1; }

/* 空の完了列は「ここに緑が溜まっていく」ことが分かる薄い受け皿に */
.kanban-ok .kanban-empty { border-color: rgba(53,185,138,.35); color: rgba(127,216,189,.6); }

/* ── 会社健全度の3段カラー（2026-08-16 オーナー指示）──
   好調(80+)=緑 ／ 通常(60-79)=青 ／ 停滞(-59)=赤寄り。
   バーの濃さは app.js が段内の位置（depth）で inline opacity 指定する */
body.has-demoband .gate-good .gate-num   { color: #8adcb4; text-shadow: 0 0 24px rgba(53,160,111,.4); }
body.has-demoband .gate-normal .gate-num { color: #a9c8ff; text-shadow: 0 0 24px rgba(91,141,239,.4); }
body.has-demoband .gate-slump .gate-num  { color: #f2a3a5; text-shadow: 0 0 24px rgba(229,72,77,.5); }
.gate-good .hb-fill   { background: #35a06f; }
.gate-normal .hb-fill { background: var(--accent); }
.gate-slump .hb-fill  { background: #d95757; }
body.has-demoband .gate-good .hb-fill   { box-shadow: 0 0 12px rgba(53,160,111,.45); }
body.has-demoband .gate-normal .hb-fill { box-shadow: 0 0 12px rgba(91,141,239,.45); }
body.has-demoband .gate-slump .hb-fill  { box-shadow: 0 0 12px rgba(217,87,87,.5); }
.gate-zone { font-size: 13px; letter-spacing: .1em; padding: 3px 10px; border-radius: 999px;
  align-self: center; border: 1px solid var(--line-strong); color: var(--text-2); }
.gate-good .gate-zone   { color: #8adcb4; border-color: rgba(53,160,111,.5); }
.gate-normal .gate-zone { color: #a9c8ff; border-color: rgba(91,141,239,.5); }
.gate-slump .gate-zone  { color: #f2a3a5; border-color: rgba(217,87,87,.5); }

/* ── ライトテーマ（2026-08-16 オーナー指示「白背景で見やすくも切り替えたい」）──
   トークンの上書きだけで反転する（色を直書きしている箇所は個別に直す）。
   記憶はブラウザ（localStorage）。切替は🌓ボタン */
body.theme-light {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --text: #1a1d21;
  --text-2: #474d55;
  --muted: #82898f;
  --line: rgba(16, 24, 40, .09);
  --line-strong: rgba(16, 24, 40, .18);
}
/* 暗い前提で直書きされた明るい文字色を、白背景で読める濃さに */
body.theme-light .kanban-ok .kanban-head,
body.theme-light .kanban-ok .kanban-card .kanban-title::before { color: #1e7a54; }
body.theme-light .kanban-warn .kanban-head { color: #b03a3e; }
body.theme-light.has-demoband .gate-good .gate-num   { color: #1e7a54; text-shadow: none; }
body.theme-light.has-demoband .gate-normal .gate-num { color: #2f5fc4; text-shadow: none; }
body.theme-light.has-demoband .gate-slump .gate-num  { color: #b03a3e; text-shadow: none; }
body.theme-light .gate-good .gate-zone   { color: #1e7a54; }
body.theme-light .gate-normal .gate-zone { color: #2f5fc4; }
body.theme-light .gate-slump .gate-zone  { color: #b03a3e; }
body.theme-light .kanban-card { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
body.theme-light .quickadd-prev.is-ok { color: #1e7a54; }

.theme-btn { border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  border-radius: 999px; padding: 3px 10px; cursor: pointer; font-family: inherit; font-size: 13px; }
.theme-btn:hover { color: var(--text); }

/* ── ライトテーマの補正・第2弾（直書きの暗色を白背景用に）──────────
   デモの3D背景・金属縁・白グラデのロゴなど、黒前提の直書きをまとめて上書きする */
html:has(body.theme-light) { background: #f4f5f7; }
body.theme-light .wordmark {
  background: linear-gradient(180deg, #1a1d21 0%, #1a1d21 45%, #5a6472 100%);
  -webkit-background-clip: text; background-clip: text; color: #1a1d21;
}
body.theme-light.has-demoband {
  background:
    radial-gradient(1400px 700px at 20% -150px, rgba(91,141,239,.10), transparent 60%),
    radial-gradient(1200px 600px at 85% -100px, rgba(124,92,240,.08), transparent 55%),
    #eef0f4;
}
body.theme-light.has-demoband header.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}
body.theme-light.has-demoband .panel {
  background-color: #ffffff;
  border: 1px solid rgba(16,24,40,.08);
  box-shadow: 0 2px 10px rgba(16,24,40,.06);
}
body.theme-light.has-demoband .gate-band {
  background: #ffffff;
  border: 1px solid rgba(16,24,40,.10);
  box-shadow: 0 2px 10px rgba(16,24,40,.06);
}
body.theme-light .urgent-card { background: #fff7f7; }
body.theme-light .minutes-card { background: #f7f9ff; }
/* 分類色の文字は白背景用に濃い版へ（帯の色はそのまま） */
body.theme-light .panel.accent-time  { --tint-text: #2f5fc4; }
body.theme-light .panel.accent-comm  { --tint-text: #6b46c1; }
body.theme-light .panel.accent-money { --tint-text: #1e7a54; }
body.theme-light .panel.accent-ops   { --tint-text: #0e7490; }
body.theme-light .panel.accent-focus { --tint-text: #6d28d9; }
body.theme-light .panel.accent-private { --tint-text: #b45309; }
body.theme-light .panel.failed { background-color: #fdf1f1; --tint-text: #b03a3e; }

/* ライトテーマ補正・第3弾: 信号チップとレイヤー切替（デモの黒地直書きを白へ） */
body.theme-light.has-demoband .sig {
  background: #ffffff; border-color: rgba(16,24,40,.14);
  box-shadow: 0 1px 3px rgba(16,24,40,.08); color: var(--text-2);
}
body.theme-light .sig-ok .sig-n { color: #1e7a54; }
body.theme-light .layer-switch { background: #ffffff; border: 1px solid rgba(16,24,40,.14); border-radius: 999px; }
body.theme-light .layer-btn.layer-active { background: rgba(224,164,74,.22); color: #7a5a17; }
body.theme-light .hb-track, body.theme-light .gate-track { background: rgba(16,24,40,.10); }
body.theme-light .gate-fcast { color: #2f5fc4; }

/* 契約語彙の列（caution=これから／none=進行中）にも同じ見た目を（2026-08-16 家族ボード） */
.kanban-caution { border-top-color: var(--caution);
  background: linear-gradient(rgba(224,164,74,.05), transparent 55%), var(--surface-2); }
.kanban-caution .kanban-head { color: var(--caution); }
.kanban-none { border-top-color: var(--accent);
  background: linear-gradient(rgba(91,141,239,.06), transparent 55%), var(--surface-2); }
.kanban-none .kanban-head { color: var(--accent); }

/* ── 細いレール列（完了列。2026-08-16 オーナー指示「終わったことを見る必要はない」）──
   普段は64px: マーク・縦書きラベル・件数だけ。押すと普通の列に開く。
   ドロップ先としてはそのまま機能する（狭くても矩形判定に入る） */
.kanban-col.kanban-slim { flex: 0 0 64px; min-width: 64px; }
.kanban-slim .kanban-head { flex-direction: column; align-items: center; gap: 4px; }
.kanban-slim .kanban-label { writing-mode: vertical-rl; letter-spacing: .2em; font-size: 11px; }
.kanban-slim .kanban-count { margin-left: 0; font-size: 15px; font-weight: 700; }
.kanban-slim .kanban-cards { display: none; }
.kanban-slim.is-target { flex-basis: 84px; }   /* ドラッグで狙われたら少し膨らんで受ける */
.kanban-slim.is-open { flex: 1 1 0; }
.kanban-slim.is-open .kanban-head { flex-direction: row; align-items: baseline; }
.kanban-slim.is-open .kanban-label { writing-mode: horizontal-tb; letter-spacing: .04em; font-size: inherit; }
.kanban-slim.is-open .kanban-count { margin-left: auto; font-size: inherit; }
.kanban-slim.is-open .kanban-cards { display: flex; }

/* ── 健康診断のトリアージと期間札（2026-08-16）── */
.m-period { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  font-size: 11px; font-weight: 400; color: var(--muted);
  border: 1px solid var(--line-strong); vertical-align: 1px; white-space: nowrap; }
.triage-row { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; text-align: left;
  background: transparent; border: 1px dashed var(--line-strong); border-radius: 6px;
  color: #7fd8bd; font-size: 13px; cursor: pointer; font-family: inherit; }
.triage-row:hover { border-color: rgba(53,185,138,.5); }
.triage-ok { margin-top: 8px; }
body.theme-light .triage-row { color: #1e7a54; }

/* ── AI参謀に相談（2026-08-16・デモ限定オーバーレイ）── */
.sanbou-fab { position: fixed; right: 22px; bottom: 22px; z-index: 8900;
  background: linear-gradient(135deg, #5b8def, #7c5cf0); color: #fff; border: none;
  border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: .04em;
  box-shadow: 0 8px 28px rgba(91,141,239,.45); }
.sanbou-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(91,141,239,.6); }
.sanbou-card { position: fixed; right: 22px; bottom: 78px; z-index: 8901;
  width: 440px; max-width: calc(100vw - 32px); max-height: 72vh;
  display: flex; flex-direction: column;
  background: rgba(13, 15, 22, .98); border: 1px solid rgba(120,160,255,.35);
  border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.6); overflow: hidden; }
.sanbou-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line); }
.sanbou-title { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.sanbou-sub { font-size: 11px; color: var(--text-2); }
.sanbou-close { margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 15px; cursor: pointer; }
.sanbou-ctx { padding: 10px 16px; background: rgba(91,141,239,.07);
  border-bottom: 1px solid var(--line); }
.sanbou-ctx-head { font-size: 11px; letter-spacing: .15em; color: #a9c8ff; margin-bottom: 4px; }
.sanbou-ctx-line { font-size: 11px; color: var(--text-2); line-height: 1.7; }
.sanbou-log { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; display: flex;
  flex-direction: column; gap: 8px; min-height: 40px; }
.sanbou-q { align-self: flex-end; max-width: 85%; background: rgba(91,141,239,.18);
  border: 1px solid rgba(91,141,239,.4); border-radius: 12px 12px 3px 12px;
  padding: 8px 12px; font-size: 13px; }
.sanbou-a { align-self: flex-start; max-width: 92%; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 12px 12px 12px 3px;
  padding: 10px 13px; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.sanbou-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px; }
.sanbou-chip { border: 1px solid rgba(120,160,255,.4); background: transparent;
  color: #a9c8ff; border-radius: 999px; padding: 6px 12px; font-size: 11px;
  cursor: pointer; font-family: inherit; }
.sanbou-chip:hover { background: rgba(91,141,239,.12); }
.sanbou-inrow { display: flex; gap: 8px; padding: 10px 16px 14px;
  border-top: 1px solid var(--line); }
.sanbou-input { flex: 1 1 auto; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px;
  font-size: 13px; font-family: inherit; }
.sanbou-send { border: none; background: var(--accent); color: #fff; border-radius: 12px;
  padding: 0 16px; font-size: 15px; cursor: pointer; }
body.theme-light .sanbou-card { background: #fff; border-color: rgba(47,95,196,.35); }
body.theme-light .sanbou-ctx { background: rgba(47,95,196,.06); }
body.theme-light .sanbou-ctx-head, body.theme-light .sanbou-chip { color: #2f5fc4; }

/* 予定カードの面談資料リンク（2026-08-16「予定が入ったら資料を裏で作っておく」） */
.kanban-doc { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; color: #a9c8ff; text-decoration: none;
  border: 1px solid rgba(120,160,255,.4); background: rgba(91,141,239,.08); }
.kanban-doc:hover { background: rgba(91,141,239,.16); }
body.theme-light .kanban-doc { color: #2f5fc4; }

/* カンペ／渡す資料の2枚組（2026-08-16） */
.kanban-docs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ── AI参謀の声・1週間後バンド（2026-08-16 演出④⑤）── */
.sanbou-voice { margin-left: auto; background: none; border: 1px solid var(--line-strong);
  border-radius: 999px; color: var(--text-2); font-size: 13px; padding: 2px 10px; cursor: pointer; }
.sanbou-close { margin-left: 8px; }
.future-band { position: fixed; left: 0; right: 0; top: 0; z-index: 9500;
  display: flex; align-items: center; gap: 16px; justify-content: center;
  padding: 9px 16px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(90deg, #0e3b2e, #14532d); color: #a7f3d0;
  border-bottom: 1px solid rgba(53,185,138,.5); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.future-back { border: 1px solid rgba(167,243,208,.5); background: transparent; color: #a7f3d0;
  border-radius: 999px; padding: 4px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
body.is-future { padding-top: 40px; }
body.is-future .demoband { top: 40px; }


/* ==========================================================================
   2026-08-19 オーナー指示の修正（この節がいちばん後ろ＝ここが最終の見た目）
   1) 会社健全度を主役にする  2) ヘッダーを太く・角を立てる
   3) 読み上げボタンを主役に  4) パネル見出しを中央・大きく
   旧版は archive/2026-08-19_before-redesign/ に保存済み
   ========================================================================== */

/* ---- 1) 会社健全度 ---------------------------------------------------- */
/* ラベルを大きく（一番大事なので見出しとして読ませる） */
body.has-demoband .gate-label {
  font-size: 22px; letter-spacing: .16em; color: var(--text);
  font-weight: 800; align-self: center;
}
/* 68 と /100 の格を合わせる（100だけ極端に小さいのをやめる） */
body.has-demoband .gate-num { font-size: 64px; }
body.has-demoband .gate-max {
  font-size: 31px; font-weight: 700; color: var(--text-2);
  align-self: center; padding-bottom: 0; margin-top: 14px; letter-spacing: -.01em;
}
/* ゲージの白い縦線 ＝ 健全ライン80点。何の線か画面に書く */
body.has-demoband .gate-track { overflow: visible; }
.hb-tick-label {
  position: absolute; left: 80%; top: -20px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.72); white-space: nowrap; pointer-events: none;
}
body.has-demoband .gate-band { padding-top: 26px; }   /* ラベルのぶん上を空ける */

/* ---- 2) ヘッダー ------------------------------------------------------ */
/* 高さを約2.5倍に。角を立て、立体感（上ハイライト＋下の影）を強める */
.topbar {
  padding: 26px 26px 22px !important;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.55);
}
.topbar .wordmark { font-size: 31px; }
/* 信号チップ（要対応/注意/正常）を大きく・四角く・立体に */
.sigsum .sig, .sigsum > span, .sigchip {
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 10px rgba(0,0,0,.45);
}
/* 要対応はチップごと赤く塗る（数字だけ赤 → 面で赤へ） */
.sigsum .sig-warn, .sigsum .warn, .sigchip.warn {
  background: rgba(229,72,77,.20) !important;
  border: 1px solid rgba(229,72,77,.65) !important;
  color: #ffd9da !important;
}
.sigsum .sig-caution, .sigsum .caution, .sigchip.caution {
  background: rgba(224,164,74,.14) !important;
  border: 1px solid rgba(224,164,74,.5) !important;
}

/* ---- 3) 読み上げ ------------------------------------------------------ */
/* 既定では文を出さない。押して初めて出す */
.headline.headline-quiet .headline-text { display: none; }
.headline.headline-quiet::before { content: ""; margin: 0; }
.headline { margin-top: 14px; font-size: 15px; line-height: 1.7; }
/* 秘書の読み上げボタン。押す場所を大きく */
.speak-btn {
  margin-left: 0 !important;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px !important; font-weight: 700; letter-spacing: .04em;
  color: var(--text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 6px !important;
  padding: 14px 26px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(0,0,0,.5);
}
.speak-btn:hover { border-color: var(--accent) !important; }
.speak-btn:active { transform: translateY(1px); }

/* ---- 4) パネル見出し（今日の3手 / 今日の予定 / 要返信 ほか） ---------- */
.panel h2 {
  font-size: 22px !important; font-weight: 800;
  justify-content: center !important; text-align: center;
  letter-spacing: .06em; margin-bottom: 14px !important;
}
.panel h2 .panel-title { text-align: center; }
/* 見出し右の件数バッジは中央寄せの邪魔になるので、見出しの下段へ回す */
.panel h2 .count, .panel h2 .badge { opacity: .8; }


/* ==========================================================================
   2026-08-19 追補: 秘書アナウンス（オーナー指示）
   - 見出しの文は画面に出さない。押して初めて「全文」を折り返して出す
   - ボタンは大きく・3Dに（押せる場所だと一目で分かる面積にする）
   ========================================================================== */

/* 押すまで文は出さない（compact時の省略も無効化して、出すときは全文） */
.headline.headline-quiet .headline-text { display: none !important; }
body.compact .headline-text {
  max-width: none !important; white-space: normal !important;
  overflow: visible !important; text-overflow: clip !important; display: inline !important;
}
.headline { font-size: 15px; line-height: 1.85; }

/* 3Dの大型ボタン */
.speak-btn {
  margin-left: 0 !important;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 22px !important; font-weight: 800 !important; letter-spacing: .06em;
  color: #fff !important;
  padding: 22px 46px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #4a5570 0%, #2b3346 52%, #1b2130 100%) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-bottom: 4px solid rgba(0,0,0,.75) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.32),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 10px 0 rgba(0,0,0,.35),
    0 16px 30px rgba(0,0,0,.6) !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.speak-btn:hover {
  background: linear-gradient(180deg, #55618044 0%, #333c52 52%, #212838 100%) !important;
  border-color: rgba(255,255,255,.45) !important;
}
/* 押し込み: 実際に沈む */
.speak-btn:active {
  transform: translateY(6px);
  border-bottom-width: 2px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -1px 4px rgba(0,0,0,.5),
    0 3px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.55) !important;
}
/* 読み上げ中は赤く光らせる（今しゃべっている、が分かる） */
.speak-btn.is-speaking {
  background: linear-gradient(180deg, #a3313a 0%, #7d2028 52%, #5a1319 100%) !important;
  border-color: rgba(255,180,180,.5) !important;
}
@media (max-width: 900px) {
  .speak-btn { font-size: 18px !important; padding: 18px 28px !important; width: 100%; justify-content: center; }
}


/* ==========================================================================
   2026-08-19 追補2: 重厚感（オーナー指示）
   1) COMMAND HUB のワードマークを約2倍に
   2) 信号チップ（要対応/注意/正常）を3Dの押しボタンに。影で立体感を出す
   3) 数字（3・9・7）を大きく
   方針: 遊びは足さない。立体は「押せる」「重い」を伝えるためだけに使う
   ========================================================================== */

/* ---- 1) ワードマーク（約2倍） ---- */
.wordmark,
body.compact .wordmark {
  font-size: 64px !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
  line-height: 1.05;
  margin-bottom: 2px !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.22),
    0 3px 0 rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.65);
}

/* ---- 2) 信号チップを3Dの押しボタンに ---- */
.sigsum { gap: 16px !important; align-items: stretch; }
.sig {
  display: inline-flex !important; align-items: center; gap: 12px !important;
  padding: 16px 26px !important;
  border-radius: 6px !important;
  font-size: 18px !important; font-weight: 800 !important; letter-spacing: .05em;
  background: linear-gradient(180deg, #3c4560 0%, #262d3e 55%, #171c28 100%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-bottom: 4px solid rgba(0,0,0,.7) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.26),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 8px 0 rgba(0,0,0,.32),
    0 14px 26px rgba(0,0,0,.55) !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.sig:active {
  transform: translateY(5px);
  border-bottom-width: 2px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -1px 4px rgba(0,0,0,.5),
    0 3px 0 rgba(0,0,0,.32),
    0 6px 12px rgba(0,0,0,.5) !important;
}
/* 要対応＝面ごと赤。いちばん重く見せる */
.sig-warn {
  background: linear-gradient(180deg, #b03840 0%, #85222b 55%, #5d141a 100%) !important;
  border-color: rgba(255,190,190,.45) !important;
  border-bottom-color: rgba(60,8,12,.9) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.30),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 8px 0 rgba(46,6,9,.55),
    0 16px 30px rgba(180,30,40,.28) !important;
}
.sig-caution {
  background: linear-gradient(180deg, #8a6a2c 0%, #6a4f1d 55%, #4a3612 100%) !important;
  border-color: rgba(255,225,170,.38) !important;
}
.sig-ok {
  background: linear-gradient(180deg, #2c5f47 0%, #1f4534 55%, #143024 100%) !important;
  border-color: rgba(180,255,215,.30) !important;
}

/* ---- 3) 数字を大きく ---- */
.sig-n {
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace !important;
  font-size: 46px !important; font-weight: 700 !important;
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.sig-warn    .sig-n { color: #ff9aa0 !important; text-shadow: 0 0 22px rgba(255,90,100,.65), 0 2px 3px rgba(0,0,0,.7); }
.sig-caution .sig-n { color: #ffd591 !important; text-shadow: 0 0 20px rgba(224,164,74,.55), 0 2px 3px rgba(0,0,0,.7); }
.sig-ok      .sig-n { color: #93e7bd !important; text-shadow: 0 0 18px rgba(53,160,111,.5), 0 2px 3px rgba(0,0,0,.7); }
/* ラベル（要対応/注意/正常）は数字の脇役に */
.sig > span:last-child { font-size: 18px; opacity: .92; }
.sig-dot { width: 12px !important; height: 12px !important; }

@media (max-width: 1100px) {
  .wordmark, body.compact .wordmark { font-size: 46px !important; }
  .sig { padding: 12px 18px !important; }
  .sig-n { font-size: 31px !important; }
}


/* ==========================================================================
   2026-08-19 追補3: 健全度の内訳（オーナー指示）
   「字が小さい・多い」→ 既定は見出しとバーだけ。数字は開いたときに出す。
   バーに健全ライン80の目盛りと「あと◯点」を置き、差をグラフで見せる
   ========================================================================== */
.tree-card { padding: 30px 34px !important; max-width: 1180px; }
.tree-card .minutes-badge { font-size: 22px !important; font-weight: 800 !important; letter-spacing: .04em; }
.tree-branches { gap: 16px !important; }
.tree-branch {
  padding: 24px 26px !important; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.5);
}
.tb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.tb-name { font-size: 22px !important; font-weight: 800 !important; letter-spacing: .04em; }
.tb-score {
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace;
  font-size: 46px !important; font-weight: 700 !important; line-height: 1; letter-spacing: -.03em;
}
.tb-warn    .tb-score { color: #ff9aa0; text-shadow: 0 0 20px rgba(255,90,100,.5); }
.tb-caution .tb-score { color: #ffd591; text-shadow: 0 0 18px rgba(224,164,74,.45); }
.tb-ok      .tb-score { color: #93e7bd; text-shadow: 0 0 16px rgba(53,160,111,.45); }

/* バー: 太く。80の目盛りと「あと◯点」を置く */
.tb-bar {
  position: relative; height: 20px !important; border-radius: 12px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8); overflow: visible !important;
  margin-bottom: 10px;
}
.tb-fill { height: 100%; border-radius: 12px; }
.tb-goal {
  position: absolute; left: 80%; top: -6px; bottom: -6px; width: 2px;
  background: rgba(255,255,255,.7);
}
.tb-goal::after {
  content: "80"; position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65);
}
.tb-gap {
  position: absolute; top: 26px; transform: translateX(6px);
  font-size: 13px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}

/* 詳細は畳む */
.tb-detail { display: none; margin-top: 22px; }
.tree-branch.tb-open .tb-detail { display: block; }
.tb-row { font-size: 15px !important; line-height: 1.9; color: var(--text-2); }
.tb-move { font-size: 15px !important; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.16); }
.tb-toggle {
  margin-top: 18px; background: rgba(255,255,255,.06); color: var(--text-2);
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 9px 18px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.tb-toggle:hover { color: var(--text); border-color: var(--accent); }

/* 出典は「型の出典」だけ表示（本文はツールチップへ） */
.tree-note { font-size: 13px !important; opacity: .5; cursor: help; margin-top: 18px !important; }


/* ==========================================================================
   2026-08-19 追補4: ヘッダーの整理（オーナー指示）
   - 秘書アナウンスは小さくして COMMAND HUB と同じ行の右へ
   - 日付・最終更新も同じ行へ寄せる
   - ヘッダーと健全度バンドの隙間を詰める
   - 「今日の消化」を立体的に（ゲーミフィケーション: 進むと光る）
   - ナイトモード（🌓）を約2倍に
   ========================================================================== */

/* ---- ヘッダーを1行に畳む ---- */
.topbar { padding: 18px 26px 14px !important; margin-bottom: 8px !important; }
.topbar > .stamp-date { align-self: center !important; font-size: 15px; }
.headline.headline-inline {
  order: 99; margin-top: 0 !important; margin-left: auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* 秘書アナウンス: 主張は残しつつ小型化 */
.speak-btn {
  font-size: 15px !important; font-weight: 800 !important;
  padding: 11px 20px !important; border-radius: 6px !important;
  border-bottom-width: 3px !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -2px 5px rgba(0,0,0,.5),
    0 5px 0 rgba(0,0,0,.32),
    0 9px 18px rgba(0,0,0,.5) !important;
}
.speak-btn:active { transform: translateY(3px); }
/* 押して出る全文は、ヘッダーの下いっぱいに回り込ませる */
.headline .headline-text {
  flex: 1 1 100%; order: 2; font-size: 15px; line-height: 1.8; color: var(--text-2);
  padding-top: 8px;
}
/* 健全度バンドとの隙間を詰める */
body.has-demoband .gate-band { margin-top: 6px !important; }

/* ---- ナイトモードを約2倍に ---- */
.theme-btn {
  font-size: 31px !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.3)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-bottom: 3px solid rgba(0,0,0,.7) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 5px 0 rgba(0,0,0,.3), 0 9px 18px rgba(0,0,0,.5) !important;
}
.theme-btn:active { transform: translateY(3px); border-bottom-width: 1px !important; }

/* ---- 今日の消化: 立体＋ゲーミフィケーション ---- */
.globalgauge, .gg {
  display: inline-flex !important; align-items: center; gap: 12px;
  padding: 12px 22px !important; border-radius: 6px !important;
  background: linear-gradient(180deg, #33405e 0%, #212a3d 55%, #141a27 100%) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-bottom: 4px solid rgba(0,0,0,.7) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.24),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 7px 0 rgba(0,0,0,.3),
    0 12px 24px rgba(0,0,0,.55) !important;
}
.gg-label { font-size: 15px !important; font-weight: 800 !important; letter-spacing: .06em; }
.gg-track {
  position: relative; width: 190px !important; height: 16px !important; border-radius: 6px;
  background: rgba(0,0,0,.65) !important;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9);
  overflow: hidden;
}
/* 目盛り（4分割）＝どこまで来たかを段で見せる */
.gg-track::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(25% - 2px),
    rgba(255,255,255,.22) calc(25% - 2px), rgba(255,255,255,.22) 25%);
  pointer-events: none;
}
.gg-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(180deg, #7fe3b0, #35a06f) !important;
  box-shadow: 0 0 14px rgba(53,160,111,.7), inset 0 1px 0 rgba(255,255,255,.4);
  transition: width .35s cubic-bezier(.2,.8,.3,1);
}
/* 全部終わると金色に光る（達成の演出。ここだけ祝う） */
.gg-fill.full {
  background: linear-gradient(180deg, #ffe08a, #e0a44a) !important;
  box-shadow: 0 0 22px rgba(224,164,74,.9), inset 0 1px 0 rgba(255,255,255,.6);
}
.gg-num {
  font-family: "SFMono-Regular", Consolas, ui-monospace, monospace !important;
  font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);
}


/* ==========================================================================
   2026-08-19 追補5: ヘッダーを左へ寄せる（オーナー指示）
   左の余白を削り、右上に「秘書アナウンス＋日付・最終更新」の塊を置く。
   1行に収めるため、今日の消化のバーを短くし、要素の間隔を詰めた。
   ========================================================================== */
.topbar {
  padding-left: 10px !important; padding-right: 12px !important;
  column-gap: 12px !important;
  align-items: center !important;
}
.wordmark, body.compact .wordmark {
  text-indent: 0 !important; margin-left: 0 !important;
  letter-spacing: .10em !important;
}
.brandblock { margin-left: 0 !important; padding-left: 0 !important; }

/* 右上の塊: 秘書アナウンス → 日付・最終更新 の順で右端に固定 */
.headline.headline-inline { order: 90; margin-left: auto !important; }
.topbar > .stamp-date {
  order: 91; margin-left: 12px !important; text-align: right;
  font-size: 15px; line-height: 1.5; white-space: nowrap;
}

/* 1行に収めるための圧縮 */
.sigsum { gap: 8px !important; }
.sig { padding: 13px 18px !important; gap: 8px !important; }
.sig-n { font-size: 31px !important; }
.sig > span:last-child { font-size: 15px; }
.gg { padding: 10px 16px !important; gap: 8px !important; }
.gg-track { width: 120px !important; }
.gg-num { font-size: 18px !important; }
.gg-label { font-size: 13px !important; }
.theme-btn { font-size: 22px !important; padding: 8px 12px !important; }


/* ==========================================================================
   2026-08-19 追補6: 日付・最終更新を右上の塊に入れる
   縦2段にして幅を詰め、秘書アナウンスの右隣に固定する
   ========================================================================== */
.topbar > .stamp-date {
  order: 92 !important;
  flex: 0 0 auto !important; width: auto !important;
  display: flex !important; flex-direction: column; align-items: flex-end;
  gap: 4px; margin-left: 14px !important;
  font-size: 13px !important; line-height: 1.35; white-space: nowrap;
}
.topbar > .stamp-date .dow { font-size: 13px; opacity: .8; }
/* 1行に収める最後の圧縮 */
.gg-track { width: 92px !important; }
.gg-label { font-size: 13px !important; letter-spacing: .04em; }
.gg { padding: 9px 13px !important; }
.sig { padding: 12px 15px !important; }
.sig-n { font-size: 31px !important; }
.wordmark, body.compact .wordmark { font-size: 46px !important; }
.speak-btn { font-size: 15px !important; padding: 10px 16px !important; }


/* ==========================================================================
   2026-08-19 追補7: 並びのミニコックピット窓
   ヘッダーの「並び:」ボタンで開く。4つの並びを縮図で見比べて、押した瞬間に入れ替わる
   ========================================================================== */
.ordwin-back{position:fixed;inset:0;background:rgba(4,6,10,.78);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:30px;}
.ordwin{width:min(1420px,96vw);max-height:92vh;overflow:auto;background:#0f131b;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:26px 30px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.75);}
.ordwin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ordwin-title{font-size:22px;font-weight:800;letter-spacing:.04em;}
.ordwin-x{font-family:inherit;font-size:13px;color:var(--text-2);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:9px 16px;cursor:pointer;}
.ordwin-x:hover{color:var(--text);}
.ordwin-sub{font-size:13px;color:var(--muted);margin-bottom:20px;}
.ordwin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1200px){ .ordwin-grid{grid-template-columns:repeat(2,1fr);} }

.ordcard{font-family:inherit;text-align:left;cursor:pointer;color:var(--text);
  background:linear-gradient(180deg,#1a2030,#11151d);
  border:1px solid rgba(255,255,255,.13);border-bottom:3px solid rgba(0,0,0,.6);
  border-radius:12px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.5);
  transition:border-color .15s, transform .08s;}
.ordcard:hover{border-color:#4c7df0;}
.ordcard:active{transform:translateY(2px);}
.ordcard.is-current{border-color:#35a06f;box-shadow:0 0 0 2px rgba(53,160,111,.45),0 8px 20px rgba(0,0,0,.5);}
.ordcard-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ordcard-name{font-size:15px;font-weight:800;}
.ordcard-now{font-size:11px;font-weight:800;color:#93e7bd;background:rgba(53,160,111,.18);
  border-radius:999px;padding:3px 9px;white-space:nowrap;}
.ordcard-why{font-size:13px;color:var(--muted);line-height:1.6;min-height:34px;}
.ordcard-src{font-size:11px;color:#59melt;color:#5a6376;line-height:1.55;}

/* 縮図（ミニコックピット） */
.mini{background:#070a10;border:1px solid rgba(255,255,255,.08);border-radius:6px;
  padding:8px;display:flex;flex-direction:column;gap:4px;}
.mini-gate{height:16px;border-radius:6px;
  background:linear-gradient(90deg,#3a5fa8 0%,#3a5fa8 68%,rgba(255,255,255,.10) 68%,rgba(255,255,255,.10) 100%);}
.mini-row{display:flex;align-items:center;gap:4px;height:19px;border-radius:6px;padding:0 6px;
  background:rgba(255,255,255,.05);border-left:3px solid rgba(255,255,255,.2);}
.mini-row.mini-top{height:25px;background:rgba(255,255,255,.10);}
.mini-n{font-family:"SFMono-Regular",Consolas,ui-monospace,monospace;font-size:11px;color:#6b7488;width:10px;}
.mini-t{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-row.mini-top .mini-t{font-size:13px;}
.mz-time{border-left-color:#4c7df0;}
.mz-ops{border-left-color:#e0a44a;}
.mz-money{border-left-color:#35a06f;}
.mz-none{border-left-color:#4a5266;}
.mini-rest{font-size:11px;color:#5a6376;text-align:center;padding-top:2px;}

/* ヘッダーの並びボタン */
.order-btn{font-size:15px !important;font-weight:800 !important;padding:10px 14px !important;}


/* 並び窓カードの注釈（2026-08-19） */
.ordcard-notes{display:flex;flex-direction:column;gap:4px;margin-top:2px;}
.ordcard-note{display:flex;gap:8px;font-size:11px;line-height:1.6;}
.nt-k{flex:0 0 58px;font-weight:800;letter-spacing:.02em;}
.nt-v{flex:1;color:var(--text-2);}
.nt-who  .nt-k{color:#9bb6ff;}
.nt-eff  .nt-k{color:#93e7bd;}
.nt-risk .nt-k{color:#ffb4b8;}
.nt-risk .nt-v{color:#c9a3a6;}
.ordwin{width:min(1520px,97vw);}
.ordcard-why{min-height:0;}


/* ==========================================================================
   2026-08-19 追補8: 時間軸のゾーン見出しを出す
   「散らかって見える」の原因は、分類の見出しがデモで消されていたこと。
   朝いち／掘る／仕事終わり／振り返り の帯をはっきり出す
   ========================================================================== */
body.has-demoband .zone > h2,
body.has-demoband .zone-head { display: flex !important; }
.zone-head{
  display:flex; align-items:baseline; gap:12px;
  margin: 26px 0 12px; padding: 12px 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  border-left: 5px solid rgba(255,255,255,.3);
}
.zone-title{ font-size:22px !important; font-weight:800 !important; letter-spacing:.14em; }
.zone-note{ font-size:13px !important; color:var(--muted); }
.zone-count{ margin-left:auto; font-family:"SFMono-Regular",Consolas,ui-monospace,monospace;
  font-size:15px; color:var(--muted); }
.zone-morning .zone-head{ border-left-color:#4c7df0; }
.zone-morning .zone-title{ color:#9bb6ff; }
.zone-dig     .zone-head{ border-left-color:#e0a44a; }
.zone-dig     .zone-title{ color:#ffd591; }
.zone-closing .zone-head{ border-left-color:#a78bfa; }
.zone-closing .zone-title{ color:#c9b8ff; }
.zone-review  .zone-head{ border-left-color:#35a06f; }
.zone-review  .zone-title{ color:#93e7bd; }


/* ==========================================================================
   2026-08-19 追補9: 静かな日は静かに（UI要件Bの実装）
   「1画面で全部見たい」と「認知負荷が高い」は両立できる。
   減らすのではなく、正常なものを沈めて、判断が要るものだけを前に出す。
   ＝ 全部そこにあるが、目に入るのは赤と黄だけ。全部緑の日は画面が静かになる。
   ========================================================================== */

/* --- 正常（ok）は沈める --------------------------------------------- */
.metric.ok, .metric.tile.ok,
li.ok, .item.ok, .row.ok {
  opacity: .52;
  filter: saturate(.6);
  transition: opacity .18s, filter .18s;
}
.metric.ok .value, .metric.tile.ok .value { color: var(--text-2) !important; text-shadow: none !important; }
.metric.tile.ok { border-top-color: rgba(53,160,111,.35) !important; box-shadow: none !important; }
.metric.ok .label::before, .metric.tile.ok .label::before { opacity: .5; }
/* 触れば戻る（沈めても読めなくはしない） */
.metric.ok:hover, .metric.tile.ok:hover, li.ok:hover { opacity: 1; filter: none; }

/* --- 注意（caution）は中間 ------------------------------------------ */
.metric.caution, .metric.tile.caution { opacity: .88; }

/* --- 要対応（warn）だけ前に出す ------------------------------------- */
.metric.warn, .metric.tile.warn {
  opacity: 1 !important; filter: none !important;
  box-shadow: 0 0 0 1px rgba(229,72,77,.35), 0 8px 22px rgba(229,72,77,.16) !important;
}
.metric.warn .value, .metric.tile.warn .value {
  text-shadow: 0 0 18px rgba(229,72,77,.45);
}

/* --- パネル単位: 中に赤が無いパネルは見出しごと沈める --------------- */
.panel:not(:has(.warn)):not(:has(.caution)) > h2 { opacity: .6; }
.panel:not(:has(.warn)):not(:has(.caution)) { opacity: .82; }
.panel:hover { opacity: 1 !important; }
.panel:has(.warn) > h2 { opacity: 1; }
.panel:has(.warn) { box-shadow: 0 0 0 1px rgba(229,72,77,.22), 0 10px 26px rgba(0,0,0,.5); }

/* --- 注記は常に沈める（読む必要がない文） --------------------------- */
.panel .note, .panel .foot, .panel small { opacity: .45; font-size: 11px !important; }

/* --- 空のカンバン列（0件）は出さない -------------------------------- */
.kanban-col.is-zero { display: none; }


/* ==========================================================================
   2026-08-19 追補10: 接続ロゴ帯（ヘッダーの下・横一列）
   数字の出どころを一目で伝える。詳細は設定ページへ。
   ========================================================================== */
.connbar{
  display:flex; align-items:center; gap:16px;
  margin: 6px 0 10px; padding: 10px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.4);
}
.connbar-label{
  font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--muted);
  white-space:nowrap; flex:0 0 auto;
}
.connbar-strip{
  display:flex; align-items:center; gap:8px; flex:1 1 auto;
  overflow-x:auto; scrollbar-width:none;
}
.connbar-strip::-webkit-scrollbar{ display:none; }
.connchip{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:7px 12px; border-radius:6px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}
.connchip-img{ width:18px; height:18px; object-fit:contain; border-radius:6px; }
.connchip-txt{
  width:18px; height:18px; border-radius:6px; background:rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--text-2);
}
.connchip-name{ font-size:13px; font-weight:600; color:var(--text-2); }
.connbar-more{
  flex:0 0 auto; font-family:inherit; cursor:pointer;
  font-size:13px; font-weight:800; color:var(--text-2);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:6px; padding:8px 14px; white-space:nowrap;
}
.connbar-more:hover{ color:var(--text); border-color:var(--accent); }
/* 撮影時（社長レイヤー）は畳んで邪魔にしない */
body.layer-exec .connbar{ padding:6px 12px; }
body.layer-exec .connchip-name{ display:none; }
@media (max-width:900px){ .connchip-name{ display:none; } }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補11: オーナー指示2点
   ① 「最終更新」を独立した行から、右上の日付の真下へ入れ込む
      （いまは見出しの外に取り残されて、1行まるごと使っていた）
   ② つながっているサービスのロゴを3倍にする（18px → 54px）
      チップの左右余白は据え置きなので、15個でも横1行に収まる
   戻すとき: この追補11ブロックを丸ごと消す
   ══════════════════════════════════════════════════════════ */

/* ① 最終更新を日付の下に積んで、右上の1かたまりにする */
.topbar > .headright {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
  margin-top: -14px;
}

/* ② ロゴ3倍。画像・2文字フォールバックの両方を同じ大きさに揃える */
.connbar .connchip .connchip-img,
.connbar .connchip .connchip-txt {
  width: 54px;
  height: 54px;
  border-radius: 6px;
}
.connbar .connchip .connchip-txt { font-size: 15px; }
.connbar .connchip { padding: 8px 10px; gap: 8px; }
.connbar .connchip .connchip-name { font-size: 13px; }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補12: オーナー指示（ヘッダーと表示崩れ）
   ① ロゴ帯は「ロゴだけ」にする。ラベルもサービス名も出さない
   ② ロゴをさらに大きく（元18px → 72px）。名前を消して空いた幅を使う
   ③ 横スクロールをやめる。入りきらないときは折り返して1画面に収める
   ④ 「最終更新」の行を消して、その分ヘッダーの余白を詰める
   ⑤ 0件のかんばん列を再表示する（Trello風の3列に戻す）
      ※ 3146行の .kanban-col.is-zero{display:none} を打ち消している
   戻すとき: この追補12ブロックを丸ごと消す
   ══════════════════════════════════════════════════════════ */

/* ①② ロゴだけ・大きく */
.connbar-label { display: none; }
.connbar .connchip .connchip-name { display: none; }
.connbar .connchip {
  padding: 6px;
  gap: 0;
  background: transparent;
  border-color: rgba(255, 255, 255, .08);
}
.connbar .connchip .connchip-img,
.connbar .connchip .connchip-txt {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.connbar .connchip .connchip-txt { font-size: 15px; }

/* ③ はみ出さない。足りなければ折り返す */
.connbar-strip {
  overflow-x: visible;
  flex-wrap: wrap;
  gap: 8px;
}
.connbar { padding-top: 8px; padding-bottom: 8px; }

/* ④ 最終更新を消して、ヘッダーの余白を詰める */
.topbar > .headright { display: none; }
.topbar {
  padding-bottom: 16px;
  margin-bottom: 20px;
}

/* ⑤ 0件の列も出す。中身が無い列は細いまま（縦書きラベル）で並ぶので
      「To Do / 着手中 / 完了」の3列があることが見て分かる */
.kanban-col.is-zero { display: flex; }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補13: 「見出しだけで意味が伝わる」3枚を横一本の帯にする
   健全度バーの直下に、畳んだ1行で並ぶ。中身は開いたときだけ出す。
   狭い列に押し込むと見出しが折り返して読めなくなるため、行を独占させる
   ══════════════════════════════════════════════════════════ */
/* 2162行で body.has-demoband.layer-exec .zone-grid が flex に上書きされ、
   さらに 2163行で全パネルが flex:1 1 0 になる。ここより後で、この3枚だけ
   行を独占させる（!important が要るのはその上書きに勝つため） */
body .zone-grid > .panel[data-pid="agent_log"],
body .zone-grid > .panel[data-pid="score_trend"],
body .zone-grid > .panel[data-pid="impact_log"] {
  grid-column: 1 / -1;
  flex: 1 0 100% !important;
  width: 100%;
  max-width: 100%;
}
/* 畳んでいるときは見出しを1行に収め、要約を右端に寄せる */
.panel[data-pid="agent_log"].folded > h2,
.panel[data-pid="score_trend"].folded > h2,
.panel[data-pid="impact_log"].folded > h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
}
.panel[data-pid="agent_log"].folded .panel-sum,
.panel[data-pid="score_trend"].folded .panel-sum,
.panel[data-pid="impact_log"].folded .panel-sum {
  margin-left: auto;
  font-size: 15px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補14: 帯パネルが横一列に並んで画面外へ出る不具合の修正
   2162行で .zone-grid が display:flex に上書きされているが折り返し指定が無く、
   幅100%の帯を3枚置くと1行に押し込まれ、2枚目以降が画面外（x=1904, x=3765）
   へ出ていた。見た目には「パネルが重なる」「文字がダブる」として現れる。
   ══════════════════════════════════════════════════════════ */
body .zone-grid { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補15: 朝いちの「証明系」3枚を1行にまとめる
   消さずに階層へ落とす（情報は残す・同時に見えるものだけ減らす）
   戻すとき: このブロックと index.html の summary-bar.js を消す
   ══════════════════════════════════════════════════════════ */
.morning-summary {
  flex: 1 0 100%;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
}
.morning-summary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.morning-summary .ms-title { font-size: 15px; font-weight: 700; color: var(--text); }
.morning-summary .ms-body  { margin-left: auto; font-size: 15px; color: var(--text-2); }
.morning-summary .ms-caret { color: var(--muted); font-size: 13px; }
.morning-summary.is-open   { background: var(--surface-2); }
.panel.is-tucked { display: none !important; }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補16: 帯パネルの見出しで文字が重なるのを構造的に防ぐ
   nowrap のままだと幅が足りないとき文字同士が重なる。
   タイトルは縮んでよい（min-width:0・あふれたら「…」）、要約は縮まない。
   ══════════════════════════════════════════════════════════ */
.panel[data-pid="agent_log"].folded > h2,
.panel[data-pid="score_trend"].folded > h2,
.panel[data-pid="impact_log"].folded > h2 { min-width: 0; }
.panel[data-pid="agent_log"].folded .panel-title,
.panel[data-pid="score_trend"].folded .panel-title,
.panel[data-pid="impact_log"].folded .panel-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel[data-pid="agent_log"].folded .panel-sum,
.panel[data-pid="score_trend"].folded .panel-sum,
.panel[data-pid="impact_log"].folded .panel-sum { flex: 0 0 auto; white-space: nowrap; }
.morning-summary .ms-title { flex: 0 0 auto; }
.morning-summary .ms-body  { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補17: 畳んだ帯の見出しを「縦積み」にする
   タイトルと要約を横に並べると、幅が足りないとき必ずぶつかる。
   上下に積めば幅に関係なく衝突しない。▸ は右端に固定する。
   （追補13の横並び指定を、ここで打ち消している）
   ══════════════════════════════════════════════════════════ */
.panel[data-pid="agent_log"].folded > h2,
.panel[data-pid="score_trend"].folded > h2,
.panel[data-pid="impact_log"].folded > h2,
.panel[data-pid="ai_candidates"].folded > h2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  white-space: normal !important;
  position: relative;
  padding-right: 30px;
}
.panel[data-pid="agent_log"].folded .panel-title,
.panel[data-pid="score_trend"].folded .panel-title,
.panel[data-pid="impact_log"].folded .panel-title,
.panel[data-pid="ai_candidates"].folded .panel-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.panel[data-pid="agent_log"].folded .panel-sum,
.panel[data-pid="score_trend"].folded .panel-sum,
.panel[data-pid="impact_log"].folded .panel-sum,
.panel[data-pid="ai_candidates"].folded .panel-sum {
  margin-left: 0 !important;
  white-space: normal !important;
  font-size: 15px;
  color: var(--text);
}
.panel[data-pid="agent_log"].folded .panel-caret,
.panel[data-pid="score_trend"].folded .panel-caret,
.panel[data-pid="impact_log"].folded .panel-caret,
.panel[data-pid="ai_candidates"].folded .panel-caret {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
}

/* 「今朝のまとめ」も同じ組み方に揃える */
.morning-summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  position: relative;
  padding-right: 30px;
}
.morning-summary .ms-body {
  margin-left: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: var(--text);
}
.morning-summary .ms-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補18: 「AIに渡せる仕事」から入力ページへの導線
   ══════════════════════════════════════════════════════════ */
.wt-link {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.wt-link:hover { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   2026-08-20 追補19: 「開き方」ボタン
   いまどちらの状態かを文字で言う（アイコンだけにしない＝説明書を要らなくする）
   ══════════════════════════════════════════════════════════ */
.keepopen-btn {
  margin-left: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.keepopen-btn:hover { color: var(--text); }
.keepopen-btn.is-custom { color: var(--text); border-color: var(--accent); }