/* ORBIT（d023）— 白いカード × ロイヤルブルー。「明るいSaaS」
 *
 * 由来はユーザーが選んだ Pinterest のピン（Muzli / Task Management Dashboard）。
 * 読み取ったのは4つ: ①薄いグレーの地に白いカード ②左サイドバーで台帳を切替
 * ③KPIカードを表の上に4枚 ④ステータスは淡い色地のピル。
 *
 * 初版の「方眼紙×群青・有彩色1色」から全面転換した（指示）。
 * 色の役割だけはこちらで決めてある —— **色が付くのはステータスと反社チェックだけ**。
 * 全列に色を撒くと、警告（反社=未）が背景に沈む。
 */

:root {
  /* ★上の帯と表の左右の端を**同じ値**に（2026-09-11 指示「表と上のロゴとログアウトの端を合わせたい」）。
   * 帯は 2vw/20px、表は 3vw/26px と別々に書いていたので、広い画面で 6px ずれていた。
   * 揃える先は**表**。表のほうが毎日見るものなので、帯を表に合わせる */
  --gut: clamp(14px, 3vw, 26px);
  --bg: #f4f5f8;           /* 地。方眼はやめた（表の罫線と二重になっていた） */
  --panel: #ffffff;
  --ink: #1a1d23;
  --dim: #5b6472;          /* #fff 上で 6.9:1 */
  --line: #e5e8ee;         /* 器のふち（カード・釦・欄） */
  --rule: #f0f2f6;         /* 中の仕切り（行の下） */
  --rule-v: #edf0f5;       /* ★列の境目。**横線より一段弱く。** 目で追うのは行なので、
                              縦線まで同じ濃さだと方眼紙になって文字が沈む */
  /* ── NEXX の色（2026-09-11 指示 `#23c9e2`）────────────────────
   * ★**指定の色そのままでは白文字が乗らない**（#23c9e2 に白は 2.0:1）。
   *   明るい水色なので、**上に乗せるのは濃い文字**にする（7:1 取れる）。
   * ★文字やリンクとして使うときは、同じ色相を**読める濃さまで沈めた**ものを使う。
   *   どちらもセルフテスト18 が機械で確かめている */
  --brand: #23c9e2;        /* 指定色そのまま。面（釦の地・印・淡い地）に使う */
  --brand-ink: #04323a;    /* ブランド色の上に乗せる文字 */
  --accent: #0b7385;       /* 文字・リンク・枠。#23c9e2 と同じ色相を沈めたもの */
  --accent-soft: #e3f7fb;
  --warn: #8a5a00;
  --warn-bg: #fdf3d8;
  --danger: #a3231b;
  --ok: #166534;
  --ok-bg: #e3f5e9;
  --red: #a02020;
  --red-bg: #fde8e8;
  --gray-t: #4b5563;
  --gray-bg: #eef0f3;

  /* ── NEXX の色（2026-09-11 指示「nexxの色出して」）──────────────
   * 会社のロゴ（グラフィティ）から拾った2色。ミントとピンク。
   * ★**業務の表なので、そのままの濃さでは使わない。**
   *   台帳で色が意味を持つのはステータスと反社チェックだけで、
   *   そこにブランド色が同じ強さで乗ると、どれが警告か分からなくなる。
   *   ブランドは**地の色（1行おきの縞・ホバー・ロゴの印）**として敷く。 */
  --nexx-mint: #23c9e2;   /* 指定色に寄せた（もとはロゴのミント） */
  --nexx-pink: #ef7fae;
  /* ★**うんと薄く**（2026-09-11 指示）。1行おきの帯は「行の切れ目が分かる」だけでよく、
   * 色として見えてくると、ステータスや反社チェックの色と competing になる */
  --zebra: #f6fcfe;        /* 1行おきの地。ブランド色をごく薄めたもの */
  --hover: #e9f7fb;        /* さわっている行。縞より一段濃い */
  /* ── 文字（2026-09-11 指示「font」「統一してほしい」）──────────────
   * ★**英数字と日本語で別の顔を使う。** ヒラギノを先頭に置いていたので、
   *   数字と英字までヒラギノで出て、`2026/09/11` や `https://` が間延びしていた。
   *   英数字は端末の UI 書体（SF Pro / Segoe）、日本語はヒラギノ、の順で並べる。
   * ★**等幅（mono）をやめた。** 日付・点数・見出しのラベルに混ぜていたので、
   *   1つの表に3種類の書体が並んでいた。数字の桁を揃えたいだけなら
   *   `tabular-nums` で足りる（下の body で全体に効かせている）。 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: var(--sans);     /* 旧称。**同じ書体に寄せてある**（一度に消すと差分が読めないため） */

  /* ── 形（角丸・影・線）─────────────────────────────────
   * ★3段だけにする。10 / 14 が混ざっていたのを、器の大きさで決める */
  --r: 14px;               /* カード・モーダル */
  --r-s: 9px;              /* 釦・欄・チップの器 */
  --shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 6px 20px rgba(20, 24, 40, .05);
  --shadow-lg: 0 24px 60px rgba(14, 20, 35, .22);
}

* { box-sizing: border-box; }

/* [d018] [hidden] は grid/flex の display に負けるので !important が要る */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  /* ★数字の幅を揃える。**表の列は数字が縦に並ぶ**ので、
   * これが無いと 1 の行だけ詰まって桁が揃わない（等幅書体を使っていた理由はこれだけだった） */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  /* iOS はこれ未満だと勝手に拡大する（d019） */
  font-size: 16px;
  color: inherit;
}

/* ── 実データの帯 ──────────────────────────────────────
 * DB の kind をそのまま出す。**帯があるスクショは発信に使わない。** */
#band {
  background: var(--danger); color: #fff;
  font: 600 12px/1 var(--mono); letter-spacing: .18em;
  text-align: center; padding: 7px 8px;
}

/* ── ログイン ───────────────────────────────────────── */
#gate { display: grid; place-items: center; min-height: 100svh; padding: 24px; }
.card {
  width: min(100%, 26rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 5vw, 2.25rem);
}
.logo {
  font: 800 20px/1 var(--sans);
  letter-spacing: .02em;
  color: var(--ink); margin: 0 0 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
/* ロゴの印。ピンのアプリアイコンに相当する青い角丸 */
/* ★印（角丸の四角）は外した（2026-09-11）。**本物のロゴが上に入った**ので、
 * その下の名前の横にもう1つ印を置くと、同じ役目のものが2つ並ぶ。
 * ログイン画面の見出しだけは、まだ印を持っている（あちらにロゴは置いていない） */
#gate .logo::before, #empty .logo::before {
  content: ""; display: block; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--nexx-pink));
}
.tag { margin: 0 0 22px; color: var(--dim); font-size: 13px; }
/* ログイン／はじめて使う の見出し。**いまどちらの画面にいるかを必ず出す** */
.gateh { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.back { display: block; margin-top: 16px; }
label { display: block; font: 600 12px/1.6 var(--sans); color: var(--dim); margin-top: 14px; }
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
  width: 100%; padding: 10px 11px; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s);
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--line); background: #fff; font-size: 14px;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn.primary:hover { color: var(--brand-ink); filter: brightness(1.04); }
.btn.primary:disabled { opacity: .45; cursor: default; }
.btn.wide { width: 100%; justify-content: center; margin-top: 18px; }
/* ★行を開いた先の「保存」は**小さくする**（2026-09-17 指示）。
 * 幅いっぱいの釦は「この画面でやることはこれ1つ」という意味になるが、
 * ここでやるのは**直すこと**で、保存はその後始末でしかない。
 * 器の幅を丸ごと使うと、**読む欄より保存のほうが大きく見える。**
 * （名刺の取り込み画面の釦は .pcol のままなので、こちらは変わらない） */
.ppane .btn.wide {
  width: auto; justify-content: flex-start;
  margin-top: 12px; padding: 7px 13px; font-size: 13px;
}
.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: 13px; }
.msg { margin-top: 12px; font-size: 13px; color: var(--danger); min-height: 1.2em; }
.msg.ok { color: var(--accent); }

/* ── 骨組み: 左サイドバー ＋ 右が本体（ピンの型） ─────────── */
/* ★骨組みは「**上に帯・下に本体**」（2026-09-11 指示）。
 * 左のサイドバーだったが、中身はロゴ・台帳名・マイページ・ログアウトの4つで、
 * そのために横 220px を常に使っていた。**表は横に長い**ので、その 220px は表に回す。
 * ★帯は上に貼り付く（sticky）。**どこまでスクロールしても出口に手が届く** */
#app { display: flex; flex-direction: column; min-height: 100svh; }

#side {
  flex: none;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gut);
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 30;
}
/* ★会社のロゴ（2026-09-11 指示）。**黒地ごと角丸で置く。**
 * 白と水色のグラデでできた字なので、背景を抜くと白い面では消える。
 * 幅はサイドバーいっぱい。高さは画像の比率まかせ（ここを固定すると字が潰れる） */
/* ★ロゴは**黒い地を敷かずに置く**（2026-09-11 指示）。
 * 元は白と水色のグラデなので、そのままでは白い面で消える ——
 * 明るさをそのまま「濃さ」に写した透過の版を作って、白地に濃い字で置いている
 * （黒い四角が画面の左上に1つだけ浮くのをやめるため）。 */
/* ★帯の中なので**高さで合わせる**（幅は画像の比率まかせ。固定すると字が潰れる） */
/* ★ロゴは**小さく**（2026-09-11 指示「Client DB の方を目立たせたい」）。
 * 会社の名前は毎日見るものではなく、**いまどの台帳にいるか**のほうが要る */
.brandmark { display: block; flex: 0 0 auto; width: auto; height: 20px; margin: 0; opacity: .85; }

/* 台帳の名前。**ロゴの下**（2026-09-11 指示） */
/* ★ロゴの下に来るので**小さく・薄く**（2026-09-11）。
 * ロゴが「どの会社か」を言っているので、ここは「その中のどの台帳か」だけを言う */
/* ★ロゴの下の台帳名（2026-09-11 指示「clientDBが目立たない」）。
 * 薄いグレーの小さい字だと、ロゴの添え物にしか見えなかった。
 * **ロゴと対等な見出し**として、濃く・大きくする */
#side .logo {
  margin: 0; font: 800 18px/1.3 var(--sans); color: var(--ink);
  letter-spacing: .01em; flex: 0 0 auto;
  /* ★**折り返させる。** 1行に収めると「NEXX クライアント…」で切れて、
   * 台帳の名前が読めなくなる（幅は 196px しかない） */
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
}
/* 表のカードは上の帯が無くなったぶん、少し上げる */
#viewTable .tablecard { margin-top: 14px; }
#side .cap {
  font: 600 10px/1 var(--sans); letter-spacing: .2em;
  color: var(--dim); margin: 0; flex: 0 0 auto;
}
#side nav { display: flex; gap: 4px; }
#side .wsitem { width: auto; }
/* 台帳の一覧。**選択中は青の丸角で反転**（ピンの Tasks の行そのまま） */
.wsitem {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; border-radius: 10px;
  padding: 9px 10px; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsitem:hover { background: var(--rule); }
.wsitem.active { background: var(--accent); color: #fff; }
.wsitem .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wsitem.active .dot { background: rgba(255, 255, 255, .7); }
.wsitem.demo .dot { background: var(--warn); }
/* 出口（マイページ・ログアウト）は**帯の右端にアイコンで**（2026-09-11 指示）。
 * 押す回数は少ないので、文字で置くと台帳の名前と同じ重さに見える */
.side-foot { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.side-foot .iconbtn { width: 32px; height: 32px; }

#main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ★畳むボタンは外した（2026-09-11）。**畳むと左の道具が全部押せなくなる。**
 * 以前に畳んだ人の印は app.js が消しているが、規則も残さない
 * （残しておくと、別の道で side-off が付いたときに左が消える） */

/* 議事録のリンク。**セルから直接開ける** */
.noteslink {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto;
  color: inherit; text-decoration: none; padding: 4px 6px; border-radius: 8px;
}
.noteslink:hover { background: var(--accent-soft); }
.noteslink:hover .what { color: var(--accent); text-decoration: underline; }
.noteslink .when {
  flex: 0 0 auto; font: 600 11px/1.6 var(--mono); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.noteslink .what { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notesmore {
  flex: 0 0 auto; border: 0; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; cursor: pointer; font: 600 11px/1.6 var(--mono); padding: 1px 7px;
}
td:has(.noteslink) > .rowbox { gap: 2px; }
.notelink { color: var(--accent); word-break: break-word; }

/* 名刺の有無。**「無」は薄く。** 22行のうち3行しか無いとき、
 * 同じ濃さで並ぶと「無」の壁のほうが目に入って、有る行が埋もれる */
.cardflag {
  display: inline-flex; align-items: center;
  border: 0; background: none; cursor: pointer; padding: 2px 6px;
  border-radius: 999px; font: 600 12px/1.6 var(--sans); color: var(--dim);
}
.cardflag.on { background: var(--accent-soft); color: var(--accent); font-family: var(--mono); }
.cardflag:hover { text-decoration: underline; }

/* ── 見出しと操作 ───────────────────────────────────── */
.page {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 18px var(--gut) 4px;
}
.page h1 { margin: 0; font-size: 21px; line-height: 1.3; }
.page .sub { margin: 0; color: var(--dim); font-size: 13px; }
.page .spacer { flex: 1 1 auto; }
#q { width: min(220px, 40vw); margin: 0; border-radius: 10px; background: var(--panel); }
#wsPick { width: auto; margin: 0; padding: 8px 10px; display: none; }  /* サイドバーがあるので普段は隠す */

/* ── 表のカード ─────────────────────────────────────── */
.tablecard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  margin: 14px var(--gut) 40px;
}
.bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px;
}
/* ★道具の帯（2026-09-11 指示「表の中に入れたい」）。
 * 表と同じ枠の中の一番上。**押すものが左、状態が右**（件数・ページ・そのほか） */
.tools { border-bottom: 1px solid var(--rule); }
.tools > * { flex: 0 0 auto; white-space: nowrap; }
/* ★帯に並ぶものは**高さを1つに決める**（2026-09-11 指示「デザイン整えてずれている」）。
 * 釦は padding、検索欄は文字の大きさ、アイコンは line-height で高さが決まっていたので、
 * 3つが 37 / 30 / 32px とばらばらに並んでいた。**器の高さを先に決めて、中身を中央に置く。** */
.tools .btn, .tools .qbox, .tools .overduebtn { height: 36px; }

/* ★期限切れの件数（2026-09-11 指示）。**押すとその行だけ出す。**
 * 0件のときは出さない —— 「0」が毎日そこにあると、数字そのものを見なくなる */
.overduebtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--red-bg); background: var(--red-bg); color: var(--red);
  border-radius: 999px; cursor: pointer; padding: 0 14px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.overduebtn:hover { border-color: var(--red); }
.overduebtn.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ★探すは**右端**（2026-09-11 指示）。虫眼鏡を中に入れて、打つ欄だと分かるようにする。
 * 釦と同じ白地・同じ枠で並べると、押すものか打つものか見分けが付かない */
.qbox {
  display: flex; align-items: center; gap: 6px;
  background: var(--rule); border-radius: var(--r-s); padding: 0 10px;
  /* ★**文字の大きさを自分で決める。** この器は label 要素なので、
   * 欄の見出し用の `label { font: 600 12px/1.6 }` が中の文字にまで効いていた */
  font: 400 13.5px/1.5 var(--sans); color: var(--ink);
  /* ★`margin: 0` を明示する（2026-09-11 に踏んだ）。**この器は label 要素**なので、
   * 欄の見出し用の `label { margin-top: 14px }` がそのまま当たり、
   * 検索欄だけ 7px 下にずれ（flex の中央揃えは margin ごと中心を出す）、
   * 帯の高さも 56 → 71px に伸びていた。**高さを揃えても位置は揃わない。** */
  margin: 0;
}
.qbox .qicon { flex: 0 0 auto; color: var(--dim); display: block; }
.qbox:focus-within .qicon { color: var(--accent); }
.qbox #q {
  width: min(150px, 20vw); height: 100%; margin: 0; border: 0; background: none;
  padding: 0; font: inherit;
}
.qbox #q::placeholder { color: var(--dim); opacity: .8; }
/* ★フォーカスの枠は**器の側だけ**に出す（2026-09-11 指示）。
 * 中の input にもブラウザ既定の枠が出るので、**角丸の違う枠が二重**に見えていた */
.qbox:focus-within { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--accent); }
.qbox #q:focus, .qbox #q:focus-visible { outline: none; }

/* ★押す回数の少ないものはアイコンだけ（2026-09-11 指示「書き出すもアイコンにして」）。
 * 文字で置くと「会社を追加」と同じ重さに見えるが、実際に押す回数はまったく違う。
 * ★**正方形**にする。幅が中身の文字数で変わると、2つ並べたときに揃わない */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-s);
  cursor: pointer; color: var(--dim); font-size: 16px; line-height: 1;
}
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
/* ★何かが効いている釦には小さな印（いまは「列を隠している」ことを示す）。
 * 数を文字で入れると、アイコンの器から溢れる */
.iconbtn.has { position: relative; color: var(--accent); border-color: var(--accent); }
.iconbtn.has::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ★会社を入れる1行。**表の外・見出しの上**（2026-09-11 指示「上に持っていって」）。
 * 表の1行目に置いていたので、**横にスクロールすると入口ごと流れて**いた。
 * 帯そのものを入口の顔にする —— 中の欄は枠を持たず、帯の全幅を使う */
/* ★**折り返さない。** 欄が幅いっぱいを取るので、放っておくと釦が2段目に落ちる
 * （入れる場所が縦に2行を占めて、表の1行ぶんを食う） */
.addbar { border-bottom: 1px solid var(--rule); background: #fbfcfe; padding: 7px 10px; gap: 6px; flex-wrap: nowrap; }
.addbar #newCompany {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0; background: none; padding: 6px 4px;
  font-size: 14px; border-radius: 8px;
}
.addbar .btn { flex: 0 0 auto; padding: 7px 14px; font-size: 13.5px; }
.addbar #newCompany::placeholder { color: var(--accent); opacity: .85; font-weight: 600; }
.addbar #newCompany:focus { background: #fff; outline: 2px solid var(--accent); outline-offset: -2px; }
/* ★帯はほとんど空にした（2026-09-11 指示）。**残したのは件数とページ送りだけ。**
 * 絞り込みと並べ替えは列の見出しへ、道具は「⋯」の中へ移した */
.bar .spacer { flex: 1 1 auto; }

.wrap { overflow-x: auto; }
/* ★**table-layout: fixed**（2026-09-11 指示「なるべく他のところ見えるように」）。
 * auto のままだと指定した列幅は「提案」でしかなく、**中身の長いセルに引っ張られて広がる。**
 * 実測では 13列で 2,451px（指定の合計は約 1,650px）まで伸びていて、
 * 社名だけで 318px、メモが 352px を占めていた。
 * fixed にすると指定どおりに割り付き、はみ出す文字は今までどおり「…」で切れる。 */
table {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  /* ★**`width: max-content` をやめる**（2026-09-11）。これが残っていると
   * テーブルの幅が中身で決まるので、`table-layout: fixed` を書いても
   * 列幅の指定は効かない（実測 2,257px。指定の合計は 1,677px だった）。
   * `width: 100%` にすると、各列の指定は**比率のヒント**として使われ、
   * **画面の幅にきっちり収まる**（広い画面では13列が全部見える）。
   * ★min-width を下回る狭い画面では、今までどおり横に流れる */
  /* ★min-width は「**全部の列が読める合計**」。ここを小さくすると、
   * 列を多く出している人の画面で日付が「2026/0…」と切れる（実際にそうなった）。
   * 広い画面では 100% まで広がり、狭い画面ではここから横に流れる */
  width: 100%; min-width: 96rem; background: var(--panel);
}
th, td {
  padding: 10px 9px; text-align: left; vertical-align: middle;
  /* **行の高さを1行に固定する。縦に伸びる表は比べられない。** */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 22rem;
  /* ★**行の下の線は引かない**（2026-09-11）。1行おきに地を敷いたので、
   * 行の切れ目は帯そのものが示している。両方やると縞の上に格子が乗って重い。
   * ★列の境目の線だけ残す。13列が横に並ぶと、**どこまでが1つの列か**が
   *   空のセルの続きで分からなくなる（指示で入れたのはこちら） */
  border-right: 1px solid var(--rule-v, #eef0f4);
}
/* 右端（消す口の空セル）には線を引かない。表の外枠は .tablecard が持っている */
th:last-child, td:last-child { border-right: 0; }
/* 見出しは**小さく・字間を広く**。読むのは行（1社）なので、見出しは背景に回す */
/* ★見出しは**列幅に収まる大きさ**で揃える（2026-09-11 指示「列タイトルのバランスが悪い」）。
 * 11px ＋ 字間 .04em だと「クライアントURL」「ネクストアクション」が列幅いっぱいになり、
 * 隣の見出しとくっついて見えていた（中身のほうは「…」で切れるので気づきにくい）。
 * 字を少し詰めて、**どの列も左右に同じ余白が残る**ようにする */
th {
  background: var(--panel); border-bottom: 1px solid var(--line);
  font: 600 10.5px/1.9 var(--sans); color: var(--dim); letter-spacing: .01em;
  padding-top: 12px; padding-bottom: 10px;
}
/* ★見出しの縦線は引かない。**上端に格子が出ると、表が方眼紙に見える** */
th { border-right: 0; }
/* ★1行おきに地を敷く（2026-09-11 指示「白グレー白グレーみたいに」）。
 * 13列を横に読むとき、**目が1行ずれる**のが一番多い間違いなので、
 * 行そのものに帯を持たせる。色は NEXX のミントをうんと薄くしたもの ——
 * 無彩色のグレーより、白との差が小さくても行の境目が見える。
 * ★**sticky の列にも同じ地を敷く。** ここだけ白いままだと、
 *   横に振ったときに社名の列が浮いて見える（背景を別に持っているため） */
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) td.sticky { background: var(--zebra); }
tbody tr:hover td,
tbody tr:hover td.sticky { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }

/* 列幅は意味に合わせる。**全部同じ幅だと、どこを見ればいいか分からない**
 *
 * ★**列の番号ではなく data-k で当てる**（2026-09-08）。
 *   nth-child で書いていたので、「列を選ぶ」で1本隠すと**そこから右が全部ずれ**、
 *   議事録を隠すだけで反社チェックの幅が契約の幅（4.5rem）になっていた。
 *   列を1本足すたびに番号を数え直す作りでもある（次アクションで踏むところだった）。 */
/* ★幅は**中身に見合う最小**にする（2026-09-11 指示「なるべく他のところ見えるように」）。
 * 13列を1画面に入れるのが目的だが、**読めなくなるところまでは削らない** ——
 * 社名・議事録・ネクストアクションは、切れると何の行か分からなくなる */
[data-k="company"] { width: 11rem; }
/* ★カテゴリーは複数入る（2026-09-10）。2つ並ぶところまでは見える幅 */
[data-k="category"] { width: 8.5rem; }
/* ★見出しが「クライアントURL」になったので、その字数が入る幅にする（2026-09-11 指示）。
 * 見出しが折り返すと、その1列だけ行の高さが変わって表が揺れる */
/* ★URLは**短くてよい**（2026-09-11 指示）。全部読む列ではなく、
 * 入っているかどうかと、押して開くための列（開く印は右端にある） */
[data-k="site_url"] { width: 8rem; }
/* ★丸印を外したので詰めた（2026-09-10 指示）。名前だけが入る */
[data-k="owner_tag"] { width: 5.8rem; }
[data-k="contact"] { width: 6.5rem; }
[data-k="has_card"] { width: 4rem; }
/* ★日付は**切らない**（2026-09-11 指示「アポ日とかは全て表示したい」）。
 * 「2026/09/07」で1つの意味なので、「2026/09/…」は読めないのと同じ */
[data-k="updated_at"] { width: 6.8rem; }
/* ★日付がちょうど収まる幅。**広げすぎない** —— 右に余白が残ると、
 * 隣の列との間が1つだけ広く空いて、列の並びが不揃いに見える（2026-09-11 指示） */
[data-k="met_on"] { width: 6.6rem; }
[data-k="notes"] { width: 7rem; }
/* 次アクションは「✓＋やること＋期限」が入る。ここが狭いと約束が読めない */
[data-k="next_action"] { width: 9.2rem; }
[data-k="status"] { width: 6.6rem; }
/* 「面談形式」は4文字。**見出しが入らないと、その列だけ窮屈に見える** */
[data-k="contract"] { width: 4.6rem; }
[data-k="offline"] { width: 5.2rem; }
/* ★出すのは**スコアだけ**にしたので詰めた（2026-09-10 指示）。
 * 状態の文字（要確認・取引不可）を出していた頃は 10rem 要ったが、
 * いま入るのは3桁の数字か「調べる」の3文字。**先方担当者の隣**に来る列なので、
 * ここが広いままだと会社・人・スコアが1画面に並ばない */
[data-k="screen_status"] { width: 6.4rem; }
th.cu, td.cu { width: 6rem; }                  /* カスタム列（紹介者・メモ） */
th:last-child, td:last-child { width: 2.6rem; }

/* 横スクロールしても企業名を見失わないように、企業列だけ左に貼る */
th.sticky, td.sticky {
  position: sticky; left: 0; z-index: 12;
  background: var(--panel);
}
th.sticky { z-index: 14; background: var(--panel); }
/* ★td を直接 flex にしない（2026-09-10 に段差の原因として実測）。
 *   flex にした td は**表の行の高さ共有から外れて 38.0px になり、
 *   table-cell の 39.5px との間に 1.5px の段差**ができる。
 *   下の罫線が企業の列だけずれて見えていたのがこれ。中の箱で並べる */
td.sticky > .rowbox { font-weight: 600; }
/* 社名。**押すと詳細が開く。** 入力欄ではないので枠を持たせない ——
 * ただし押せることは分かる必要があるので、触ると下線が出る */
.namebtn {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/1.5 var(--sans); color: var(--ink); text-align: left;
  padding: 5px 7px; border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.namebtn:hover { background: var(--accent-soft); color: var(--accent); }
.rowbox { display: flex; align-items: center; gap: 0; min-width: 0; }
.rowbox > .cell { flex: 1 1 auto; }

/* ── セルの入力欄 ─────────────────────────────────────
 * **入力欄に見えないようにする**（枠があると表が申込書になる）。
 * ★`input[type=text]` は `.cell` より強いので `input.cell` まで書く（前版で踏んだ） */
input.cell, select.cell, textarea.cell {
  width: 100%; border: 0; background: transparent; border-radius: 8px;
  padding: 5px 7px; margin: 0; font-size: 14px; line-height: 1.5;
  text-overflow: ellipsis; min-width: 0;
}
select.cell { appearance: none; cursor: pointer; }
/* 更新日。**打てない列なので入力欄の顔をさせない**（薄い等幅） */
.stamp { font: 500 12.5px/1.6 var(--sans); color: var(--dim); padding: 0 7px; letter-spacing: .01em; }

/* 長文のカスタム列（メモ）。**表では読むだけ。押すと詳細のメモ欄が開く。**
 * 表のセルの中で広げる作りは4回だめだった（絶対配置は切られる／全行3行は縦位置が崩れる／
 * 1行では書けない／固定配置は浮く面がもう1枚増える）。書く場所は詳細パネル1枚に寄せた。 */
.memobtn {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 14px/1.5 var(--sans); color: var(--ink);
  padding: 5px 7px; border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memobtn.empty { color: #c9ccd3; }
.memobtn:hover { background: var(--accent-soft); color: var(--accent); }

/* ★日付の欄は、中に**カレンダーの印**（Chrome の picker）を持っている。
 * 既定では 16px ほど場所を取り、**文字のほうが押し出されて「2026/10/0」で切れる**
 * （欄の内寸 86px に対して文字 70px で入るはずなのに切れていたのはこれ）。
 * 印は小さくして端に寄せる —— 消すと日付を選べなくなるので残す */
input.cell[type=date] { font-size: 13px; padding-left: 5px; padding-right: 2px; }
input.cell[type=date]::-webkit-calendar-picker-indicator {
  width: 11px; height: 11px; padding: 0; margin: 0 0 0 2px; opacity: .35; cursor: pointer;
}
input.cell[type=date]:hover::-webkit-calendar-picker-indicator { opacity: .75; }
input.cell[type=date]::-webkit-calendar-picker-indicator { opacity: 0; width: 10px; margin: 0; }
input.cell[type=date]:hover::-webkit-calendar-picker-indicator { opacity: .5; }
input.cell[type=date].empty:not(:focus)::-webkit-datetime-edit { color: #c3c7cf; }
/* ★「なし」「未」は**入っていない**という意味なので、社名と同じ濃さで並べない。
 * 41行ぜんぶ真っ黒の「なし」「未」が並ぶと、埋まっている列との差が消える */
.cell.dim { color: #9aa1ad; }
.cell:hover { background: var(--rule); }
.cell:focus { background: #fff; outline: 2px solid var(--accent); outline-offset: -2px; }
.cell.saving { background: var(--accent-soft); }
.cell.saved { box-shadow: inset 3px 0 0 var(--accent); }
.cell.bad { background: var(--red-bg); box-shadow: inset 3px 0 0 var(--danger); }
td:has(> .cell) { padding: 3px 4px; }

/* ── 表 / ボード の切替（2026-09-11 指示「パイプライン（ボード）表示」）──
 * ★**2つで1つの器**に見せる。釦を2つ並べただけだと「押すもの」が2つ増えたように見えて、
 *   いまどちらで見ているのかが読めない。地を1枚敷いて、選ばれた側だけを白く浮かせる */
.seg {
  display: inline-flex; flex: 0 0 auto; height: 36px; padding: 3px;
  background: var(--rule); border-radius: 10px; gap: 2px;
}
.segbtn {
  border: 0; background: none; cursor: pointer; border-radius: 8px;
  padding: 0 12px; font: 600 13px/1 var(--sans); color: var(--dim);
}
.segbtn:hover { color: var(--ink); }
.segbtn.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }

/* ── パイプライン（ボード）─────────────────────────────────
 * ★列は**ステータス5本＋受け皿1本**。横には流すが、縦はページの高さに収める ——
 *   列ごとに縦スクロールさせないと、1本だけ長い列のせいで他の列の頭が見えなくなる。
 * ★カードに置くのは**「次に何をするか」を決めるのに要るものだけ**。
 *   社名・誰と・止まっている約束・アポ日。それ以上は開いた先にある */
/* ★列の高さは**全部そろえる。** 中身の量で高さが変わると、
 * 「列が短い＝空いている」ではなく「列が短い＝終わっている」に見えてしまう */
.board {
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; padding: 14px;
  height: calc(100svh - 196px); min-height: 22rem;
}
.bcol {
  flex: 0 0 17rem; min-width: 0; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.bcol.over { border-color: var(--accent); background: var(--hover); }
.bcolhead {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.bcolhead .pill-c { border-radius: 999px; padding: 3px 10px; font: 600 12px/1.5 var(--sans); }
.bcount { margin-left: auto; color: var(--dim); font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.bcolbody { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.bnone { margin: 0; padding: 10px 4px; color: var(--dim); font-size: 12.5px; text-align: center; }

.bcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
}
.bcard:hover { border-color: var(--accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bcard.dragging { opacity: .4; }
.bhead { display: flex; align-items: baseline; gap: 6px; }
.bname { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.bflag {
  flex: 0 0 auto; border-radius: 999px; padding: 1px 7px;
  font: 700 11px/1.6 var(--sans); font-variant-numeric: tabular-nums;
}
.bflag.ng { background: var(--red-bg); color: var(--red); }
.bflag.warn { background: var(--warn-bg); color: var(--warn); }
.bwhy { margin-left: 4px; font-weight: 600; opacity: .75; }
.bwho { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
.bcontact { color: var(--dim); }
.bowner { font-weight: 600; }
/* 止まっている約束。**期限切れは日数で言う** —— 日付だと今日との差を毎回引き算させる */
.bnext {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--rule); border-radius: 8px; padding: 5px 7px; font-size: 12px;
}
.bnexttext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdue { flex: 0 0 auto; color: var(--dim); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.bdue.over { color: var(--red); font-weight: 700; }
.bfoot {
  display: flex; gap: 10px; color: var(--dim);
  font: 500 11.5px/1.6 var(--sans); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  /* ★スマホは**1列ずつ横に送る**。5本を詰めると1枚も読めない */
  .bcol { flex: 0 0 min(80vw, 17rem); }
  .board { padding: 10px; height: calc(100svh - 168px); }
}

/* ── 色つきのピル（ピンの Status / Priority の写し）──────────
 * **色を持つのはステータスと反社チェックだけ。** カテゴリーは灰色。
 * select のまま丸角と色地を着せるので、押せば今までどおり選び直せる */
select.cell.pill-c {
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
  width: auto; max-width: 100%; text-align: center;
}
/* ★`select.cell`（要素+クラス）の background:transparent は `.p-blue`（クラス1つ）に勝つ。
 * クラスを2つ重ねて詳細度で上回らせる。下見で「文字だけ色が付いて地が出ない」として現れた */
.pill-c.p-blue { background: var(--accent-soft); color: #1e40af; }
.pill-c.p-green { background: var(--ok-bg); color: var(--ok); }
.pill-c.p-yellow { background: var(--warn-bg); color: var(--warn); }
.pill-c.p-red { background: var(--red-bg); color: var(--red); }
.pill-c.p-gray { background: var(--gray-bg); color: var(--gray-t); }

/* 担当者の丸印（ピンのアバター相当。写真は無いので頭文字） */
.face {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; margin-right: 6px;
  font: 700 10px/1 var(--mono); color: #fff; background: var(--dim);
}
/* 担当者も同じ理由で td は flex にしない（.rowbox の中で並べる） */
.rowbox > .face { flex: 0 0 auto; }
.f0 { background: #4f6bd8; } .f1 { background: #3f9e7d; } .f2 { background: #c07b3a; }
.f3 { background: #9a5bb5; } .f4 { background: #ba5470; }

/* 登録の行。**表の一部に見えて、でも1行だけ顔が違う**くらいに留める */
/* ★セルのプレースホルダは**うんと薄く**（2026-09-10）。
 * 47行に「議事録のURLを貼る」「次にやること」が並ぶと、
 * **空の行が文字で埋まって見えて、実際に入っている行と見分けがつかない** */
tbody td .cell::placeholder { color: #c9ccd3; }

/* ── ページ送り（kintone と同じ形） ── */
.pager { display: inline-flex; align-items: center; gap: 3px; }
.pcount { font-size: 12px; color: var(--dim); margin-right: 4px; }
.pnum { font-size: 12px; color: var(--dim); padding: 0 6px; }
.pbtn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 7px;
  cursor: pointer; color: var(--dim); font-size: 13px; line-height: 1; padding: 5px 9px;
}
.pbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pbtn:disabled { opacity: .3; cursor: default; }
.perpage { width: auto; margin: 0 0 0 6px; padding: 4px 6px; font-size: 12px; border-radius: 7px; }
.pagerbar { border-top: 1px solid var(--rule); padding: 8px 14px; }

/* 保存ビュー（kintone の「一覧」） */
/* 保存ビューの帯。**1本も無いときは帯ごと畳む**（空の帯が40px居座っていた） */
/* ★保存した表示（ビュー）は道具の帯の中に並べる（2026-09-11 指示）。
 * 別の帯にしていたので、「会社を追加」の真下に同じ形の釦が並び、同格に見えていた */
.views { display: flex; gap: 6px; align-items: center; padding: 0; }
.views:empty { display: none; }
.viewbtn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  cursor: pointer; font-size: 12.5px; padding: 4px 12px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.viewbtn:hover { border-color: var(--accent); color: var(--accent); }
.viewbtn.add { color: var(--accent); border-style: dashed; }
.viewx { color: var(--dim); font-size: 11px; }
.viewx:hover { color: var(--danger); }

.link.on { font-weight: 700; text-decoration: underline; }
/* ★帯の中の3つ（絞り込みを外す・列を選ぶ・気づきだけ）が同じ青文字で並んでいた。
 * 「押すと元に戻す」「開く」「入り切りする」で役目が違うので、
 * **入り切りするものだけ枠のあるトグルにする**（押した状態が見えていないと戻せない） */
.link.toggle {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  background: var(--panel); color: var(--dim); font-size: 12.5px;
}
.link.toggle:hover { border-color: var(--accent); color: var(--accent); }
.link.toggle.on {
  background: var(--warn-bg); border-color: transparent; color: var(--warn);
  font-weight: 700; text-decoration: none;
}
/* 何も絞り込んでいないときの「絞り込みを外す」。**消さずに薄くする**
 * （消えると、押せたはずのものが無くなったように見える） */
.link:disabled { color: var(--dim); opacity: .45; cursor: default; text-decoration: none; }

/* 反社チェックのセル。**ボタン1つだけ。**
 * 状態はボタンの色そのもので表す（同じ列に「状態」と「作業」を並べると
 * 何の列か分からなくなる。下見でそうなった） */
td[data-k="screen_status"] { padding: 3px 6px; }
.screenbtn {
  display: inline-flex; align-items: baseline; gap: 6px;
  /* ★**列の幅からはみ出さない**（2026-09-11 指示）。
   * 中身が nowrap なので、max-width だけでは隣の列の上に流れていた。
   * 器の側で切る（中の文字は下の ellipsis で「…」になる） */
  min-width: 2.9rem; max-width: 100%; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; cursor: pointer; padding: 3px 11px; color: var(--dim);
  font-size: 12.5px; text-align: left;
}
.screenbtn .st { flex: 0 0 auto; font-weight: 600; }
.screenbtn .on {
  flex: 0 0 auto; font: 600 10px/1.6 var(--mono); opacity: .75;
  font-variant-numeric: tabular-nums;
}
.screenbtn:hover { border-color: var(--accent); color: var(--accent); }
/* 材料を集めてあるが、まだ人が決めていない状態 */
.screenbtn.has { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.screenbtn.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.screenbtn.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.screenbtn.ng { background: var(--red-bg); border-color: transparent; color: var(--red); }

/* AI の材料の要点。**スコアには色をつけない**（点数で決めさせない）。
 * 制裁リストだけは赤にする —— ここは「一撃ノックアウト」の項目なので */
.aisum { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 10px; }
.aikpi {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fafbfc;
}
.aikpi .k { display: block; font-size: 11px; color: var(--dim); }
.aikpi .v { display: block; font-size: 14px; font-weight: 600; word-break: break-word; }
.aikpi.hot { border-color: var(--red); background: var(--red-bg); }
.aikpi.hot .v { color: var(--red); }
.aikpi.warn { border-color: var(--warn); background: var(--warn-bg); }
.aikpi.warn .v { color: var(--warn); }

/* 議事録のセル。**打つのは欄、開くのは ↗** */
.openlink {
  flex: 0 0 auto; color: var(--accent); text-decoration: none;
  padding: 2px 5px; border-radius: 6px; font-size: 13px;
}
.openlink:hover { background: var(--accent-soft); }
td[data-k="notes"] > .rowbox { gap: 1px; }
/* ★HP の td は **flex にしない**（2026-09-10 に踏んだ）。
 *   企業の列（sticky かつ display:flex）の隣なので、td を flex にすると
 *   **table-cell でなくなった2つが同じ列に重なる**（次アクションのコメントと同じ罠）。
 *   中に箱を1つ置いて、その中で並べる */
td[data-k="site_url"] { padding: 3px 4px; }
.urlcell { display: flex; align-items: center; gap: 1px; min-width: 0; }
.urlcell > .cell { flex: 1 1 auto; }


/* ── 次アクションのセル（2026-09-08）────────────────────────
 * ★**打つのは文字だけ。** 期限も担当もここには置かない（本人指示）。
 *   「次に何をするか」は一行の文で書けるもので、欄が3つ並ぶと
 *   書く前に埋めるものを決めさせることになる。期限と担当は行を開いた先。
 * ★**td を直接 flex にしない。** 隣（議事録）も flex だと、
 *   table-cell でなくなった2つが同じ列に重なる（下見で実測）。中の箱で並べる */
.actcell { display: flex; align-items: center; gap: 1px; }
td[data-k="next_action"] { padding: 3px 4px; }
.actcell .cell { flex: 1 1 auto; min-width: 0; }
.actdone {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: #c3c7cf; font-size: 12px; line-height: 1; cursor: pointer;
}
.actdone:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.actdone:disabled { opacity: .4; }
/* 期限を入れてある約束だけ、左に細い印を出す（**欄は増やさない**）。
 * 色が付くのは急ぐ理由があるときだけ —— 決めているのは芯の dueState */
/* ★期限は**数字で出す**（2026-09-11 指示）。色は急ぐ理由があるときだけ。
 * 過ぎた＝赤 ／ 今日＝黄 ／ 3日以内＝薄い黄 ／ それ以外＝色を持たない */
.duechip {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; line-height: 1.7;
  padding: 0 6px; border-radius: 999px; white-space: nowrap;
}
.duechip.far { color: var(--dim); background: var(--rule); }
.duechip.soon { color: var(--warn); background: var(--warn-bg); }
.duechip.today { color: var(--warn); background: var(--warn-bg); }
.duechip.over { color: var(--red); background: var(--red-bg); }

.cell.hasdue { box-shadow: inset 2px 0 0 var(--line); }
.cell.hasdue.over { box-shadow: inset 2px 0 0 var(--red); }
.cell.hasdue.today { box-shadow: inset 2px 0 0 var(--warn); }
.cell.hasdue.soon { box-shadow: inset 2px 0 0 var(--warn-bg); }

/* 列の出し入れ */
.colsheet { max-width: 24rem; border-radius: var(--r); margin-bottom: 6vh; }
.colrow {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  font: inherit; color: inherit; margin: 0; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.colrow input { width: auto; margin: 0; }

/* 名刺の確認。**押す前に全部見えていること**が要件なので、1画面に収める */
.cardsheet { max-width: 34rem; border-radius: var(--r); margin-bottom: 4vh; }
.cardrow { margin: 0; }
.cardrow label { margin-top: 10px; }
.cardrow textarea { min-height: 3.6rem; }
.cardsheet .hint b { color: var(--ink); }
/* ★入力欄は 16px。**これより小さいと iOS が focus のたびに画面を拡大する。**
 * 拡大されると確定ボタンが画面の外に出て、名刺1枚入れるのに何度も指で戻すことになる */
/* 幅も font-size もここで持つ。**`input[type=text]` 頼みにしない**
 * （type 属性が無い input は当たらない。本番で欄が細いまま出た） */
.cardrow input, .cardrow textarea { width: 100%; font-size: 16px; }
/* ── 名刺を何枚も入れるとき（2026-09-04）────────────────
 * ★**1枚ずつを、はっきり切って並べる。** 続けて置くと
 *   「どこまでが1枚目か」が分からず、隣の会社の欄を直してしまう。
 * ★担当者とアポ日は上に1組だけ（どの名刺も同じ値なので、枚数ぶん打たせない） */
.cardcommon { padding-bottom: 12px; border-bottom: 2px solid var(--rule); margin-bottom: 4px; }
.cardcommon .hint { margin: 8px 0 0; }
.cardblk { border-bottom: 1px solid var(--rule); padding: 10px 0 14px; }
.cardblk:last-of-type { border-bottom: 0; }
/* 入れないことにした名刺。**消さずに薄くする**（外したことが見えていないと戻せない） */
.cardblk.cardoff .cardblkbody { opacity: .35; }
.cardblkhead { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
/* ★どの写真から来た欄なのかを見せる。5枚並ぶと、これが無いと照合できない */
.cardthumb {
  width: 52px; height: 34px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.cardblkcap { display: flex; flex-direction: column; line-height: 1.3; }
.cardblkphoto { color: var(--dim); font-size: 12px; }
.cardblkuse {
  margin: 0 0 0 auto; display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--dim); cursor: pointer; white-space: nowrap;
}
.cardblkuse input { width: auto; margin: 0; }
.cardhint { margin: 8px 0 0; }
/* 読めなかった写真。**押す前に言う**（入った枚数で気づかせない） */
.cardbad { margin: 12px 0 0; color: var(--danger); }

/* 確定は下に貼り付ける。キーボードが出ても押せる位置に居続ける */
.cardfoot {
  position: sticky; bottom: 0; margin-top: 16px;
  background: var(--panel); border-top: 1px solid var(--rule);
  padding: 12px 0 max(4px, env(safe-area-inset-bottom));
}
/* マイページの上半分（アイコンと呼び名）。**自分のときだけ直せる** */
.profile {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 10px var(--gut) 6px; max-width: 52rem;
}
/* ★`background:` の一括指定を書かない。**書くと .f0〜.f4 の色を打ち消して
 * 白地に白文字（＝空の丸）になる。** 写真は JS が background-image で敷く */
.pfface {
  width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line); background-size: cover; background-position: center;
  cursor: pointer; font: 700 28px/1 var(--sans); color: #fff; padding: 0;
}
.pfface:disabled { cursor: default; }
/* 写真を敷いたら文字は消す（丸の中で重ならないように） */
.face.haspic, .pfface.haspic { color: transparent; background-size: cover; background-position: center; }
.pfbody { flex: 1 1 14rem; min-width: 0; }
.pfbody label { margin-top: 0; }
.pfrow { display: flex; gap: 8px; align-items: center; }
.pfrow input { margin-top: 4px; }
.pfrow .btn { flex: 0 0 auto; margin-top: 4px; }
#pfMsg { min-height: 0; margin-top: 6px; }

/* ── 同じ会社で2人以上（2026-09-06）──────────────────
 * ★台帳は1社1行なので、**「先方」だけ見ると2人目に気づけない**。
 *   数だけ出して、押せば全員見える。値そのものは触らない（DBに書かない表示） */
.morewho {
  margin-left: 6px; padding: 1px 7px; font-size: 12px; line-height: 1.7;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--dim); cursor: pointer; white-space: nowrap;
}
.morewho:hover { border-color: var(--accent); color: var(--accent); }
/* 行を開いたときの「もらった名刺」 */
.whos { margin-top: 22px; }
.whorow { border-top: 1px solid var(--rule); padding: 8px 0; }
/* ★1枚は**見出し（氏名／日付）＋箇条書き**（2026-09-11 指示）。
 * 「／」で1行に詰めていたので、メールアドレスだけを拾うのに目で切り出していた */
.whead { display: flex; align-items: baseline; gap: 10px; }
.whorow .wn { flex: 1 1 auto; min-width: 0; font-weight: 700; }
/* 日付は**右**（指示）。左に揃えると氏名と同じ列に日付が並んで、名前が探しにくい */
.whorow .wd { flex: 0 0 auto; color: var(--dim); font: 500 12px/1.8 var(--sans); }
.wlist { margin: 4px 0 0; padding: 0; list-style: none; }
.wlist li { position: relative; padding-left: 12px; }
.wlist li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 4px; height: 4px; border-radius: 50%; background: #c7cdd8;
}
/* ★どの項目も**押すとコピー**。台帳から連絡先を使うときの実際の動きは
 * 「読む」ではなく「メールに貼る」なので、そこを1手にする */
.wcopy {
  border: 0; background: none; cursor: pointer; text-align: left; padding: 2px 4px;
  margin-left: -4px; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--dim);
  word-break: break-all; max-width: 100%;
}
.wcopy:hover { background: var(--accent-soft); color: var(--accent); }
.wcopy:active { background: var(--rule); }
/* 反社チェックの列に出す安全度スコア。**状態だけだと全部「要確認」で情報が無い** */
.screenbtn .sc {
  flex: 0 0 auto; white-space: nowrap;
  margin-left: 6px; font-size: 12px; opacity: .75;
}
/* ★「要確認 100」が**「100点なのに要確認」**と読めていた（2026-09-07）。
 * 済にならなかった理由がホームページ未読なら、点数ではなく理由のほうを出す。
 * 点数は検索だけで付くので、HPを読めていない100点は意味が違う */
.screenbtn .sc.why {
  font-size: 11px; font-weight: 600; opacity: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* ★列に出すのはスコアだけにした（2026-09-10 指示）。**数字が主役**なので、
 * 添え物だった頃の小ささ（12px・薄い）から、読める大きさに戻す。
 * 状態はボタンの色が言っているので、文字で繰り返さない */
.screenbtn .sc.big { flex: 0 0 auto; margin-left: 0; font-size: 14px; font-weight: 700; opacity: 1; }

/* 名刺のページ（個人ページ）。**表と対等な1枚のページ**（モーダルではない） */
.cardswrap { padding: 0 var(--gut) 48px; max-width: 72rem; }
.cardscount { margin: 0; padding: 4px var(--gut) 6px; color: var(--dim); font-size: 13px; }
#viewCards #cardsWho { width: auto; margin: 0; padding: 8px 10px; }
#viewCards #cardsQ { width: min(220px, 40vw); margin: 0; border-radius: 10px; background: var(--panel); }
/* ★**1行に1人、列でそろえる**（Sansan の一覧に寄せた）。
 * 写真 | 名前と会社 | 連絡先 | 日付と行き先。目は名前の列を縦に追う */
.mlist {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  overflow: hidden; margin-top: 6px;
}
.mhead, .mrow {
  display: grid; grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 1fr) 9.5rem;
  gap: 16px; align-items: center; padding: 10px 16px;
}
.mhead {
  padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  font: 600 12px/1.6 var(--sans); color: var(--dim);
}
.mhead span:last-child { text-align: right; }
.mrow { border-bottom: 1px solid var(--rule); }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: #fafbfc; }
/* 名刺の比率（91:55）で切る。写真が無い行も枠だけ置いて、名前の列をずらさない */
.mthumb {
  width: 76px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--rule); overflow: hidden; display: block;
}
button.mthumb { cursor: zoom-in; }
button.mthumb:hover { border-color: var(--accent); }
.mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmain .who { font: 700 15px/1.45 var(--sans); color: var(--ink); }
.mmain .org { font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 1px; }
.mmain .who, .mmain .org, .mcontact a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcontact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcontact a { font-size: 13px; color: var(--ink); text-decoration: none; }
.mcontact a:hover { color: var(--accent); text-decoration: underline; }
.mside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.mdate { font: 500 13px/1.5 var(--mono); color: var(--dim); }
.mside .stamp { font: 500 12px/1.5 var(--sans); color: var(--dim); padding: 0; }
.mlinks { display: flex; gap: 10px; font-size: 13px; }
.cardsnone { color: var(--dim); padding: 20px 4px; }

/* 追加行の「名刺から入れる」。**表の上に出す**（ヘッダのボタンだけでは見つからない） */

.sortbtn {
  border: 0; background: none; cursor: pointer; padding: 0; width: 100%; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.sortbtn:hover { color: var(--accent); }
/* ★いま効いている列は見出しの顔で言う（2026-09-11）。
 * 並べ替え中は ▴▾、絞り込み中は ● */
.sortbtn.on { color: var(--accent); }
/* ★並べ替えの印は**見出しと同じ大きさ**にする（2026-09-11 指示「矢印小さい」）。
 * 見出しの文字が 11px なので、9px の三角は「点」にしか見えなかった */
.arrow { color: var(--accent); margin-left: 4px; font-size: 14px; line-height: 1; }
.arrow.dot { font-size: 10px; vertical-align: middle; }

/* ── 列の見出しから開くメニュー（2026-09-11 指示「スプシを参考に」）──
 * 並べ替えと絞り込みを、その列の上に集める。**帯には何も置かない** */
#colmenu {
  position: fixed; z-index: 60; min-width: 12rem; max-width: 16rem;
  max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(20, 26, 40, .16); padding: 5px;
}
.cmitem {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  cursor: pointer; padding: 7px 10px; border-radius: 7px;
  font: 400 13.5px/1.4 var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmitem:hover { background: var(--accent-soft); color: var(--accent); }
/* いま選ばれているものには印。**色だけで言わない**（並ぶと分からなくなる） */
.cmitem.on { font-weight: 700; color: var(--accent); }
.cmitem.on::before { content: "✓ "; }
.cmitem:not(.on)::before { content: ""; padding-left: 0; }
.cmval { padding-left: 10px; }
.cmhead {
  font: 600 11px/1.9 var(--sans); color: var(--dim); letter-spacing: .04em;
  padding: 8px 10px 4px; border-top: 1px solid var(--rule); margin-top: 4px;
}

.notesbtn, .openbtn {
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  padding: 4px 6px; border-radius: 8px; text-align: left;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 議事録のセル。**他の列と同じ「文字が並んでいる」顔にする。**
 * ここだけ青いリンクだと列が浮いて、表として横に読めなくなる（下見で判明） */
.notesbtn { width: 100%; font-size: 13px; display: flex; align-items: baseline; gap: 6px; }
.notesbtn .when {
  flex: 0 0 auto; font: 600 11px/1.6 var(--mono); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.notesbtn .what { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notesbtn .off { font-size: 13px; }
.notesbtn:hover, .openbtn:hover { background: var(--accent-soft); color: var(--accent); }
.openbtn { color: var(--dim); font-size: 15px; line-height: 1; padding: 2px 4px; flex: 0 0 auto; }

.pill {
  display: inline-block; padding: 1px 9px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px; color: var(--dim); background: var(--panel);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.badge {
  display: inline-block; min-width: 18px; text-align: center;
  font: 600 11px/1.6 var(--mono); color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 0 5px; margin-left: 6px;
}
.mark { color: var(--ok); font-weight: 600; }
.off { color: #b9bdc6; }
.addcol { color: var(--accent); cursor: pointer; }

/* 消す口は詳細パネルの中だけ（表からは外した。CGE の誤爆事故）。
 * ★節の順を変えたので、いまは**パネルの一番下に独立して**置いてある */
/* ★AIが出した「次にやること」の候補（2026-09-11 指示）。
 * **チェックを付けたものだけが台帳に入る** —— 機械が勝手に約束を作ると、
 * 誰も言っていない宿題が残る */
.picks:empty { display: none; }
.picks { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; background: var(--zebra); }
.pickhead { margin: 0 0 6px; font: 700 11.5px/1.6 var(--sans); color: var(--dim); letter-spacing: .04em; }
.pick { display: flex; align-items: center; gap: 8px; padding: 4px 0; margin: 0; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.pick input { width: auto; margin: 0; flex: 0 0 auto; }
.pick .picktext { flex: 1 1 auto; min-width: 0; }

/* ★この行の履歴（2026-09-11 指示）。**畳んで置く** ——
 * 普段は要らないが、「勝手に変わった」と思ったときにだけ開く */
.hist { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 12px; }
.hist > summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 4px 0; }
.hist > summary:hover { text-decoration: underline; }
.histbody { margin-top: 6px; font-size: 12.5px; }
.histrow {
  display: grid; grid-template-columns: 5.2rem 1fr auto; gap: 2px 8px;
  padding: 6px 0; border-bottom: 1px solid var(--rule);
}
.histrow .hwhen { color: var(--dim); }
.histrow .hwhat { font-weight: 600; }
.histrow .hwho { color: var(--dim); font-size: 11.5px; }
.histrow .hval { grid-column: 2 / -1; color: var(--dim); word-break: break-all; }

#panelBody > .link.danger { display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule); width: 100%; text-align: left; }
.link.danger { color: var(--danger); }
.link.danger:hover { text-decoration: underline; }


#empty { padding: 40px clamp(16px, 5vw, 40px); max-width: 34rem; color: var(--dim); }
#empty b { color: var(--ink); }
#empty2 { color: var(--dim); font-size: 13px; }

/* ── 貼り付けシート ─────────────────────────────────── */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 28, 40, .4);
  display: grid; place-items: end center;
}
.sheet > .inner {
  width: 100%; max-width: 60rem; max-height: 94svh; overflow: auto;
  background: var(--panel); border-radius: var(--r) var(--r) 0 0;
  padding: clamp(14px, 4vw, 24px);
}
.sheet h2 { margin: 0 0 4px; font-size: 17px; }
.sheet .hint { margin: 0 0 14px; color: var(--dim); font-size: 13px; }
#pasteBox { min-height: 8.5rem; font-family: var(--mono); font-size: 13px; }
.prev { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.prev table { width: max-content; min-width: 100%; }
.prev select { margin: 0; padding: 4px 6px; font-size: 13px; width: auto; min-width: 7rem; }
.prev td.warn { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn); color: var(--warn); }
.prev td.mode { font: 600 11px/1.8 var(--mono); color: var(--dim); text-align: center; }
.foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.foot .spacer { flex: 1 1 auto; }
.skips { margin-top: 12px; font-size: 13px; color: var(--warn); }
.skips li { font-family: var(--mono); font-size: 12px; }

/* ── 詳細パネル ─────────────────────────────────────── */
/* ★開いた瞬間に状態が読める要約（2026-09-10）。
 *   それまでは同じ大きさの欄が12個縦に並ぶだけで、
 *   「いつ会って、いまどうなっているか」を知るのに欄を1つずつ読む必要があった */
.psum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.pchip {
  font: 600 12px/1.75 var(--sans); padding: 3px 10px; border-radius: 999px;
  background: var(--rule); color: var(--ink);
}
.pchip.on { background: var(--accent-soft); color: var(--accent); }
.pchip.dim { background: none; border: 1px solid var(--line); color: var(--dim); }

/* 節の見出し。**この画面に何の節があるか**を先に見せる */
.phead {
  margin: 22px 0 2px; font: 700 12px/1.6 var(--sans); color: var(--dim);
  letter-spacing: .06em; border-top: 1px solid var(--rule); padding-top: 14px;
}
/* ★カラムの先頭に来る見出しには線を引かない（区切る相手が上に無い） */
.pcol > .phead:first-child, .pcol > .notes:first-child, .pcol > .whos:first-child {
  margin-top: 0; border-top: 0; padding-top: 0;
}

/* ★短い欄は**2つ並べる**。契約「なし」と会社名が同じ幅で並ぶのは、
 *   大事さの差が消えるだけで良いことが1つも無い。
 *   長い欄（企業・HP・メモ）だけ1行まるごと使う */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pgrid > .wide { grid-column: 1 / -1; }
.pstamp { margin: 4px 0 0; font: 500 13px/1.9 var(--mono); color: var(--dim); }
/* ★中央の広いモーダル（2026-09-11 指示「詳細ページのデザインがダサい／いい modal に」）。
 * 幅 30rem の引き出しに全部を縦一列で積んでいたので、
 * **議事録に辿り着くまで 2,000px 以上スクロール**していた。
 * 地は少し濃くして、後ろの表を「奥にあるもの」に落とす（前は表の文字が透けて読めた） */
#panel {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(20, 25, 38, .52);
  display: grid; place-items: center;
  padding: clamp(0px, 3vh, 28px) clamp(0px, 3vw, 28px);
}
/* ★見出しを sticky ＋ 負マージンで貼っていたのをやめた（2026-09-07）。
 * **見出しの高さが会社名の折り返しで変わるため、先頭の欄のラベルが
 *   ちょうど隠れていた**（実測で 10px 重なっていた）。
 * 縦の flex にして「動かない見出し」と「スクロールする中身」に分ければ、
 * 見出しが何行になっても重ならない */
#panel > .inner {
  width: min(100%, 68rem); height: min(100%, 88svh); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 0; display: flex; flex-direction: column;
}

/* ★左右に分ける。左＝この会社そのもの、右＝時系列。
 * **別々にスクロールする** —— 片方が長くても、もう片方は上に残る
 * （会議のあとに議事録を書きながら、会社の状態を見返せる） */
/* ★名刺の取り込み（cardBlock）は今も左右2カラム。**こちらの規則は残す** */
.pcols {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
}
.pcols.one { grid-template-columns: 1fr; }
.pcols.one .pright { display: none; }
.pcol { min-width: 0; overflow-y: auto; padding: 16px clamp(14px, 2vw, 22px) 24px; }
/* 左は少し沈めて、右（書く場所）を前に出す */
.pleft { border-right: 1px solid var(--line); background: #fafbfd; }

/* ── 行を開いた先はタブ（2026-09-14 指示）────────────────────
 * ★**開く理由は毎回1つしか無い。** 議事録を書く／反社を見る／属性を直す。
 *   左右に分けると、どちらの列も半分の幅になって**どちらも書きにくい**。
 * ★タブの器は grid を上書きして縦積みに戻す（.pcols は名刺の取り込みと共有しているので、
 *   あちらの2カラムを壊さないよう**タブがあるときだけ**当てる） */
.pcols:has(> .ptabs) { display: flex; flex-direction: column; }
.ppanes { flex: 1 1 auto; min-height: 0; display: flex; }
.ppane { flex: 1 1 auto; }

/* ★**タブの形そのものにする**（2026-09-14 指示「全然タブ感ない」）。
 * 下線だけで示していたが、白い面の上に文字が3つ並んでいるようにしか見えなかった。
 * ★**地を沈めて、選ばれている1枚だけを紙として浮かせる。**
 *   選ばれたタブは下辺を本文と同じ色で塗りつぶして**繋げる** ——
 *   これが「いま開いている紙」に見える理由で、下線1本では出せない。 */
/* ★**表／ボードの切替と同じ形にした**（2026-09-14）。
 * 紙の形（上だけ角丸の枠）にしたら**帯が2段になって重かった。**
 * 上のチップ列と合わせて、色の付いた小さいものが横に2列並ぶ画面になる。
 * この画面には**既に通っている言い方が1つある** —— 地を1枚敷いて、
 * 選ばれた側だけ白く浮かせる。同じものを2通りで表さない。 */
.ptabs {
  flex: none; align-self: flex-start; display: flex; gap: 3px; align-items: center;
  margin: 12px clamp(14px, 2vw, 22px);
  padding: 3px; background: var(--rule); border-radius: 11px;
  max-width: calc(100% - 2 * clamp(14px, 2vw, 22px)); overflow-x: auto;
}
.ptab {
  cursor: pointer; white-space: nowrap; border: 0; background: none;
  border-radius: 8px; padding: 8px 15px;
  font: 600 13px/1 var(--sans); color: var(--dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.ptab:hover { color: var(--ink); }
.ptab.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
/* 本文との境目は**髪の毛1本**だけ。枠で囲うと、また器が増える */
.ppanes { border-top: 1px solid var(--rule); }
/* ★件数は**素の数字**にする（2026-09-14）。地を敷いたピルにすると、
 * タブ自体もピルなので**ピルの中にピル**が入って、それだけで騒がしくなる。
 * 0件のときは付けない（app.js 側で判断している） */
.ptabn {
  font: 600 11.5px/1 var(--mono); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ptab.on .ptabn { color: var(--accent); }
/* ★タブ「反社チェック」の文字色は変えない（2026-10-02 指示）。赤・黄はタブの中の右上のスコア（.scscore）が言う */

/* ★モーダルの中の欄は**詰める**（2026-09-11）。
 * 画面いっぱいの引き出しだった頃の大きさのままだと、
 * 12個の欄が並ぶ左カラムが**入力フォームそのもの**に見える。
 * 読むのが主で、直すのは時々 —— ラベルは小さく、欄は低く */
.pcol label { margin-top: 12px; font-size: 11.5px; }
.pcol input[type=text], .pcol input[type=email], .pcol input[type=date],
.pcol select, .pcol textarea { padding: 8px 10px; font-size: 13.5px; }
.pcol .pgrid { gap: 0 10px; }
/* カテゴリーの選択肢は**表と同じ色**にする（開いた先で別物に見えない） */
.catopt { font-size: 13px; }
/* パネルの見出し。**閉じる出口を常に見えるところに置く** */
.panelhead {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel);
  padding: 16px clamp(14px, 2vw, 22px) 14px;
  border-bottom: 1px solid var(--line);
}
.panelttl { flex: 1 1 auto; min-width: 0; }
/* ★会社名は1行で省略する。「株式会社◯◯ — 反社チェック」を1つの見出しに
 * 詰めていたので「反社チ／ェック」と語の途中で折り返していた。
 * 何の用で開いたかは下の小さい行に分ける */
.panelhead h2 {
  margin: 0; font-size: 20px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 見出しの中のチップ。**開いた瞬間に状態が読める**（欄を1つずつ読まなくていい） */
.panelhead .psum { margin-top: 8px; }
.panelsub { margin: 2px 0 0; font-size: 12px; color: var(--dim); }
.panelhead .btn { flex: 0 0 auto; }
/* ★反社チェックのタブの中。**右上に安全度スコアを数字1つ**（2026-10-02 指示「スコアを目立たせたい」）。
 * 左は節の見出し。色は表の列（.screenbtn）と同じ3段 —— 同じ会社が表と開いた先で別の色にならない */
.schead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.scleft { flex: 1 1 auto; min-width: 0; }
.scleft label { margin-top: 0; }
.scstatus { width: 12rem; max-width: 100%; }
/* 材料の節。上（人が決めて書く）と線で区切る */
.scmat { margin-top: 22px; border-top: 1px solid var(--rule); padding-top: 14px; }
.scmat .schead { align-items: center; margin-bottom: 0; }
.scsub { margin: 0; font: 700 12px/1.6 var(--sans); color: var(--dim); letter-spacing: .06em; }
.scmat .btn { margin: 0; padding: 7px 13px; font-size: 13px; }
.scmat .ai { margin-top: 14px; }
.scscore {
  margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px;
  background: #fafbfc; color: var(--ink); text-align: right;
}
.scscore .k { font-size: 10.5px; line-height: 1.2; color: var(--dim); letter-spacing: .04em; }
.scscore .v { font: 700 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.scscore.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.scscore.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.scscore.ng { background: var(--red-bg); border-color: transparent; color: var(--red); }
.scscore.ok .k, .scscore.warn .k, .scscore.ng .k { color: inherit; opacity: .8; }
#panelBody { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; display: flex; }
#panelBody > .pcols { flex: 1 1 auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notes { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 16px; }
/* 節の見出しは**同じ大きさ・同じ字間**で揃える（もらった名刺／議事録／ネクストアクション／メモ） */
.notes h3, .whos h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: .01em; }
.notes > .hint, .whos > .hint { margin: 0 0 12px; }
.note { border-left: 2px solid var(--accent-soft); padding: 2px 0 2px 10px; margin: 10px 0; }
.note .when { font: 600 11px/1.8 var(--sans); letter-spacing: .08em; color: var(--dim); }
.note .body { white-space: pre-wrap; }

/* ★議事録の本文（2026-09-08）。**中身をここに書く**ので、1行の欄では足りない。
 * 罫線を薄く残すのは、読むだけの文と「直せる欄」を見分けられるようにするため */
.notebody {
  width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 10px; background: #fdfdfe;
  font-size: 14px; line-height: 1.8; resize: vertical;
}
.notebody:focus { background: #fff; }
.notebody.saving { background: var(--accent-soft); }
.notebody.saved { box-shadow: inset 3px 0 0 var(--accent); }
.notefoot { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.notelink { color: var(--accent); font-size: 13px; }

/* ── 次アクション（パネル側）。**ここが本体**（表に出るのは1本だけ）── */
.acts .act {
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--rule); padding: 7px 0;
}
.acts .act.over { box-shadow: inset 3px 0 0 var(--red); padding-left: 8px; }
.acts .act.today { box-shadow: inset 3px 0 0 var(--warn); padding-left: 8px; }
.acts .actbody { flex: 1 1 auto; min-width: 0; margin: 0; padding: 7px 9px; }
.acts .actwho { flex: 0 0 7rem; margin: 0; padding: 7px 6px; }
.acts input[type=date].actdue { flex: 0 0 8.5rem; margin: 0; padding: 7px 6px; }
.acts .act .link { flex: 0 0 auto; }
.acts .act.off2 { color: var(--dim); }
.acts .act.off2 .actbodytext { flex: 1 1 auto; text-decoration: line-through; }
.acts .act.off2 .actwhotext { flex: 0 0 auto; font-size: 12px; }
.acts .act.off2 .when { flex: 0 0 auto; font: 600 11px/1.8 var(--mono); color: var(--dim); }
.actdonebox > summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 8px 0; }
.linkmsg { min-height: 1.2em; margin: 8px 0 0; color: var(--accent); }

/* AI が集めてきた材料。**判定ではなく材料**なので、答えらしく見せない */
.ai { margin-top: 12px; }
.aihead { font: 600 11px/1.9 var(--mono); letter-spacing: .08em; color: var(--dim); }
.aihead .warnline { color: var(--warn); }
.aitext {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--sans); font-size: 14px; line-height: 1.8;
  background: #f8f9fb; border-left: 2px solid var(--line);
  border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 8px 0;
}
/* ★AIの全文は 3,000px ある。開いたまま置くと**その下の議事録に永久に届かない**。
 * 消さずに畳む —— 反社チェックの印から開いたとき（＝判断しに来たとき）は開いたまま出す */
.aifull > summary {
  cursor: pointer; color: var(--accent); font-size: 13px;
  padding: 6px 0; list-style-position: inside;
}
.aifull > summary:hover { text-decoration: underline; }
.ai ul { margin: 4px 0 0; padding-left: 1.2em; }
.ai li { font-size: 13px; }
.ai a { color: var(--accent); word-break: break-all; }
.hint { color: var(--dim); font-size: 13px; }

#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-size: 13px;
}

/* ── 表の見出し行を上に貼る（広い画面）─────────────────
 * ★1ページ50行あるので、少し下げると**列名が消えて
 *   「なし」「未」「要確認 100」だけが並ぶ画面**になっていた。
 * 見出しを貼るには表の中で縦にスクロールさせる必要がある
 * （`.wrap` は overflow-x:auto なので、これが縦のスクロール枠にもなる）。
 * 高さは決め打ちにせず、残りをそのまま渡す＝画面の高さが変わっても合う。
 * ついでに KPI と絞り込みも常に見えるようになり、
 * 「＋会社を追加」で表の一番上へ戻る動きも初めて実際に効く */
@media (min-width: 901px) {
  #app { height: 100svh; }
  #side { flex: none; }
  #main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  body:has(#viewTable:not([hidden])) #main { overflow-y: hidden; }
  #viewTable { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .tablecard { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 14px; }
  .tablecard > .bar, .tablecard > .views { flex: none; }
  .wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  th { position: sticky; top: 0; z-index: 13; }
  th.sticky { z-index: 15; }   /* 左に貼る企業列 × 上に貼る見出し の交点 */
}

/* ── 狭い画面 ───────────────────────────────────────── */
@media (max-width: 900px) {
  /* 帯は狭い画面でも同じ形。**中身が入り切らないときだけ横に流す** */
  #side { gap: 10px; overflow-x: auto; }
  #side .cap, #side #wsNav { display: none; }
  #side .logo { font-size: 14px; white-space: nowrap; }
  .side-foot { margin: 0 0 0 auto; flex-direction: row; border: 0; padding: 0; gap: 0; }
  .side-foot .wsitem { padding: 6px 8px; white-space: nowrap; }
  #wsPick { display: block; }
}
/* ★狭い画面は1カラム。**左右に分ける余地が無い** */
@media (max-width: 900px) {
  #panel { padding: 0; }
  #panel > .inner { width: 100%; height: 100%; border-radius: 0; border: 0; }
  #panelBody { overflow: auto; display: block; }
  .pcols { display: block; }
  .pcol { overflow: visible; padding: 14px; }
  .pleft { border-right: 0; border-bottom: 1px solid var(--rule); background: var(--panel); }
}

@media (max-width: 520px) {
  /* ★狭い画面でも上の帯と表の端は揃える（2026-09-11 指示） */
  :root { --gut: 8px; }
  .sheet > .inner { max-height: 96svh; }
  .row2 { grid-template-columns: 1fr; }
  /* ★検索を一番上に置いていたが、**スマホで開く理由は「名刺から入れる」**。
   * 押すものを先に、探すものを次の行にする（幅いっぱいなので行は増えない） */
  /* ★狭い画面では**探すを1行使って**置く（2026-09-11）。
   * 20vw では 80px しかなく、打っている文字が2文字しか見えない */
  .tools .qbox { order: 1; width: 100%; }
  .tools .qbox #q { width: 100%; }
  .page { padding-top: 10px; }
  .page h1 { font-size: 17px; }
  .page .sub { display: none; }
  .tablecard { margin: 12px var(--gut) 32px; }
  /* ★企業の列を詰める。PC の幅のままだと 390px がほぼ企業名だけで埋まり、
   * **「並べて比べる」というこの道具の唯一の値打ちが成立しない**（前版の下見で実測） */
  [data-k="company"] { width: 10.5rem; }
  [data-k="notes"] { width: 7rem; }
  [data-k="next_action"] { width: 11rem; }
  [data-k="screen_status"] { width: 5.2rem; }
  th, td { font-size: 13px; max-width: 12rem; }
  input.cell, select.cell { font-size: 13px; }
  /* 帯は横に流す。**流れることが見えていないと、右端に辿り着けない** */
  .tools {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .bar .spacer { display: none; }
  .bar .btn { padding: 7px 10px; font-size: 13px; }

  /* ── スマホでは名刺が主役 ──────────────────────────────
   * 外で名刺をもらって、その場で入れる。**それがスマホで開く唯一の理由**なので、
   * 一番押しやすいものを名刺にする。手打ちの「＋会社を追加」は残すが控えめに */
  .cardbtn { background: var(--accent); border-color: var(--accent); color: #fff; }
  .cardbtn:hover { color: #fff; }
  #btnAdd { background: #fff; border-color: var(--line); color: var(--ink); }
  /* CSV は**スマホで書き出さない**。ボタン3つが折り返して2段になるほうが邪魔 */
  #btnCsv { display: none; }
  /* 追加行の説明は畳んで、入口だけ残す（幅が無いので文が2行を占める） */
  #viewCards #cardsQ { width: 100%; order: 1; }
  .cardswrap { padding-bottom: 32px; }
  /* 名刺の一覧は2段に畳む。**名前と会社を先に、連絡先はその下**。列の見出しは要らない */
  .mhead { display: none; }
  .mrow { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; }
  .mthumb { width: 64px; height: 39px; grid-row: span 2; align-self: start; }
  .mcontact { grid-column: 2 / 4; flex-direction: row; flex-wrap: wrap; gap: 0 12px; }
  .mside { grid-row: 1; grid-column: 3; }
  .mmain .org { white-space: normal; }   /* 狭い幅で切ると会社名が読めない */
  /* シートは全幅。**上の角だけ丸め**て、下は画面の端まで使う */
  .cardsheet { max-width: none; border-radius: var(--r) var(--r) 0 0; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ── カテゴリー（複数）──────────────────────────────────
 * ★セルは**今付いているものを読む場所**。押すと専用の面が開く（2026-09-10）。
 *   セルの中で選択肢を広げる作りは、長文のメモで4回やり直して全部だめだった。
 * ★チップは**折り返さない。** 行の高さが行ごとに変わると、表として横に読めなくなる
 *   （次アクションを1本だけ出しているのと同じ理由）。入り切らないぶんは吹き出しで読む */
.catcell {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 4px 5px; border-radius: 8px; overflow: hidden; white-space: nowrap;
}
.catcell:hover { background: var(--accent-soft); }
.catchip {
  flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: var(--chip, #f1f2f5); color: var(--ink);
  border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600;
}
/* 会社を追加の面。「または」は**2つの入れ方の境目**（どちらでもよい、と分かる） */
.addor {
  text-align: center; color: var(--dim); margin: 16px 0 12px;
  font: 600 10px/1 var(--mono); letter-spacing: .2em;
  display: flex; align-items: center; gap: 10px;
}
.addor::before, .addor::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rule); }

/* ★カテゴリーごとに色（2026-09-11 指示）。**薄い地に濃い文字**にする ——
 * ステータスと反社チェックの色（判断に効く色）より前に出ないように、彩度を抑える。
 * 番号は schema.js の CATEGORIES の並び順（catNo）。**語を足すときは末尾に足す** */
.cat0 { background: #e8edfb; color: #33489f; }   /* 事業会社 */
.cat1 { background: #e6f4ee; color: #256b53; }   /* 代理店 */
.cat2 { background: #f0e9f8; color: #63407c; }   /* VC */
.cat3 { background: #fdeaf0; color: #96395a; }   /* エンジェル */
.cat4 { background: #fdefe1; color: #8a531b; }   /* ブランド */
.cat5 { background: #fdf6de; color: #7a5f14; }   /* テナント */
.cat6 { background: #e2f3f6; color: #1f6472; }   /* キュレーター */
.cat7 { background: #eef0f4; color: #55606f; }   /* その他 */
.catchip.none { background: none; color: #c9ccd3; font-weight: 400; padding-left: 2px; }
/* 詳細パネルの要約チップも同じ色で揃える（表と開いた先で色が違うと別物に見える） */
.pchip.cat0 { background: #e8edfb; color: #33489f; }
.pchip.cat1 { background: #e6f4ee; color: #256b53; }
.pchip.cat2 { background: #f0e9f8; color: #63407c; }
.pchip.cat3 { background: #fdeaf0; color: #96395a; }
.pchip.cat4 { background: #fdefe1; color: #8a531b; }
.pchip.cat5 { background: #fdf6de; color: #7a5f14; }
.pchip.cat6 { background: #e2f3f6; color: #1f6472; }
.pchip.cat7 { background: #eef0f4; color: #55606f; }
.catcell:hover .catchip.none { color: var(--accent); }

/* 開いた先（詳細パネル）のカテゴリー。**面をもう1枚重ねない**ので、ここは並べて出す */
.catpick { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 2px; }
.catopt { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.catopt input { width: auto; margin: 0; }

/* HP が空の行に出す「探す」。**会社名から1本だけ探して入れる**（2026-09-10 指示）。
 * 空欄のまま30行放置されていたのは、1行ずつ検索して貼る手が誰にも回らなかったため */
.findbtn {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel);
  color: var(--dim); border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; white-space: nowrap;
}
.findbtn:hover { border-color: var(--accent); color: var(--accent); }
.findbtn:disabled { opacity: .5; cursor: default; }

/* 詳細パネルのメモ。**議事録より下**（2026-09-10 指示「議事録はメモの前」）。
 * 保存釦は持たない —— 欄から離れたら保存する（表のセルと同じ作法） */
.memobody { width: 100%; }
.memobody.saving { opacity: .6; }
.memobody.saved { border-color: var(--ok); }


/* ── 担当者は名前を色分けする（2026-09-10 指示）─────────────
 * 丸い顔印は表から外した。47行に同じ丸が縦に並んでも、結局どの行が誰かは
 * **隣の文字を読んで**判断していた（印は場所を取るだけだった）。
 * 色を文字に移すと、縦に流すだけで担当が切り替わる場所が見える。
 * ★**背景は塗らない。** 色の付いた面はステータスと反社チェックだけに残す ——
 *   全列に色を撒くと、警告（反社が未のまま契約が進む等）が背景に沈む。
 * ★色は丸印と同じ数え方（名前のハッシュ）で決まるので、**同じ人はどこでも同じ色。**
 *   ただし**文字用に濃くしてある** —— 丸の中は白文字が乗る前提の色で、
 *   そのまま文字にすると緑と橙が地に負ける（4.5:1 を切る。セルフテスト18） */
.cell.owner { font-weight: 600; }
/* ★担当者も**色の付いた面**にする（2026-09-14 指示「カテゴリーと同じように色を変えて」）。
 * 2026-09-10 には「背景は塗らない。色の付いた面はステータスと反社だけ」と決めていたが、
 * 隣にカテゴリーの chip が並ぶようになったぶん、**色の付いた面のほうが先に目に入る**ので、
 * 文字の色だけの担当者は縦に読んでも切れ目が見えなかった。
 * ★色の決め方は今までどおり**名前のハッシュ**（hueNo）。**同じ人はどの画面でも同じ色。**
 * ★彩度はカテゴリーと同じ水準に抑える —— ステータスと反社（判断に効く色）より前に出さない */
select.cell.owner {
  border-radius: 999px; padding: 4px 10px; width: auto; max-width: 100%;
  font-size: 12.5px; text-align: center;
}
.owner.o0 { background: #e6ecfb; color: #2f47ad; }
.owner.o1 { background: #e4f2ec; color: #24674f; }
/* o2 は**はっきりした橙**にする（担当者の指定色。ブランドの chip より一段濃い） */
.owner.o2 { background: #ffe9d2; color: #9a4f12; }
.owner.o3 { background: #f1e9f8; color: #6a3d86; }
.owner.o4 { background: #fce9ef; color: #963253; }
.owner.o5 { background: #e2f1f4; color: #1f6472; }
.owner.o6 { background: #fbf3dc; color: #775c12; }
.owner.o7 { background: #ecEEF2; color: #4e5867; }
/* ボードのカードの中でも同じ色。**表と見比べたときに同じ人が同じ色**でないと意味が無い */
.bowner { border-radius: 999px; padding: 1px 7px; font-size: 11.5px; }
/* 担当者なしは薄いまま（色を持たない＝誰も付いていない、が読める）。
 * ★`:not([class*="o"])` とは書かない —— **クラス名の "owner" 自身に o が入っている**ので、
 *   その条件はどの行でも成立しない（書いた直後に気づいた） */
.cell.owner.empty { background: none; color: var(--dim); font-weight: 400; }