/* ==========================================================================
   バリューボックス デザインシステム — 部品（base.css）
   tokens.css の後に読む。クラスはすべて vb- 接頭辞（BEM：vb-部品__要素--形）。
   見本で静的に状態を見せるため、:hover / :active と同じ見た目を
   .is-hover / .is-press / .is-selected / .is-loading / .is-error でも出す。
   ========================================================================== */

/* ---- 土台 ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--vb-text-body);
  color: var(--vb-ink);
  min-height: 100vh;
  background: var(--vb-bg-grad);
  background-attachment: fixed;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vb-primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
/* 焦点の輪の既定（決定 52）：キーボードの焦点に外側の輪を 1 つ。部品ごとの指定が後ろで上書きする。box-shadow: none は製品の枠で先に読む style.css の輪を消すため（二重になる） */
:focus-visible { outline: var(--vb-focus-outline); outline-offset: 0; box-shadow: none; }
.vb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 文字の役 */
.vb-h1 { font: var(--vb-text-h1); letter-spacing: .01em; color: var(--vb-ink); }
.vb-h2 { font: var(--vb-text-h2); letter-spacing: .02em; color: var(--vb-ink); }
.vb-h3 { font: var(--vb-text-h3); color: var(--vb-ink); }
.vb-h4 { font: var(--vb-text-h4); color: var(--vb-ink); }
.vb-muted { color: var(--vb-ink-3); }
.vb-sm { font: var(--vb-text-sm); }
.vb-caption { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-num { font-variant-numeric: tabular-nums; }
.vb-mono { font-family: var(--vb-font-mono); }

/* ---- アイコン（Lucide の線。catalog.js が <i data-i="名前"> を SVG に置き換える） */
.vb-i { display: inline-flex; flex: none; width: var(--vb-icon); height: var(--vb-icon); align-items: center; justify-content: center; }
.vb-i svg { width: 100%; height: 100%; stroke-width: 1.85; }
.vb-i--sm { width: var(--vb-icon-sm); height: var(--vb-icon-sm); }
/* 乙の機能アイコン（機能を表す所＝ページ見出し・カードの題名・種類の行。押す操作は .vb-i）。SVG はページに埋め込む（色の変数を効かせるため）。
   大きさは --48・--32・--28・--24。24px 以下は線を 3（＝1.5px）にする */
.vb-fi { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; --vb-icon-stroke: 2; }
.vb-fi svg { display: block; width: 100%; height: 100%; }
.vb-fi--48 { width: 48px; height: 48px; }
.vb-fi--32 { width: 32px; height: 32px; }
.vb-fi--28 { width: 28px; height: 28px; }
.vb-fi--24 { width: 24px; height: 24px; --vb-icon-stroke: 3; }
.vb-i--lg { width: var(--vb-icon-lg); height: var(--vb-icon-lg); }
.vb-i--xl { width: 28px; height: 28px; }
.vb-i--xl svg { stroke-width: 1.7; }

/* ==========================================================================
   P01・P03 ボタン（主・副・文字・危険）
   ========================================================================== */
.vb-btn {
  --_h: var(--vb-control-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--_h); min-width: var(--_h); padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--vb-radius-sm);
  font: 700 12.5px/1 var(--vb-font); white-space: nowrap;
  transition: transform var(--vb-dur-instant) var(--vb-ease), background var(--vb-dur) var(--vb-ease), border-color var(--vb-dur) var(--vb-ease), box-shadow var(--vb-dur) var(--vb-ease), color var(--vb-dur) var(--vb-ease);
  position: relative; text-decoration: none; user-select: none;
}
.vb-btn:hover { text-decoration: none; }
.vb-btn .vb-i { width: 15px; height: 15px; }
.vb-btn:active, .vb-btn.is-press { transform: translateY(1px) scale(0.98); }
.vb-btn--sm { --_h: var(--vb-control-h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--vb-radius-xs); }
.vb-btn--sm .vb-i { width: var(--vb-icon-sm); height: var(--vb-icon-sm); }
.vb-btn--lg { --_h: var(--vb-control-h-lg); padding: 0 22px; font-size: 15px; }
.vb-btn--block { display: flex; width: 100%; }

/* 主（1 画面に 1 つ） */
.vb-btn--primary { background: var(--vb-primary-btn-grad); color: #fff; box-shadow: var(--vb-shadow-btn-primary); }
.vb-btn--primary:hover, .vb-btn--primary.is-hover { background: var(--vb-primary-btn-grad); box-shadow: var(--vb-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.vb-btn--primary:active, .vb-btn--primary.is-press { background: var(--vb-primary-press); box-shadow: none; }
/* 副 */
.vb-btn--secondary { background: #fff; color: var(--vb-primary-strong); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--vb-primary); }
.vb-btn--secondary:hover, .vb-btn--secondary.is-hover { background: var(--vb-primary-soft); }
.vb-btn--secondary:active, .vb-btn--secondary.is-press { background: var(--vb-primary-soft-2); color: var(--vb-primary-ink); }
.vb-btn--secondary.is-selected { background: var(--vb-primary-soft); border-color: var(--vb-primary); color: var(--vb-primary-ink); }
/* 枠の紫（左ナビの［＋ 新規作成］） */
.vb-btn--outline { background: #fff; color: var(--vb-primary-strong); border-color: var(--vb-primary); }
.vb-btn--outline:hover, .vb-btn--outline.is-hover { background: var(--vb-primary-soft); }
.vb-btn--outline:active, .vb-btn--outline.is-press { background: var(--vb-primary-soft-2); }
/* 文字だけ */
.vb-btn--ghost { background: transparent; color: var(--vb-primary-strong); padding: 0 10px; }
.vb-btn--ghost:hover, .vb-btn--ghost.is-hover { background: var(--vb-primary-soft); }
.vb-btn--ghost:active, .vb-btn--ghost.is-press { background: var(--vb-primary-soft-2); }
.vb-btn--ghost.vb-btn--plain { color: var(--vb-ink-2); }
.vb-btn--ghost.vb-btn--plain:hover, .vb-btn--ghost.vb-btn--plain.is-hover { background: var(--vb-row-hover); }
/* 危険 */
.vb-btn--danger { background: var(--vb-danger-strong); color: #fff; }
.vb-btn--danger:hover, .vb-btn--danger.is-hover { background: #b1242a; }
.vb-btn--danger:active, .vb-btn--danger.is-press { background: #9c1f24; }
.vb-btn--danger-ghost { background: transparent; color: var(--vb-danger-ink); }
.vb-btn--danger-ghost:hover, .vb-btn--danger-ghost.is-hover { background: var(--vb-danger-bg); }
/* フォーカス */
.vb-btn:focus-visible, .vb-btn.is-focus { outline: none; box-shadow: var(--vb-focus-ring); }
/* 無効 */
.vb-btn:disabled, .vb-btn.is-disabled { background: var(--vb-surface-3); color: var(--vb-ink-4); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.vb-btn--ghost:disabled, .vb-btn--ghost.is-disabled { background: transparent; }
/* 読み込み中（幅を変えずに文字を消して円を出す） */
.vb-btn.is-loading { color: transparent !important; pointer-events: none; }
.vb-btn.is-loading .vb-i { opacity: 0; }
.vb-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255,255,255,.95) rgba(255,255,255,.95) rgba(255,255,255,.35) rgba(255,255,255,.35);
  animation: vb-spin .8s linear infinite;
}
.vb-btn--secondary.is-loading::after, .vb-btn--ghost.is-loading::after, .vb-btn--outline.is-loading::after { border-color: var(--vb-primary) var(--vb-primary) var(--vb-primary-soft-2) var(--vb-primary-soft-2); }
@keyframes vb-spin { to { transform: rotate(360deg); } }

/* ---- P02 アイコンだけのボタン（正方形・名前はツールチップ） ------------- */
.vb-iconbtn {
  --_s: var(--vb-control-h);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--_s); height: var(--_s); padding: 0;
  border: 1px solid transparent; border-radius: var(--vb-radius-sm);
  background: transparent; color: var(--vb-ink-2); position: relative;
  transition: background var(--vb-dur) var(--vb-ease), color var(--vb-dur) var(--vb-ease);
}
.vb-iconbtn::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--vb-hit); height: var(--vb-hit); transform: translate(-50%, -50%); }
.vb-iconbtn:hover, .vb-iconbtn.is-hover { background: var(--vb-row-hover); color: var(--vb-ink); }
.vb-iconbtn:active, .vb-iconbtn.is-press { background: var(--vb-surface-3); }
.vb-iconbtn.is-selected, .vb-iconbtn[aria-pressed="true"] { background: var(--vb-primary-soft); color: var(--vb-primary-ink); }
.vb-iconbtn:disabled, .vb-iconbtn.is-disabled { color: var(--vb-ink-4); background: transparent; cursor: not-allowed; }
.vb-iconbtn:focus-visible, .vb-iconbtn.is-focus { outline: none; box-shadow: var(--vb-focus-ring); }
.vb-iconbtn--sm { --_s: var(--vb-control-h-sm); border-radius: var(--vb-radius-xs); }
.vb-iconbtn--sm .vb-i { width: var(--vb-icon-sm); height: var(--vb-icon-sm); }
.vb-iconbtn--boxed { background: #fff; border-color: var(--vb-control-line); }
.vb-iconbtn--boxed:hover, .vb-iconbtn--boxed.is-hover { background: var(--vb-row-hover); border-color: var(--vb-control-line-hover); }
.vb-iconbtn--round { border-radius: 50%; }

/* ---- P04 分割ボタン（よく使う方が左・ほかは ▾） ------------------------ */
.vb-split { display: inline-flex; position: relative; }
.vb-split > .vb-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.vb-split > .vb-btn + .vb-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0; width: var(--_h); min-width: 0; margin-left: 1px; }
.vb-split > .vb-btn--secondary + .vb-btn--secondary { margin-left: -1px; }
.vb-split .vb-menu { right: 0; top: calc(100% + 6px); }

/* ---- P05 コピーのボタン -------------------------------------------------- */
.vb-copy { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); background: var(--vb-surface-2); max-width: 100%; }
.vb-copy__text { font: var(--vb-text-sm); font-family: var(--vb-font-mono); color: var(--vb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vb-copy.is-done .vb-iconbtn { color: var(--vb-success-ink); }

/* ==========================================================================
   P65 メニュー（…）・P68 新規作成のメニュー・P75 会社の切替・P76 個人メニュー
   ========================================================================== */
.vb-menu {
  position: absolute; z-index: var(--vb-z-menu); min-width: 200px; max-width: 320px; padding: 6px;
  background: #fff; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); box-shadow: var(--vb-shadow-lift);
}
.vb-anchor { position: relative; }
.vb-menu--right { right: 0; top: calc(100% + 6px); }
.vb-menu--left { left: 0; top: calc(100% + 6px); }
.vb-menu--static { position: relative; z-index: auto; display: inline-block; }
.vb-menu[hidden] { display: none; }
.vb-menu__label { padding: 8px 10px 4px; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: var(--vb-radius-xs); background: transparent; text-align: left;
  font: 500 14px/1.35 var(--vb-font); color: var(--vb-ink); white-space: nowrap;
}
.vb-menu__item .vb-i { color: var(--vb-ink-3); width: 16px; height: 16px; }
.vb-menu__item:hover, .vb-menu__item.is-hover, .vb-menu__item:focus-visible { background: var(--vb-row-hover); outline: none; }
.vb-menu__item.is-selected { color: var(--vb-primary-ink); font-weight: 700; }
.vb-menu__item.is-selected .vb-menu__check { visibility: visible; }
.vb-menu__check { margin-left: auto; visibility: hidden; color: var(--vb-primary); }
.vb-menu__kbd { margin-left: auto; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-menu__item--danger, .vb-menu__item--danger .vb-i { color: var(--vb-danger-ink); }
.vb-menu__item--danger:hover, .vb-menu__item--danger.is-hover { background: var(--vb-danger-bg); }
.vb-menu__item[aria-disabled="true"] { color: var(--vb-ink-4); cursor: not-allowed; flex-wrap: wrap; row-gap: 0; }
.vb-menu__item[aria-disabled="true"]:hover { background: transparent; }
.vb-menu__why { flex-basis: 100%; padding-left: 26px; font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: normal; }
.vb-menu__sep { height: 1px; margin: 6px 4px; background: var(--vb-line-2); }
.vb-menu__search { padding: 4px 4px 6px; }
.vb-menu__scroll { max-height: 240px; overflow-y: auto; }

/* ---- P27 ツールチップ・区切り線 ----------------------------------------- */
.vb-tooltip {
  display: inline-block; max-width: 260px; padding: 6px 10px; border-radius: var(--vb-radius-xs);
  background: var(--vb-ink); color: #fff; font: 500 12px/1.45 var(--vb-font); box-shadow: var(--vb-shadow-panel);
}
.vb-tooltip--float { position: fixed; z-index: var(--vb-z-tooltip); pointer-events: none; }
.vb-divider { height: 1px; background: var(--vb-line-2); border: 0; margin: 16px 0; }
.vb-divider--v { width: 1px; height: 20px; margin: 0 8px; }

/* ==========================================================================
   入力（P06〜P21）
   ========================================================================== */
.vb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vb-field__label { font: 700 13px/1.4 var(--vb-font); color: var(--vb-ink); display: flex; align-items: center; gap: 6px; }
.vb-field__req { font: var(--vb-text-micro); color: var(--vb-danger-ink); }
.vb-field__help { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-field__error { font: 500 12px/1.45 var(--vb-font); color: var(--vb-danger-ink); display: flex; gap: 4px; align-items: flex-start; }
.vb-field__error .vb-i { width: 14px; height: 14px; margin-top: 2px; }

.vb-input, .vb-select, .vb-textarea {
  width: 100%; min-width: 0; height: var(--vb-control-h); padding: 0 12px;
  border: 0; border-radius: var(--vb-radius-xs); background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-line-strong);
  font: 400 14px/1.4 var(--vb-font); color: var(--vb-ink);
  transition: border-color var(--vb-dur) var(--vb-ease), box-shadow var(--vb-dur) var(--vb-ease);
}
.vb-input::placeholder, .vb-textarea::placeholder { color: var(--vb-ink-3); }
.vb-input:hover, .vb-select:hover, .vb-textarea:hover, .vb-input.is-hover { box-shadow: inset 0 0 0 1.5px var(--vb-ink-4); }
/* 焦点（決定 52）：枠の色を主色に・外側に輪を 1 つ。枠の太さは変えない。マウスで押した時も同じ（:focus） */
.vb-input:focus, .vb-select:focus, .vb-textarea:focus, .vb-input.is-focus, .vb-control.is-focus { outline: none; box-shadow: var(--vb-focus-field); }
/* 状態は内側の線（box-shadow）の色で出す（枠の線 border は 0。border-color を変えても見えない） */
.vb-input.is-error, .vb-select.is-error, .vb-textarea.is-error, .vb-input[aria-invalid="true"], .vb-select[aria-invalid="true"], .vb-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--vb-danger); }
.vb-input.is-error.is-focus, .vb-input.is-error:focus, .vb-select.is-error:focus, .vb-textarea.is-error:focus, .vb-input[aria-invalid="true"]:focus, .vb-select[aria-invalid="true"]:focus, .vb-textarea[aria-invalid="true"]:focus { box-shadow: var(--vb-focus-field-danger); }
.vb-input:disabled, .vb-select:disabled, .vb-textarea:disabled, .vb-input.is-disabled { background: var(--vb-surface-3); color: var(--vb-ink-4); box-shadow: inset 0 0 0 1.5px var(--vb-line-2); cursor: not-allowed; }
.vb-input[readonly] { background: var(--vb-surface-2); }
.vb-input--sm { height: var(--vb-control-h-sm); border-radius: var(--vb-radius-xs); font-size: 13px; }
.vb-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.vb-select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6990' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}

/* 入力欄の中にアイコン・単位を置く入れ物（.vb-control） */
.vb-control {
  display: flex; align-items: center; gap: 8px; height: var(--vb-control-h); padding: 0 12px; min-width: 0;
  border: 0; border-radius: var(--vb-radius-xs); background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-line-strong);
  transition: box-shadow var(--vb-dur) var(--vb-ease);
}
.vb-control:hover { box-shadow: inset 0 0 0 1.5px var(--vb-ink-4); }
/* 中に入力欄を抱えた箱：輪は箱だけ（:focus-within）。中の欄は下の「中の欄」の指定で何も足さない */
.vb-control:focus-within { box-shadow: var(--vb-focus-field); }
/* .vb-control の状態（.vb-input と同じ形。マウス・フォーカスより後ろに置いて勝たせる） */
.vb-control.is-error, .vb-control.is-error:hover, .vb-control:has(> [aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--vb-danger); }
.vb-control.is-error.is-focus, .vb-control.is-error:focus-within, .vb-control:has(> [aria-invalid="true"]):focus-within { box-shadow: var(--vb-focus-field-danger); }
.vb-control.is-disabled, .vb-control.is-disabled:hover { background: var(--vb-surface-3); color: var(--vb-ink-4); box-shadow: inset 0 0 0 1.5px var(--vb-line-2); cursor: not-allowed; }
.vb-control > input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; font: 400 14px/1.4 var(--vb-font); color: var(--vb-ink); }
.vb-control > input::placeholder { color: var(--vb-ink-3); }
/* 箱の中に部品の入力欄（.vb-input・.vb-select）を入れた時も、枠と輪は箱だけ。中の欄は枠・輪・背景を持たない（2026-10-27 オーナー「金額と期日のやつは外側のフォーカス線をアクティブにして、中のやつはなにもしない」） */
.vb-control > :is(.vb-input, .vb-select) { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.vb-control > :is(.vb-input, .vb-select):is(:hover, :focus, :focus-visible, .is-focus) { outline: none; box-shadow: none; border: 0; }
.vb-control > .vb-i { color: var(--vb-ink-3); }
.vb-control__affix { flex: none; font: 500 13px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; }
.vb-control__kbd, .vb-kbd { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--vb-line-2); border-radius: 6px; background: var(--vb-surface-2); font: 600 11px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; }
.vb-control--num > input { text-align: right; font-variant-numeric: tabular-nums; }
.vb-control--pill { border-radius: var(--vb-radius-pill); }
.vb-control--sm { height: var(--vb-control-h-sm); border-radius: var(--vb-radius-xs); }
.vb-control .vb-iconbtn { margin-right: -8px; }

/* パスワード・ワンタイムコード */
.vb-otp { display: flex; gap: 8px; }
.vb-otp input { flex: 1 1 0; min-width: 0; max-width: 44px; width: 44px; height: 52px; text-align: center; font: 700 20px/1 var(--vb-font); border: 0; border-radius: var(--vb-radius-xs); background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-line-strong); }
.vb-otp input:focus { outline: none; box-shadow: var(--vb-focus-field); }

/* フォームの段組み（2 列 → スマホ 1 列） */
.vb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.vb-form > .vb-field--full { grid-column: 1 / -1; }
.vb-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
@media (max-width: 767px) { .vb-form { grid-template-columns: minmax(0, 1fr); } }

/* P09 検索つき選択（combobox）・P11 人を選ぶ欄 */
.vb-combo { position: relative; min-width: 0; }
.vb-combo__trigger { width: 100%; justify-content: space-between; cursor: pointer; text-align: left; }
.vb-combo__value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 14px/1.4 var(--vb-font); }
.vb-combo__placeholder { color: var(--vb-ink-4); }
.vb-combo .vb-menu { left: 0; right: 0; top: calc(100% + 6px); max-width: none; }
.vb-option-person { display: flex; align-items: center; gap: 10px; }

/* P10 タグ入力（無ければその場で足せる） */
.vb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--vb-control-h); padding: 5px 8px; border: 0; border-radius: var(--vb-radius-xs); background: #fff; box-shadow: inset 0 0 0 1.5px var(--vb-line-strong); }
.vb-tags:focus-within, .vb-tags.is-focus { box-shadow: var(--vb-focus-field); }
.vb-tags input { flex: 1; min-width: 80px; border: 0; outline: 0; height: 28px; padding: 0 4px; background: transparent; }

/* P12 チェック・ラジオ・スイッチ */
.vb-check, .vb-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; font: 400 14px/1.4 var(--vb-font); }
.vb-check input, .vb-radio input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--vb-check-line); background: #fff; display: grid; place-content: center; cursor: pointer; transition: background var(--vb-dur-instant), border-color var(--vb-dur-instant); }
.vb-check input { border-radius: 5px; }
.vb-radio input { border-radius: 50%; }
.vb-check input:checked, .vb-check input:indeterminate { background: var(--vb-primary-strong); border-color: var(--vb-primary-strong); }
.vb-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.vb-check input:indeterminate::after { content: ""; width: 9px; height: 2px; background: #fff; border-radius: 2px; }
.vb-radio input:checked { border: 5px solid var(--vb-primary-strong); }
.vb-check input:hover, .vb-radio input:hover { border-color: var(--vb-primary); }
.vb-check input:focus-visible, .vb-radio input:focus-visible { outline: none; box-shadow: var(--vb-focus-ring); }
.vb-check input:disabled, .vb-radio input:disabled { background: var(--vb-surface-3); border-color: var(--vb-line-strong); cursor: not-allowed; }
.vb-check:has(input:disabled), .vb-radio:has(input:disabled) { color: var(--vb-ink-4); cursor: not-allowed; }
.vb-check.is-error input { border-color: var(--vb-danger); }

.vb-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 400 14px/1.4 var(--vb-font); }
.vb-switch input { appearance: none; flex: none; margin: 0; width: 38px; height: 22px; border-radius: 999px; background: #cbd0e0; position: relative; cursor: pointer; transition: background var(--vb-dur) var(--vb-ease); }
.vb-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--vb-dur) var(--vb-ease); }
.vb-switch input:checked { background: var(--vb-primary-strong); }
.vb-switch input:checked::after { transform: translateX(16px); }
.vb-switch input:focus-visible { outline: none; box-shadow: var(--vb-focus-ring); }
.vb-switch input:disabled { opacity: .45; cursor: not-allowed; }
.vb-switch:has(input:disabled) { color: var(--vb-ink-4); }

/* P13 スライダー（値を数字でも出す） */
.vb-slider { display: flex; align-items: center; gap: 12px; }
.vb-slider input[type=range] { flex: 1; min-width: 0; accent-color: var(--vb-primary-strong); height: 24px; }
.vb-slider__value { flex: none; min-width: 44px; text-align: right; font: 700 14px/1 var(--vb-font); font-variant-numeric: tabular-nums; }

/* P14 重要度の星（3 段・濃い橙） */
.vb-stars { display: inline-flex; gap: 2px; }
.vb-stars button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #cdd2e1; display: grid; place-items: center; border-radius: 6px; }
.vb-stars button.is-on { color: var(--vb-star); }
.vb-stars button.is-on svg { fill: currentColor; }
.vb-stars button:hover { background: var(--vb-row-hover); }
.vb-stars .vb-i { width: 18px; height: 18px; }

/* P15 日付・期間・日時（近道つき） */
.vb-date-pop { width: 296px; padding: 12px; }
.vb-date-pop__quick { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.vb-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vb-cal th { font: var(--vb-text-caption); color: var(--vb-ink-3); padding: 4px 0; }
.vb-cal td { padding: 1px; text-align: center; }
.vb-cal button { width: 34px; height: 32px; border: 0; border-radius: 8px; background: transparent; font: 500 13px/1 var(--vb-font); color: var(--vb-ink); font-variant-numeric: tabular-nums; }
.vb-cal button:hover { background: var(--vb-row-hover); }
.vb-cal .is-out button { color: var(--vb-ink-4); }
.vb-cal .is-today button { box-shadow: inset 0 0 0 1.5px var(--vb-primary); color: var(--vb-primary-ink); font-weight: 700; }
.vb-cal .is-selected button { background: var(--vb-primary-strong); color: #fff; font-weight: 700; }
.vb-cal .is-range button { background: var(--vb-primary-soft); border-radius: 0; }
.vb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font: 700 14px/1 var(--vb-font); }

/* P16 ファイルのアップロード */
.vb-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; border: 1.5px dashed #c6bdf0; border-radius: var(--vb-radius-md); background: #faf8ff; text-align: center; color: var(--vb-ink-2); }
.vb-drop.is-hover, .vb-drop.is-drag { border-color: var(--vb-primary); background: var(--vb-primary-soft); }
.vb-drop .vb-i { width: 28px; height: 28px; color: var(--vb-primary); }
.vb-drop__main { font: 700 14px/1.4 var(--vb-font); }
.vb-upload { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); background: #fff; min-width: 0; }
.vb-upload__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vb-upload__name { font: 500 13.5px/1.3 var(--vb-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-upload.is-error { border-color: var(--vb-danger-border, rgba(224,56,62,.35)); background: #fff8f8; }
.vb-upload.is-error .vb-upload__meta { color: var(--vb-danger-ink); }
.vb-upload__meta { font: var(--vb-text-caption); color: var(--vb-ink-3); }

/* P17 リッチテキスト */
.vb-rte { border: 1px solid var(--vb-control-line); border-radius: var(--vb-radius-sm); background: #fff; overflow: hidden; }
/* 輪は「中の欄」に焦点がある時だけ箱に出す。道具の行のボタンにキーボードで移った時は、そのボタンの輪だけ（箱の輪と二重にしない・決定 52） */
.vb-rte:has(textarea:focus), .vb-rte:has([contenteditable]:focus), .vb-rte:has(input:not([type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"]):focus), .vb-rte:has(select:focus), .vb-rte.is-focus { border-color: var(--vb-focus-line); box-shadow: var(--vb-focus-ring); }
.vb-rte__bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--vb-line-2); background: var(--vb-surface-2); overflow-x: auto; }
.vb-rte__area { min-height: 120px; padding: 12px 14px; outline: 0; }
.vb-prose { font: var(--vb-text-body); color: var(--vb-ink); }
.vb-prose h3 { font: var(--vb-text-h3); margin: 4px 0 8px; }
.vb-prose p + p, .vb-prose ul { margin-top: 8px; }
.vb-prose ul { list-style: disc; padding-left: 20px; }
.vb-prose a { text-decoration: underline; }

/* P19 書く欄（押すまで 1 行 → 宛先・本文・添付・送信） */
.vb-composer { border: 1px solid var(--vb-control-line); border-radius: var(--vb-radius-md); background: #fff; }
.vb-composer__collapsed { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 0; background: transparent; color: var(--vb-ink-3); text-align: left; border-radius: inherit; }
.vb-composer__collapsed:hover { background: var(--vb-row-hover); }
/* 開いただけでは輪を出さない。焦点が中にある時だけ箱に輪（決定 52）。中の［開く］の行は箱の輪だけ */
/* 輪は、枠の無い本文の欄（textarea）に焦点がある時だけ箱に出す。件名・差出人・Cc の欄（.vb-input・.vb-select）は枠のある別の欄なので、その欄そのものに輪（shadcn の Input と同じ）。
   ［添付］などのボタンにキーボードで移った時は、そのボタンの輪だけ（箱の輪と二重にしない）。畳んだ行は箱が輪を出す */
.vb-composer:has(textarea:not(.vb-textarea):focus), .vb-composer:has([contenteditable]:focus), .vb-composer:has(input:not(.vb-input, [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"]):focus), .vb-composer:has(.vb-composer__collapsed:focus-visible), .vb-composer.is-focus { border: 1px solid var(--vb-focus-line); box-shadow: var(--vb-focus-ring); }
.vb-composer__collapsed:focus-visible { outline: none; }
.vb-composer__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px 0; }
.vb-composer__to { font: var(--vb-text-sm); color: var(--vb-ink-3); white-space: nowrap; }
.vb-composer textarea { display: block; width: 100%; min-height: 84px; padding: 10px 14px; border: 0; outline: 0; resize: vertical; font: var(--vb-text-body); background: transparent; }
.vb-composer__foot { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 8px; }
.vb-composer__foot .vb-spacer { flex: 1; }
/* お客様へ届く宛先は枠を橙に（焦点に関係なく出す印）。焦点の輪も橙 */
.vb-composer--customer.is-open { border-color: var(--vb-warning); }
.vb-composer--customer:has(textarea:not(.vb-textarea):focus), .vb-composer--customer:has([contenteditable]:focus), .vb-composer--customer:has(input:not(.vb-input, [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"]):focus), .vb-composer--customer:has(.vb-composer__collapsed:focus-visible), .vb-composer--customer.is-focus { border: 1px solid var(--vb-warning); box-shadow: var(--vb-focus-ring-warning); }
.vb-composer__note { display: flex; align-items: center; gap: 6px; padding: 0 14px; font: var(--vb-text-caption); color: var(--vb-warning-ink); }
.vb-composer__note > span { min-width: 0; overflow-wrap: anywhere; }   /* 長いメールアドレスは折り返す（狭い幅で横にはみ出さない） */

/* 中に入力欄を抱えた箱の「中の欄」（決定 52）：輪と色の枠は箱だけに出す。中の欄は焦点で何も足さない（線が二重・三重に見えない）。
   箱：.vb-control（アイコン・単位つきの欄・検索つきの選択・日付）・.vb-tags・.vb-rte・.vb-composer（書く欄）・検索の窓（.vb-cmdk__input・.p-cmdk__field） */
:is(.vb-control, .vb-tags, .vb-rte, .vb-composer, .vb-cmdk__input, .p-cmdk__field) :is(input:not([type="checkbox"], [type="radio"]), textarea, select, [contenteditable]):not(.vb-input, .vb-select, .vb-textarea):is(:focus, :focus-visible) { outline: none; box-shadow: none; }

/* P20 その場の編集 */
.vb-inline { display: flex; align-items: center; gap: 4px; min-height: 34px; min-width: 0; }
.vb-inline__value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; margin-left: -8px; border-radius: var(--vb-radius-xs); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-inline__value .vb-inline__pen { margin-left: auto; color: var(--vb-ink-3); opacity: 0; transition: opacity var(--vb-dur); }
.vb-inline__value:hover, .vb-inline__value.is-hover { background: var(--vb-row-hover); }
.vb-inline__value:hover .vb-inline__pen, .vb-inline__value.is-hover .vb-inline__pen { opacity: 1; }
.vb-inline__empty { color: var(--vb-ink-4); }
.vb-inline .vb-input { height: 32px; border-radius: var(--vb-radius-xs); }
.vb-inline .vb-iconbtn { --_s: 32px; }

/* P21 コードの入力欄・P84 記録・コードの表示 */
.vb-code { display: flex; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); background: #fbfbfe; overflow: auto; font: 400 12.5px/1.65 var(--vb-font-mono); max-height: 260px; }
.vb-code__nums { flex: none; padding: 10px 8px; text-align: right; color: var(--vb-ink-4); background: var(--vb-surface-2); border-right: 1px solid var(--vb-line); user-select: none; }
.vb-code__body { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; white-space: pre; color: var(--vb-ink); }
.vb-code--wrap .vb-code__body { white-space: pre-wrap; word-break: break-all; }
.vb-code .tk-tag { color: #6d3bd1; } .vb-code .tk-attr { color: #2456c9; } .vb-code .tk-str { color: #17774a; } .vb-code .tk-com { color: var(--vb-ink-3); }
.vb-log__line.is-err { color: var(--vb-danger-ink); background: #fff5f5; display: block; }
.vb-log__more { display: block; margin: 0; padding: 6px 12px; border: 0; border-top: 1px dashed var(--vb-line-2); width: 100%; text-align: left; background: var(--vb-surface-2); font: var(--vb-text-caption); color: var(--vb-primary-ink); }

/* ==========================================================================
   表示（P22〜P53）
   ========================================================================== */

/* ---- P30 カードの面 ------------------------------------------------------ */
.vb-card { background: var(--vb-surface); -webkit-backdrop-filter: var(--vb-panel-blur); backdrop-filter: var(--vb-panel-blur); border-radius: var(--vb-radius-card); box-shadow: var(--vb-shadow-panel-edge); border: 0; min-width: 0; }
.vb-card--pad { padding: 20px 24px; }
.vb-card--flat { box-shadow: inset 0 0 0 1px var(--vb-line-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.vb-card--hover { transition: box-shadow var(--vb-dur) var(--vb-ease), transform var(--vb-dur) var(--vb-ease); cursor: pointer; }
.vb-card--hover:hover, .vb-card--hover.is-hover { box-shadow: var(--vb-shadow-lift); }
.vb-card__head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; min-width: 0; }
.vb-card__head .vb-h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-card__head > .vb-fi { width: 32px; height: 32px; margin-right: 2px; }
.vb-card__body { padding: 0 20px 18px; }
.vb-card__foot { padding: 12px 20px; border-top: 1px solid var(--vb-line); display: flex; align-items: center; gap: 8px; }
@media (max-width: 767px) { .vb-card--pad { padding: 16px; } .vb-card__head { padding: 14px 16px 10px; flex-wrap: wrap; row-gap: 6px; } .vb-card__head .vb-h3 { flex: 1 1 auto; } .vb-card__body { padding: 0 16px 16px; } }   /* 見出しの横に札・件数・操作が並んで見出しが「…」で省かれる所は、入らない物を次の行へ送る（見出しは自分の幅を確保する） */

/* ---- P24 状態の札（決定 1） --------------------------------------------- */
.vb-status {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--vb-radius-pill);
  font: 700 12px/1 var(--vb-font); white-space: nowrap; flex: none;
  background: var(--vb-neutral-bg); color: var(--vb-neutral-ink);
}
.vb-status--progress { background: var(--vb-primary-soft); color: var(--vb-primary-ink); }   /* 進行中 */
.vb-status--done     { background: var(--vb-success-bg); color: var(--vb-success-ink); }     /* 完了・入金済 */
.vb-status--hold     { background: var(--vb-neutral-bg); color: var(--vb-neutral-ink); }     /* 保留・下書き・未着手 */
.vb-status--info     { background: var(--vb-info-bg); color: var(--vb-info-ink); }           /* 発行済 */
.vb-status--danger   { background: var(--vb-danger-bg); color: var(--vb-danger-ink); }       /* 延滞・期限切れ */
.vb-status--warn     { background: var(--vb-warning-bg); color: var(--vb-warning-ink); }     /* 注意 */
.vb-status--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
button.vb-status { border: 0; cursor: pointer; }
button.vb-status:hover, .vb-status.is-hover { box-shadow: inset 0 0 0 1px currentColor; }
.vb-status .vb-i { width: 12px; height: 12px; }

/* 区分の札（状態でない物：既存・新規営業・休眠・潜在。白地に細い枠＝決定 2） */
.vb-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--vb-line-strong); border-radius: var(--vb-radius-xs); background: #fff; font: 600 12px/1 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; flex: none; }
/* 押して選ぶ札の選んだ状態（製品の開発の画面で作った形を戻した・2026-10-23） */
.vb-tag.is-on { border-color: var(--vb-primary); color: var(--vb-primary-ink); background: var(--vb-primary-soft); }
.vb-tag--soft { background: var(--vb-neutral-bg); border-color: transparent; color: var(--vb-neutral-ink); } /* 「関連」などの灰の小さな札 */
.vb-tag--ext { font-family: var(--vb-font-mono); font-size: 10.5px; height: 18px; padding: 0 5px; letter-spacing: .02em; }

/* ラベル（8 色の決まった組・淡い地＋濃い点） */
.vb-label { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: var(--vb-radius-pill); font: 600 12px/1 var(--vb-font); color: var(--vb-ink-2); background: var(--_bg, var(--vb-label-gray-bg)); white-space: nowrap; flex: none; }
.vb-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--_dot, var(--vb-label-gray)); }
.vb-label--purple { --_bg: var(--vb-label-purple-bg); --_dot: var(--vb-label-purple); }
.vb-label--blue   { --_bg: var(--vb-label-blue-bg);   --_dot: var(--vb-label-blue); }
.vb-label--teal   { --_bg: var(--vb-label-teal-bg);   --_dot: var(--vb-label-teal); }
.vb-label--green  { --_bg: var(--vb-label-green-bg);  --_dot: var(--vb-label-green); }
.vb-label--yellow { --_bg: var(--vb-label-yellow-bg); --_dot: var(--vb-label-yellow); }
.vb-label--orange { --_bg: var(--vb-label-orange-bg); --_dot: var(--vb-label-orange); }
.vb-label--pink   { --_bg: var(--vb-label-pink-bg);   --_dot: var(--vb-label-pink); }
.vb-label--gray   { --_bg: var(--vb-label-gray-bg);   --_dot: var(--vb-label-gray); }

/* 外部サービスの頭文字の四角（決定 7） */
.vb-brand { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; font: 800 14px/1 var(--vb-font); color: #fff; background: var(--_c, var(--vb-neutral)); }
.vb-brand--sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.vb-brand--github { --_c: #24292f; } .vb-brand--chatwork { --_c: #e3402c; } .vb-brand--slack { --_c: #4a154b; }
.vb-brand--figma { --_c: #a259ff; } .vb-brand--openai { --_c: #10a37f; } .vb-brand--anthropic { --_c: #c66a3d; } .vb-brand--google { --_c: #3b74e6; }
.vb-feature { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--vb-primary-soft); color: var(--vb-primary-ink); }

/* ---- P25 数のバッジ・点のバッジ（決定 16） ------------------------------- */
.vb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vb-primary-soft); color: var(--vb-primary-ink); font: 700 11.5px/1 var(--vb-font); font-variant-numeric: tabular-nums; flex: none; }
.vb-count--strong { background: var(--vb-primary-strong); color: #fff; }
.vb-count--zero { background: var(--vb-surface-3); color: var(--vb-ink-3); }
.vb-count--danger { background: var(--vb-danger-strong); color: #fff; }
.vb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vb-primary); flex: none; }
.vb-dot--danger { background: var(--vb-danger); }
.vb-with-badge { position: relative; display: inline-flex; }
.vb-with-badge > .vb-count { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; background: var(--vb-primary-strong); color: #fff; border: 2px solid #fff; box-sizing: content-box; }
.vb-with-badge > .vb-dot { position: absolute; top: -1px; right: -2px; border: 2px solid #fff; }

/* ---- P26 アバター・重ね -------------------------------------------------- */
.vb-avatar { --_s: 28px; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%; background: #ebe4fd; color: var(--vb-primary-ink); font: 700 calc(var(--_s) * .42)/1 var(--vb-font); overflow: hidden; }
.vb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vb-avatar--xs { --_s: 20px; } .vb-avatar--md { --_s: 34px; } .vb-avatar--sm { --_s: 24px; } .vb-avatar--lg { --_s: 40px; } .vb-avatar--xl { --_s: 56px; }
.vb-avatar--c2 { background: #dfeafd; color: #2456c9; } .vb-avatar--c3 { background: #def4ea; color: #17774a; } .vb-avatar--c4 { background: #fdeadb; color: #9a4a12; } .vb-avatar--c5 { background: #e9ebf3; color: #4a5778; }
.vb-avatar--square { border-radius: 14px; }
.vb-avatars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.vb-avatars > .vb-avatar { box-shadow: 0 0 0 2px #fff; }
.vb-avatars > .vb-avatar + .vb-avatar { margin-right: -6px; }
.vb-person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vb-person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- P22 選択式チップ・P23 絞り込みのチップ ------------------------------ */
.vb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.vb-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--vb-line-strong); border-radius: var(--vb-radius-pill); background: #fff; font: 500 12.5px/1 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; flex: none; }
.vb-chip:hover, .vb-chip.is-hover { background: var(--vb-row-hover); }
.vb-chip.is-selected, .vb-chip[aria-pressed="true"] { background: var(--vb-primary-soft); border-color: var(--vb-primary); color: var(--vb-primary-ink); }
.vb-chip:disabled, .vb-chip.is-disabled { color: var(--vb-ink-4); background: var(--vb-surface-2); cursor: not-allowed; }
.vb-chip .vb-i { width: 15px; height: 15px; }
.vb-filter { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--vb-primary-soft-2); border-radius: var(--vb-radius-xs); background: var(--vb-primary-soft); font: 600 13px/1 var(--vb-font); color: var(--vb-primary-ink); white-space: nowrap; flex: none; overflow: hidden; }
.vb-filter > * { display: inline-flex; align-items: center; height: 100%; padding: 0 8px; border: 0; background: transparent; color: inherit; font: inherit; white-space: nowrap; }
.vb-filter__key { color: var(--vb-ink-2); font-weight: 500; padding-right: 2px; }
.vb-filter__op { color: var(--vb-ink-3); font-weight: 500; padding: 0 4px; }
.vb-filter__op:hover, .vb-filter__val:hover, .vb-filter__x:hover { background: var(--vb-primary-soft-2); }
.vb-filter__x { width: 30px; justify-content: center; padding: 0; border-left: 1px solid var(--vb-primary-soft-2); }
.vb-filter__x .vb-i { width: 14px; height: 14px; }

/* ---- P28 ⓘ の補足・P29 人の簡易表示（吹き出し型） ---------------------- */
.vb-info { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vb-ink-3); flex: none; }
.vb-info:hover, .vb-info.is-hover { background: var(--vb-row-hover); color: var(--vb-primary-ink); }
.vb-info .vb-i { width: 16px; height: 16px; }
.vb-pop { position: absolute; z-index: var(--vb-z-menu); width: 280px; padding: 14px 16px; background: #fff; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-md); box-shadow: var(--vb-shadow-lift); font: var(--vb-text-sm); color: var(--vb-ink-2); }
.vb-pop--static { position: relative; z-index: auto; display: block; }
.vb-pop__title { font: var(--vb-text-h4); color: var(--vb-ink); margin-bottom: 4px; }
.vb-pop[hidden] { display: none; }
.vb-personpop { display: flex; gap: 12px; align-items: flex-start; }
.vb-personpop__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---- P31 リスト行 -------------------------------------------------------- */
.vb-list { display: flex; flex-direction: column; }
.vb-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--vb-line); cursor: pointer; position: relative; min-width: 0; color: inherit; text-decoration: none; }
.vb-row:last-child { border-bottom: 0; }
.vb-row:hover, .vb-row.is-hover { background: var(--vb-row-hover); text-decoration: none; }
.vb-row.is-selected { background: var(--vb-row-selected); box-shadow: inset 3px 0 0 var(--vb-primary); }
.vb-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vb-row__title { font: 600 16px/1.4 var(--vb-font); color: var(--vb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-row__sub { font: var(--vb-text-caption); color: var(--vb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-row__meta { flex: none; font: var(--vb-text-sm); color: var(--vb-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-row__acts { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity var(--vb-dur-instant); }
.vb-row:hover .vb-row__acts, .vb-row.is-hover .vb-row__acts, .vb-row:focus-within .vb-row__acts, .vb-row.is-selected .vb-row__acts { opacity: 1; }
@media (hover: none) { .vb-row__acts { opacity: 1; } }
.vb-row__check { flex: none; display: grid; place-items: center; width: 22px; }
.vb-row.is-done .vb-row__title { color: var(--vb-ink-3); }

/* ---- 右に出す詳細の題のリンク（L07 横のパネル・L05 読む欄・決定 55）：見た目は題のまま、載せた時と焦点の時だけ下線。押すと詳細の画面へ */
.vb-titlelink { color: inherit; font: inherit; text-decoration: none; text-underline-offset: 0.18em; }
.vb-titlelink:hover, .vb-titlelink:focus-visible { text-decoration: underline; }

/* ---- P32 項目と値の一覧（右の項目欄） ----------------------------------- */
.vb-kv { display: flex; flex-direction: column; }
.vb-kv__sec { padding: 14px 0; border-top: 1px solid var(--vb-line-2); }
.vb-kv__sec:first-child { border-top: 0; padding-top: 0; }
.vb-kv__sechead { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-bottom: 4px; font: var(--vb-text-h4); color: var(--vb-ink); }
.vb-kv__sechead .vb-btn { opacity: 0; }
.vb-kv__sec:hover .vb-kv__sechead .vb-btn, .vb-kv__sec.is-hover .vb-kv__sechead .vb-btn { opacity: 1; }
@media (hover: none) { .vb-kv__sechead .vb-btn { opacity: 1; } }
.vb-kv__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; }
.vb-kv__key { font: var(--vb-text-sm); color: var(--vb-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-kv__val { min-width: 0; font: 400 14px/1.45 var(--vb-font); color: var(--vb-ink); }
/* メールの値：語の途中で折らない。@ と . の後に <wbr> を入れて（Ui::mail）、そこで折る。それでも収まらない長い部分だけ折る */
.vb-mail { overflow-wrap: break-word; word-break: normal; }

/* ---- P41 数字の枠（決定 19：数字の下に補足 1 行） ----------------------- */
.vb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vb-stat { background: var(--vb-surface); -webkit-backdrop-filter: var(--vb-panel-blur); backdrop-filter: var(--vb-panel-blur); border-radius: var(--vb-radius-md); box-shadow: var(--vb-shadow-panel-edge); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1px solid transparent; color: inherit; text-decoration: none; }
.vb-stat__label { display: flex; align-items: center; gap: 4px; font: 600 12.5px/1.4 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-stat__num { font: var(--vb-text-num-lg); color: var(--vb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 4px; margin-bottom: -4px; }
/* 名前の横の ⓘ は縮めない（狭い幅で名前の「…」の外に ⓘ が切れないように） */
.vb-stat__label .vb-info { flex: none; }
.vb-stat__num small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.vb-stat__sub { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-stat--link { cursor: pointer; }
.vb-stat--link:hover, .vb-stat--link.is-hover { border-color: var(--vb-primary-soft-2); box-shadow: var(--vb-shadow-panel); text-decoration: none; }
.vb-stat--link .vb-stat__label::after { content: "›"; margin-left: auto; color: var(--vb-primary); font-size: 16px; line-height: 1; }
.vb-stat--danger .vb-stat__num { color: var(--vb-danger-ink); }
@media (max-width: 1023px) { .vb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vb-stats { gap: 12px; } .vb-stat { padding: 12px 14px; } .vb-stat__num { font-size: 22px; } }
.vb-stat__label > .vb-fi { margin-right: 4px; }
.vb-stat:has(.vb-stat__label > .vb-fi) .vb-stat__label { gap: 6px; }
@media (max-width: 1279px) { .vb-stat__label > .vb-fi { width: 24px; height: 24px; margin-right: 0; } } /* 1024 幅で「未対応のお問い合わせ」が 2px 足りず切れたため */
@media (max-width: 767px) { .vb-stat__label > .vb-fi { display: none; } .vb-stat__label { white-space: normal; } } /* 狭い数字のカードでは題名を切らない（入らない時は 2 行に折り返す） */

/* ---- P39 進み具合の棒（紫 1 色・100% は緑） ----------------------------- */
.vb-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vb-progress__track { flex: 1; min-width: 40px; height: 6px; border-radius: 999px; background: var(--vb-surface-3); overflow: hidden; }
.vb-progress__bar { height: 100%; border-radius: inherit; background: var(--vb-primary); width: var(--_v, 0%); }
.vb-progress.is-done .vb-progress__bar { background: var(--vb-success); }
.vb-progress__num { flex: none; min-width: 36px; text-align: right; font: 700 12.5px/1 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; }

/* ---- P40 期限の表示 ------------------------------------------------------ */
.vb-due { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1.3 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-due .vb-i { width: 14px; height: 14px; }
.vb-due--over { color: var(--vb-danger-ink); font-weight: 700; }
.vb-due--today { color: var(--vb-warning-ink); font-weight: 700; }
.vb-due--soon { color: var(--vb-ink); font-weight: 600; }
.vb-due--done { color: var(--vb-ink-3); }

/* ---- P57 読み込み中（骨組み・円） ---------------------------------------- */
.vb-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, #eeedf5 25%, #f7f6fb 37%, #eeedf5 63%); background-size: 400% 100%; animation: vb-shine 1.4s ease infinite; height: 12px; }
.vb-skel--circle { border-radius: 50%; }
@keyframes vb-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.vb-spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--vb-primary-soft-2); border-top-color: var(--vb-primary); animation: vb-spin .8s linear infinite; flex: none; }
.vb-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.vb-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--vb-ink-3); font: var(--vb-text-sm); }

/* ---- P58 空の状態（3 つ：まだ無い・条件で 0 件・読み込めない） ---------- */
.vb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 20px; }
.vb-empty__art { width: 200px; height: 160px; margin-bottom: 8px; }
.vb-empty__art img { width: 100%; height: 100%; object-fit: contain; }
.vb-empty__title { font: var(--vb-text-h3); color: var(--vb-ink); }
.vb-empty__sub { font: var(--vb-text-sm); color: var(--vb-ink-3); }
.vb-empty__acts { display: flex; gap: 8px; margin-top: 10px; }
.vb-empty--sm { padding: 20px 16px; }
.vb-empty--sm .vb-empty__art { width: 150px; height: 120px; }
/* 同じ画面に空の状態が幾つも出る時、絵は最初の 1 つだけ（js/art.js の dedupe が is-art-dup を付ける。グラフの空の表示も同じ） */
.vb-empty.is-art-dup .vb-empty__art, .vb-chart-state.is-art-dup > img { display: none; }
@media (max-width: 767px) { .vb-empty__art { width: 160px; height: 128px; } .vb-empty--sm .vb-empty__art { width: 150px; height: 120px; } }

/* ==========================================================================
   移動（P69〜P73）
   ========================================================================== */
/* P69 ビューのタブ（下線・件数つき） */
.vb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--vb-line-2); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.vb-tabs::-webkit-scrollbar { display: none; }
.vb-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; background: transparent; font: 700 12.5px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; flex: none; border-radius: 8px 8px 0 0; text-decoration: none; }
.vb-tab:hover, .vb-tab.is-hover { color: var(--vb-ink); background: var(--vb-row-hover); text-decoration: none; }
.vb-tab.is-selected, .vb-tab[aria-selected="true"] { color: var(--vb-primary-ink); }
.vb-tab.is-selected::after, .vb-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--vb-primary); }
.vb-tab .vb-count { background: #fff; box-shadow: inset 0 0 0 1px var(--vb-line-strong); color: var(--vb-ink-2); }
.vb-tab.is-selected .vb-count, .vb-tab[aria-selected="true"] .vb-count { background: var(--vb-primary-soft); box-shadow: none; color: var(--vb-primary-ink); }
.vb-tab:disabled { color: var(--vb-ink-4); cursor: not-allowed; background: transparent; }
@media (max-width: 767px) { .vb-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* P70 表示の切替（セグメント） */
.vb-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--vb-radius-sm); background: #eceaf5; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }   /* 選択肢が多くて親の幅を超える時は、ページを広げず切替の中で横に送る（決定 48） */
.vb-seg::-webkit-scrollbar { display: none; }
.vb-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: calc(var(--vb-control-h) - 8px); min-width: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: 600 13px/1 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; }
.vb-seg__btn { flex: none; }   /* 多い時は縮めずに切替の中で横に送る（縮むと字が窮屈になる） */
.vb-seg__btn:hover, .vb-seg__btn.is-hover { color: var(--vb-ink); background: rgba(255,255,255,.55); }
.vb-seg__btn.is-selected, .vb-seg__btn[aria-pressed="true"] { background: #fff; color: var(--vb-primary-ink); box-shadow: var(--vb-shadow-flat), 0 0 0 1px var(--vb-line); }
.vb-seg__btn .vb-i { width: 16px; height: 16px; }
.vb-seg__btn:disabled { color: var(--vb-ink-4); cursor: not-allowed; }
.vb-seg--icons .vb-seg__btn { padding: 0; width: 32px; }
/* スマホはアイコンだけ（文字は <span class="vb-seg__label"> に入れる・名前は aria-label） */
@media (max-width: 767px) { .vb-seg--auto .vb-seg__label { display: none; } .vb-seg--auto .vb-seg__btn { padding: 0; width: 32px; } }

/* P71 ページ送り */
.vb-pager { display: flex; align-items: center; gap: 4px; font: var(--vb-text-sm); color: var(--vb-ink-3); }
.vb-pager__info { margin-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-pager__num { min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; font: 600 13px/1 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; }
.vb-pager__num:hover { background: var(--vb-row-hover); }
.vb-pager__num.is-selected { background: var(--vb-primary-soft); color: var(--vb-primary-ink); }
.vb-more { display: flex; justify-content: center; padding: 10px; }

/* P72 パンくず */
.vb-crumbs { display: flex; align-items: center; gap: 4px; font: 500 13px/1.4 var(--vb-font); color: var(--vb-ink-3); min-width: 0; }
.vb-crumbs a { color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 狭い幅の長い名前は「…」で縮める（ページ見出しのカードの外へ出さない） */
.vb-crumbs a:hover { color: var(--vb-primary-ink); }
.vb-crumbs__sep { color: var(--vb-ink-4); width: 14px; height: 14px; flex: none; }
.vb-crumbs__here { color: var(--vb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* P73 段の見出し（折りたたみ） */
.vb-group { border-top: 1px solid var(--vb-line); }
.vb-group__head { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border: 0; background: transparent; font: 700 13px/1 var(--vb-font); color: var(--vb-ink-2); text-align: left; }
.vb-group__head:hover { background: var(--vb-row-hover); }
.vb-group__head .vb-i { width: 16px; height: 16px; color: var(--vb-ink-3); transition: transform var(--vb-dur); }
.vb-group.is-closed .vb-group__head .vb-i:first-child { transform: rotate(-90deg); }
.vb-group.is-closed .vb-group__body { display: none; }
.vb-group__sum { margin-left: auto; font: 600 12.5px/1 var(--vb-font); color: var(--vb-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   P33〜P38 データ表（詳しい要件は ds-inventory.md §5）
   ========================================================================== */
.vb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vb-toolbar .vb-spacer { flex: 1; }
.vb-toolbar__search { width: 320px; max-width: 100%; }
/* スマホ：1 段目に検索、2 段目に見方の切替・絞り込み（全画面同じ） */
@media (max-width: 767px) { .vb-toolbar__search { flex: 1 1 100%; width: 100%; height: 44px; order: -1; } .vb-toolbar { gap: 6px; } }
.vb-sumline { font: 500 16px/1.5 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; }
.vb-sumline b { color: var(--vb-ink); font-weight: 700; }

.vb-tablewrap { background: var(--vb-surface); -webkit-backdrop-filter: var(--vb-panel-blur); backdrop-filter: var(--vb-panel-blur); border-radius: var(--vb-radius-card); box-shadow: var(--vb-shadow-panel-edge); overflow: hidden; min-width: 0; }
.vb-tablescroll { overflow-x: auto; }
.vb-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--vb-text-table); color: var(--vb-ink-2); }
.vb-table th { position: sticky; top: 0; z-index: 1; height: 44px; padding: 0 12px; background: var(--vb-surface-2); border-bottom: 1px solid var(--vb-line-2); text-align: left; font: 700 11.5px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; }
.vb-table td { height: var(--vb-row-h); padding: 0 12px; border-bottom: 1px solid var(--vb-line); white-space: nowrap; vertical-align: middle; }
.vb-table tbody tr { cursor: pointer; }
.vb-table tbody tr:hover, .vb-table tbody tr.is-hover { background: var(--vb-row-hover); }
.vb-table tbody tr.is-selected { background: var(--vb-row-selected); }
.vb-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--vb-primary); }
.vb-table--dense td { height: var(--vb-row-h-dense); }
.vb-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.vb-table .is-name { color: var(--vb-ink); font-weight: 500; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
/* P33 列の種類（決定 46）：主役＝残りの幅（最小 144px・長ければ「…」）／短い値＝内容の幅・折り返さない／長文＝200〜360px・3 行まで／種類なし（text）＝1 行・最大 240px で「…」。
   長い名前で表が枠より広くなって状態・操作の列が横に送った先になる、を防ぐ。幅が足りない時は列を潰さず枠（.vb-tablescroll）が横に送る。
   種類なしの列でも、中に押せる部品（状態の札・メニュー・入力）がある欄（is-ctl）は切らない（メニューや焦点の輪を切らないため）。 */
.vb-table td.is-main { width: 100%; max-width: 0; min-width: 144px; overflow: hidden; text-overflow: ellipsis; }
.vb-table th.is-main { min-width: 144px; }
.vb-table td.is-short { white-space: nowrap; }
.vb-table td.is-long { white-space: normal; min-width: 200px; max-width: 360px; }
.vb-table td.is-long > .vb-simple__clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.vb-table td.is-text:not(.is-ctl) { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }   /* is-ctl＝欄の中に押せる部品（状態の札のメニュー・ボタン・入力）がある欄。Ui::table が付ける */
.vb-table .is-name small { display: block; font: var(--vb-text-caption); color: var(--vb-ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.vb-table .is-check { width: 44px; padding: 0 0 0 16px; }
.vb-table .is-check .vb-check input { opacity: 0; }
.vb-table tbody tr:hover .is-check .vb-check input, .vb-table tbody tr.is-hover .is-check .vb-check input, .vb-table tbody tr.is-selected .is-check .vb-check input, .vb-table tbody tr:focus-within .is-check .vb-check input, .vb-table.is-selecting .is-check .vb-check input, .vb-table thead .is-check .vb-check input { opacity: 1; }
.vb-table .is-acts { width: 132px; padding-right: 10px; text-align: right; }
.vb-table .is-acts > div { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; visibility: hidden; }
.vb-table tbody tr:hover .is-acts > div, .vb-table tbody tr.is-hover .is-acts > div, .vb-table tbody tr:focus-within .is-acts > div, .vb-table tbody tr:has(.vb-menu:not([hidden])) .is-acts > div { visibility: visible; }
.vb-table.is-selecting tbody .is-acts > div { visibility: hidden !important; }
@media (hover: none) { .vb-table .is-acts > div { visibility: visible; } .vb-table .is-acts .vb-btn { display: none; } .vb-table .is-check .vb-check input { opacity: 1; } }
.vb-table tfoot td { position: sticky; bottom: 0; height: 48px; background: var(--vb-surface-2); border-top: 1px solid var(--vb-line-2); border-bottom: 0; font-weight: 700; color: var(--vb-ink); }
.vb-table tr.vb-table__group td { height: 40px; background: #fbfaff; font: 700 13px/1 var(--vb-font); color: var(--vb-ink-2); }
.vb-th-sort { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; }
.vb-th-sort:hover { background: var(--vb-surface-3); color: var(--vb-ink-2); }
.vb-th-sort .vb-i { width: 14px; height: 14px; opacity: 0; }
.vb-th-sort:hover .vb-i, .vb-th-sort.is-sorted .vb-i { opacity: 1; }
.vb-th-sort.is-sorted { color: var(--vb-ink); }
.vb-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--vb-line); }

/* P34 シンプルな表 */
.vb-simple { width: 100%; border-collapse: collapse; font: var(--vb-text-table); }
.vb-simple th { text-align: left; font: 700 12.5px/1.3 var(--vb-font); color: var(--vb-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--vb-line-2); white-space: nowrap; }
.vb-simple td { padding: 10px; border-bottom: 1px solid var(--vb-line); color: var(--vb-ink-2); }
.vb-simple .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.vb-simple td.is-num { white-space: nowrap; }
/* P34 列の種類（2026-10-23・表の列幅の決まり。決定 46）：主役＝残りの幅（最小 144px）／短い値＝内容の幅・折り返さない／長文＝200〜360px・3 行まで（続きは詳細で）／種類なし＝72px 未満に潰さない。
   幅が足りない時は、列を潰さず表の枠（.vb-tablescroll）が横に送る。 */
.vb-simple th.is-main, .vb-simple td.is-main { min-width: 144px; overflow-wrap: anywhere; }
.vb-simple th.is-short, .vb-simple td.is-short { white-space: nowrap; width: 1%; }
.vb-simple th.is-long, .vb-simple td.is-long { min-width: 200px; max-width: 360px; }
.vb-simple td.is-main > a.vb-link, .vb-simple td.is-auto > a.vb-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }   /* 名前のリンク（下に補足の行が続く欄）も 2 行まで */
.vb-simple td.is-main > .vb-caption, .vb-simple td.is-auto > .vb-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }   /* 名前の下の補足の行（取引先など）も 2 行まで */
.vb-simple td > .vb-simple__clamp--2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }   /* 主役・種類なしの長い名前は 2 行まで */
.vb-simple td.is-long > .vb-simple__clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.vb-simple td.is-auto { min-width: 72px; overflow-wrap: anywhere; }
/* 767 以下：横に送る（data-sp="scroll"・既定）は主役の列を左に留める。縦に積む（data-sp="stack"）は 1 行を 1 まとまりにして、欄の名前を左に添える */
@media (max-width: 767px) {
  .vb-simple[data-sp="scroll"] th.is-main, .vb-simple[data-sp="scroll"] td.is-main { position: sticky; left: 0; z-index: 1; background: var(--vb-surface); box-shadow: 1px 0 0 var(--vb-line-2); }
  .vb-simple[data-sp="stack"], .vb-simple[data-sp="stack"] tbody { display: block; }
  .vb-simple[data-sp="stack"] thead { display: none; }
  .vb-simple[data-sp="stack"] tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--vb-line); }
  .vb-simple[data-sp="stack"] tr:last-child { border-bottom: 0; }
  .vb-simple[data-sp="stack"] td { display: flex; align-items: baseline; gap: 12px; min-width: 0; max-width: none; width: auto; padding: 2px 0; border: 0; white-space: normal; text-align: left; }
  .vb-simple[data-sp="stack"] td::before { content: attr(data-label); flex: 0 0 84px; font: var(--vb-text-caption); color: var(--vb-ink-3); }
  .vb-simple[data-sp="stack"] td:empty { display: none; }   /* 値の無い欄は欄の名前ごと出さない */
  .vb-simple[data-sp="stack"] td[data-label=""]::before { display: none; }
  .vb-simple[data-sp="stack"] td[data-label=""] { justify-content: flex-end; }
  .vb-simple[data-sp="stack"] td.is-main { display: block; padding-bottom: 4px; font-weight: 700; color: var(--vb-ink); }
  .vb-simple[data-sp="stack"] td.is-main::before { display: none; }
  .vb-simple[data-sp="stack"] td.is-long > .vb-simple__clamp { min-width: 0; flex: 1 1 auto; }
}

/* P35 まとめての操作の帯（画面の下に固定） */
.vb-bulkbar { display: flex; width: max-content; align-items: center; gap: 6px; height: 52px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--vb-ink); color: #fff; box-shadow: var(--vb-shadow-modal); max-width: 100%; }
.vb-bulkbar__count { font: 700 14px/1 var(--vb-font); white-space: nowrap; margin-right: 8px; }
.vb-bulkbar .vb-btn { color: #fff; background: transparent; height: 36px; min-width: 36px; padding: 0 10px; }
.vb-bulkbar .vb-btn:hover { background: rgba(255,255,255,.12); }
.vb-bulkbar .vb-iconbtn { color: #fff; --_s: 36px; }
.vb-bulkbar .vb-iconbtn:hover { background: rgba(255,255,255,.12); }
.vb-bulkbar__sep { width: 1px; height: 24px; background: rgba(255,255,255,.2); margin: 0 4px; }
/* 狭い幅で帯より中身が広い時は、ボタンを縮めず帯の中を横に送る（文字が重ならないように）。一覧の型の帯（.p-bulk）はスマホで［…］にまとめる別の作り */
.vb-bulkbar:not(.p-bulk) { overflow-x: auto; }
.vb-bulkbar:not(.p-bulk) > .vb-btn, .vb-bulkbar:not(.p-bulk) > .vb-iconbtn { flex: none; }
.vb-bulkbar--fixed { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--vb-z-sticky); }

/* P36 表示の設定パネル・P37 保存できるビュー */
.vb-viewset { width: 320px; padding: 8px 0; }
.vb-viewset__sec { padding: 8px 16px; }
.vb-viewset__sec + .vb-viewset__sec { border-top: 1px solid var(--vb-line); }
.vb-viewset__row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.vb-viewset__row > :first-child { flex: 1; min-width: 0; font: 500 13.5px/1.3 var(--vb-font); color: var(--vb-ink-2); }
.vb-colitem { display: flex; align-items: center; gap: 8px; min-height: 34px; border-radius: 8px; padding: 0 4px; }
.vb-colitem:hover { background: var(--vb-row-hover); }
.vb-colitem .vb-grip { color: var(--vb-ink-4); cursor: grab; }
.vb-colitem__name { flex: 1; min-width: 0; font: 500 13.5px/1.3 var(--vb-font); }
.vb-viewsave { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ==========================================================================
   P42〜P46 グラフ（凡例を必ず付ける＝決定 25）
   ========================================================================== */
.vb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: var(--vb-text-caption); color: var(--vb-ink-2); }
.vb-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vb-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--_c); flex: none; }
.vb-legend i.is-line { height: 2px; border-radius: 1px; }
.vb-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 18px 4px 0; border-bottom: 1px solid var(--vb-line-strong); }
.vb-bars__col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.vb-bars__seg { width: 100%; max-width: 40px; margin: 0 auto; background: var(--_c); }
.vb-bars__seg:first-child { border-radius: 6px 6px 0 0; }
.vb-bars__val { text-align: center; font: 700 11px/1 var(--vb-font); color: var(--vb-ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-bars__goal { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--vb-warning); }
.vb-bars__axis { display: flex; gap: 10px; padding: 6px 4px 0; }
.vb-bars__axis span { flex: 1; min-width: 0; text-align: center; font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; }
.vb-line-chart { width: 100%; height: 160px; }
.vb-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vb-donut svg { width: 132px; height: 132px; flex: none; }
.vb-dist { display: flex; flex-direction: column; gap: 10px; }
.vb-dist__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font: var(--vb-text-sm); }
.vb-dist__row .vb-progress__track { height: 8px; }
.vb-chart-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 180px; border-radius: var(--vb-radius-md); background: var(--vb-surface-2); color: var(--vb-ink-3); font: var(--vb-text-sm); text-align: center; padding: 12px; }
.vb-chart-state img { width: 120px; height: 96px; object-fit: contain; }

/* ==========================================================================
   P47 最近の動き・P48 チャットの発言・P49 ステッパー・P50 差分
   ========================================================================== */
.vb-timeline { position: relative; display: flex; flex-direction: column; }
.vb-timeline__date { font: 700 12.5px/1 var(--vb-font); color: var(--vb-ink-3); padding: 12px 0 8px; }
.vb-tl { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px 6px 0; border-radius: var(--vb-radius-sm); min-width: 0; }
.vb-tl::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 1.5px; background: #e4ddf9; }
.vb-tl:first-of-type::before { top: 50%; } .vb-tl:last-child::before { bottom: 50%; }
.vb-tl__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #ddd2fb; color: var(--vb-primary); flex: none; }
.vb-tl__icon .vb-i { width: 17px; height: 17px; }
.vb-tl__icon--fi { background: #fff; }
.vb-tl__icon--fi .vb-fi { width: 22px; height: 22px; }
.vb-tl__body { flex: 1; min-width: 0; font: 400 14px/1.45 var(--vb-font); color: var(--vb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-tl__body b { color: var(--vb-ink); margin-right: 8px; }
.vb-tl__who { flex: none; font: var(--vb-text-sm); color: var(--vb-ink-3); white-space: nowrap; }
.vb-tl__acts { flex: none; display: flex; gap: 2px; visibility: hidden; }
/* スマホ：本文を 2 行まで出し、人と時刻は本文の下へ回す（本文を途中で割らない） */
@media (max-width: 767px) {
  .vb-tl { flex-wrap: wrap; row-gap: 0; padding-left: 48px; }
  .vb-tl__icon { position: absolute; left: 0; top: 8px; }
  .vb-tl__body { flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .vb-tl__who { order: 3; }
  .vb-tl__acts { order: 4; margin-left: auto; }
}
.vb-tl:hover, .vb-tl.is-hover { background: var(--vb-row-hover); }
.vb-tl:hover .vb-tl__acts, .vb-tl.is-hover .vb-tl__acts, .vb-tl:focus-within .vb-tl__acts, .vb-tl:has(.vb-menu:not([hidden])) .vb-tl__acts { visibility: visible; }
@media (hover: none) { .vb-tl__acts { visibility: visible; } .vb-tl__acts .vb-btn { display: none; } }

.vb-msg { display: flex; gap: 12px; padding: 8px 12px; border-radius: var(--vb-radius-sm); position: relative; min-width: 0; }
.vb-msg:hover, .vb-msg.is-hover { background: var(--vb-row-hover); }
.vb-msg__body { flex: 1; min-width: 0; }
.vb-msg__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vb-msg__name { font: 700 14px/1.4 var(--vb-font); color: var(--vb-ink); }
.vb-msg__time { font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-msg__text { font: 400 14px/1.65 var(--vb-font); color: var(--vb-ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.vb-msg--cont { padding-top: 2px; }
.vb-msg--cont .vb-msg__text { margin-top: 0; }
.vb-msg--cont .vb-msg__gutter { width: 32px; flex: none; }
.vb-msg__acts { position: absolute; top: -14px; right: 12px; display: none; gap: 2px; padding: 2px; background: #fff; border: 1px solid var(--vb-line-2); border-radius: 10px; box-shadow: var(--vb-shadow-panel); }
.vb-msg:hover .vb-msg__acts, .vb-msg.is-hover .vb-msg__acts, .vb-msg:has(.vb-menu:not([hidden])) .vb-msg__acts { display: flex; }
.vb-msg__attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--vb-line-2); border-radius: 10px; font: var(--vb-text-sm); color: var(--vb-ink-2); background: #fff; max-width: 100%; }
.vb-msg__to { display: inline-flex; margin-left: 4px; }

.vb-stepper { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vb-step { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; min-width: 0; }
.vb-step__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--vb-control-line); background: #fff; font: 700 12px/1 var(--vb-font); flex: none; }
.vb-step.is-done .vb-step__n { background: var(--vb-primary-strong); border-color: var(--vb-primary-strong); color: #fff; }
.vb-step.is-current { color: var(--vb-ink); }
.vb-step.is-current .vb-step__n { border-color: var(--vb-primary); color: var(--vb-primary-ink); box-shadow: 0 0 0 3px var(--vb-primary-ring); }
.vb-stepper__line { flex: 1; min-width: 16px; height: 2px; background: var(--vb-line-strong); border-radius: 2px; }
.vb-stepper__line.is-done { background: var(--vb-primary); }
.vb-stepper__compact { display: none; font: 700 13px/1 var(--vb-font); color: var(--vb-ink-2); }
@media (max-width: 767px) { .vb-stepper .vb-step__label { display: none; } .vb-stepper .vb-step.is-current .vb-step__label { display: inline; } }

.vb-diff { border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); overflow: hidden; font: 400 13.5px/1.7 var(--vb-font); background: #fff; }
.vb-diff__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
.vb-diff__mark { text-align: center; color: var(--vb-ink-3); font-family: var(--vb-font-mono); }
.vb-diff__text { padding: 2px 10px 2px 0; overflow-wrap: anywhere; }
.vb-diff__row.is-del { background: #fdeeee; } .vb-diff__row.is-del .vb-diff__mark { color: var(--vb-danger-ink); }
.vb-diff__row.is-add { background: #e9f7ef; } .vb-diff__row.is-add .vb-diff__mark { color: var(--vb-success-ink); }
del.vb-del { background: #f9d4d4; color: var(--vb-danger-ink); text-decoration: line-through; }
ins.vb-ins { background: #c9eed8; color: var(--vb-success-ink); text-decoration: none; }

/* ==========================================================================
   P51〜P53 ファイル（決定 23：種類の線アイコン＋小さな拡張子の字）
   ========================================================================== */
.vb-fileicon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--vb-primary-soft); color: var(--vb-primary-ink); flex: none; }
.vb-fileicon .vb-i { width: 18px; height: 18px; }
.vb-fileicon .vb-tag--ext { position: absolute; bottom: -4px; right: -6px; background: #fff; }
.vb-filetiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.vb-filetile { border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-md); background: #fff; overflow: hidden; cursor: pointer; min-width: 0; }
.vb-filetile:hover, .vb-filetile.is-hover { box-shadow: var(--vb-shadow-panel); }
.vb-filetile.is-selected { border-color: var(--vb-primary); box-shadow: 0 0 0 2px var(--vb-primary-soft-2); }
.vb-filetile__thumb { height: 96px; display: grid; place-items: center; background: var(--vb-surface-2); color: var(--vb-ink-3); }
.vb-filetile__name { padding: 8px 10px 2px; font: 600 13px/1.35 var(--vb-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-filetile__meta { padding: 0 10px 10px; font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-hit { background: #fff1b8; color: inherit; border-radius: 2px; }

.vb-tree { display: flex; flex-direction: column; gap: 1px; font: 500 16px/1.3 var(--vb-font); }
.vb-tree__item { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px 0 calc(8px + var(--_d, 0) * 16px); border-radius: 8px; color: var(--vb-ink-2); cursor: pointer; min-width: 0; }
.vb-tree__item:hover, .vb-tree__item.is-hover { background: var(--vb-row-hover); }
.vb-tree__item.is-selected { background: var(--vb-primary-soft); color: var(--vb-primary-ink); font-weight: 700; }
.vb-tree__item.is-drop { box-shadow: inset 0 0 0 1.5px var(--vb-primary); background: var(--vb-primary-soft); }
.vb-tree__item .vb-i { width: 16px; height: 16px; color: var(--vb-ink-3); }
.vb-tree__item.is-selected .vb-i { color: var(--vb-primary); }
.vb-tree__toggle { width: 16px; display: grid; place-items: center; }
.vb-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-tree__item .vb-count { margin-left: auto; }

/* 画像ビューア（P66）・ファイルの中身（P52） */
.vb-viewer { display: flex; flex-direction: column; background: #22264a; border-radius: var(--vb-radius-md); overflow: hidden; color: #fff; min-width: 0; }
.vb-viewer__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-width: 0; }
.vb-viewer__bar .vb-iconbtn { color: #fff; }
.vb-viewer__bar .vb-iconbtn:hover { background: rgba(255,255,255,.12); }
.vb-viewer__name { flex: 1; min-width: 0; font: 600 13px/1.3 var(--vb-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-viewer__stage { position: relative; height: 220px; display: grid; place-items: center; background: #2c3160; }
.vb-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.vb-viewer__nav--prev { left: 10px; } .vb-viewer__nav--next { right: 10px; }
.vb-viewer__nav .vb-iconbtn { background: rgba(255,255,255,.14); color: #fff; }
.vb-viewer__count { font: var(--vb-text-caption); color: #d8dcf3; white-space: nowrap; }

/* ==========================================================================
   P74 受信箱の行（決定 21：未読の点は行の左）・P78 連携の行
   ========================================================================== */
.vb-inbox { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px 10px 10px; border-bottom: 1px solid var(--vb-line); cursor: pointer; position: relative; min-width: 0; }
.vb-inbox__dot { width: 8px; flex: none; display: grid; place-items: center; }
.vb-inbox__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vb-primary); }
.vb-inbox.is-read .vb-inbox__dot::before { background: transparent; }
.vb-inbox__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vb-inbox__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vb-inbox__from { font: 700 16px/1.3 var(--vb-font); color: var(--vb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-bottom: 2px; margin-bottom: -2px; }
.vb-inbox__time { margin-left: auto; flex: none; font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; }
.vb-inbox__subj { font: 500 16px/1.35 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 件名の前の種類（乙の機能アイコン 20px） */
.vb-inbox__subj:has(> .vb-fi) { display: flex; align-items: center; gap: 6px; }
.vb-inbox__subj > .vb-fi { width: 20px; height: 20px; --vb-icon-stroke: 3.2; }
.vb-inbox__subj > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-inbox__sum { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-inbox__sumrow { display: flex; align-items: center; gap: 8px; min-width: 0; }   /* 要約と同じ行の右端に置く物（窓口の返信の担当）。行の高さを増やさない */
.vb-inbox__sumrow > .vb-inbox__sum { flex: 1 1 auto; min-width: 0; }
.vb-inbox.is-read .vb-inbox__from { font-weight: 500; }
.vb-inbox:hover, .vb-inbox.is-hover { background: var(--vb-row-hover); }
.vb-inbox.is-selected { background: var(--vb-row-selected); box-shadow: inset 3px 0 0 var(--vb-primary); }
.vb-inbox__acts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding: 2px; background: #fff; border: 1px solid var(--vb-line-2); border-radius: 10px; box-shadow: var(--vb-shadow-flat); }
.vb-inbox:hover .vb-inbox__acts, .vb-inbox.is-hover .vb-inbox__acts, .vb-inbox:has(.vb-menu:not([hidden])) .vb-inbox__acts { display: flex; }

.vb-integ { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--vb-line); cursor: pointer; min-width: 0; }
.vb-integ:last-child { border-bottom: 0; }
.vb-integ:hover, .vb-integ.is-hover { background: var(--vb-row-hover); }
.vb-integ__main { flex: 1; min-width: 0; }
.vb-integ__name { font: 700 14px/1.35 var(--vb-font); color: var(--vb-ink); }
.vb-integ__desc { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-integ__chev { color: var(--vb-ink-3); }
/* 押せない行（準備中など）：薄く・› を出さない */
.vb-integ.is-disabled { cursor: default; opacity: .7; }
.vb-integ.is-disabled .vb-integ__chev { visibility: hidden; }

/* ==========================================================================
   P79 予定の札・P80 かんばんのカード・P81 帳票の明細行・P82 ホームの枠・P83 ピン
   ========================================================================== */
.vb-event { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px 5px 10px; border-radius: 8px; background: var(--vb-primary-soft); box-shadow: inset 3px 0 0 var(--_c, var(--vb-primary)); font: 600 12px/1.35 var(--vb-font); color: var(--vb-ink); cursor: grab; min-width: 0; position: relative; }
.vb-event__time { font: 500 11px/1.2 var(--vb-font); color: var(--vb-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-event__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.vb-event__who { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--vb-primary-ink); font: 700 9.5px/1 var(--vb-font); flex: none; }
.vb-event.is-hover, .vb-event:hover { box-shadow: inset 3px 0 0 var(--_c, var(--vb-primary)), var(--vb-shadow-panel); }
.vb-event.is-done { opacity: .55; }
.vb-event--blue { --_c: #3b6fe0; background: #e9f0fe; } .vb-event--green { --_c: #2c9a5b; background: #e6f6ec; } .vb-event--orange { --_c: #df6b1d; background: #fdeee2; }
.vb-event__resize { position: absolute; left: 6px; right: 6px; bottom: 0; height: 5px; cursor: ns-resize; }
.vb-more-n { font: 700 11.5px/1 var(--vb-font); color: var(--vb-primary-ink); padding: 3px 6px; border-radius: 6px; background: transparent; border: 0; }
.vb-more-n:hover { background: var(--vb-primary-soft); }

.vb-kcard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--vb-radius-md); background: #fff; box-shadow: var(--vb-shadow-flat), 0 0 0 1px var(--vb-line); cursor: pointer; position: relative; min-width: 0; }
.vb-kcard:hover, .vb-kcard.is-hover { box-shadow: var(--vb-shadow-panel), 0 0 0 1px var(--vb-line-2); }
.vb-kcard.is-selected { box-shadow: 0 0 0 2px var(--vb-primary); }
.vb-kcard.is-drag { transform: rotate(2deg); box-shadow: var(--vb-shadow-lift); }
.vb-kcard__title { font: 700 14px/1.45 var(--vb-font); color: var(--vb-ink); padding-right: 28px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }   /* 長い題名は 3 行まで（決定 46） */
.vb-kcard__group { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-kcard__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.vb-kcard__foot { display: flex; align-items: center; gap: 10px; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-kcard__foot .vb-spacer { flex: 1; }
.vb-kcard__menu { position: absolute; top: 8px; right: 8px; visibility: hidden; }
.vb-kcard:hover .vb-kcard__menu, .vb-kcard.is-hover .vb-kcard__menu, .vb-kcard:has(.vb-menu:not([hidden])) .vb-kcard__menu { visibility: visible; }
@media (hover: none) { .vb-kcard__menu { visibility: visible; } }
.vb-prio { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font: 600 11.5px/1 var(--vb-font); }
.vb-prio--high { color: var(--vb-danger-ink); } .vb-prio--mid { color: var(--vb-warning-ink); } .vb-prio--low { color: var(--vb-ink-3); }
.vb-prio .vb-i { width: 13px; height: 13px; }
.vb-meta { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.vb-meta .vb-i { width: 13px; height: 13px; }

.vb-lines { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--vb-text-table); }
.vb-lines th { text-align: left; font: 700 12px/1 var(--vb-font); color: var(--vb-ink-3); padding: 8px 6px; border-bottom: 1px solid var(--vb-line-2); white-space: nowrap; }
.vb-lines td { padding: 4px; border-bottom: 1px solid var(--vb-line); vertical-align: middle; }
.vb-lines .vb-input { height: 34px; box-shadow: none; background: transparent; border-radius: 8px; }
.vb-lines tr:hover .vb-input { box-shadow: inset 0 0 0 1.5px var(--vb-line-strong); background: #fff; }
.vb-lines .vb-input:focus { background: var(--vb-surface-solid); box-shadow: var(--vb-focus-field); }
.vb-lines .is-num, .vb-lines .is-num .vb-input { text-align: right; font-variant-numeric: tabular-nums; }
.vb-lines .is-grip { width: 24px; color: var(--vb-ink-4); cursor: grab; }
.vb-lines .is-x { width: 36px; }
.vb-lines .is-x .vb-iconbtn { visibility: hidden; }
.vb-lines tr:hover .is-x .vb-iconbtn, .vb-lines tr.is-hover .is-x .vb-iconbtn { visibility: visible; }
.vb-lines tr.is-hover .vb-input { box-shadow: inset 0 0 0 1.5px var(--vb-line-strong); background: #fff; }
.vb-lines .vb-input.is-error { box-shadow: inset 0 0 0 1.5px var(--vb-danger); background: #fff; }
.vb-lines tr.is-empty .vb-input { color: var(--vb-ink-4); }
.vb-linecard { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-sm); background: #fff; min-width: 0; }
.vb-linecard__main { flex: 1; min-width: 0; }
.vb-linecard__name { font: 600 14px/1.35 var(--vb-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-linecard__calc { font: var(--vb-text-caption); color: var(--vb-ink-3); font-variant-numeric: tabular-nums; }
.vb-linecard__amt { font: 700 14px/1 var(--vb-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 6px 24px; font: 500 14px/1.4 var(--vb-font); font-variant-numeric: tabular-nums; }
.vb-totals dt { color: var(--vb-ink-3); } .vb-totals dd { text-align: right; }
.vb-totals .is-grand { font: 800 18px/1.3 var(--vb-font); color: var(--vb-ink); }

.vb-widget { background: var(--vb-surface); -webkit-backdrop-filter: var(--vb-panel-blur); backdrop-filter: var(--vb-panel-blur); border-radius: var(--vb-radius-card); box-shadow: var(--vb-shadow-panel-edge); min-width: 0; }
.vb-widget__head { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 10px 0 18px; }
.vb-widget__head > .vb-fi { width: 32px; height: 32px; margin-right: 2px; }
.vb-widget__head:has(> .vb-fi) { padding-left: 16px; }
.vb-widget__title { flex: 1; min-width: 0; font: var(--vb-text-h4); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-widget__head .vb-iconbtn { visibility: hidden; }
.vb-widget:hover .vb-widget__head .vb-iconbtn, .vb-widget.is-hover .vb-widget__head .vb-iconbtn { visibility: visible; }
@media (hover: none) { .vb-widget__head .vb-iconbtn { visibility: visible; } }
.vb-widget__body { padding: 0 18px 16px; }

.vb-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 4px; background: var(--vb-primary-strong); color: #fff; font: 800 12.5px/1 var(--vb-font); box-shadow: 0 0 0 3px #fff, var(--vb-shadow-panel); cursor: pointer; }
.vb-pin.is-resolved { background: #b9bfd3; }
.vb-pin.is-selected { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--vb-primary-ring); }

/* ==========================================================================
   知らせ（P54〜P59）
   ========================================================================== */
/* P54 トースト（一言＋［元に戻す］） */
.vb-toasts { position: fixed; z-index: var(--vb-z-toast); left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (max-width: 767px) { .vb-toasts { bottom: calc(var(--vb-tabbar-h) + 12px); width: calc(100% - 24px); } }
.vb-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 6px 6px 6px 16px; border-radius: 14px; background: var(--vb-ink); color: #fff; box-shadow: var(--vb-shadow-modal); font: 500 14px/1.4 var(--vb-font); animation: vb-up var(--vb-dur-slow) var(--vb-ease-out); }
.vb-toast > .vb-i { color: #7ee0aa; }
.vb-toast--error > .vb-i { color: #ff9a9e; }
.vb-toast__text { min-width: 0; }
.vb-toast .vb-btn { height: 36px; color: #d9c8ff; background: transparent; padding: 0 10px; }
.vb-toast .vb-btn:hover { background: rgba(255,255,255,.12); }
.vb-toast .vb-iconbtn { color: #c3c9e0; --_s: 36px; }
.vb-toast .vb-iconbtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.vb-toast--static { animation: none; }
@keyframes vb-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* P55 画面上部の帯（閉じられる・1 つだけ） */
.vb-banner { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 16px; border-radius: var(--vb-radius-md); background: var(--vb-primary-soft); color: var(--vb-ink); font: 500 14px/1.45 var(--vb-font); min-width: 0; }
.vb-banner > .vb-i { color: var(--vb-primary); }
.vb-banner__text { flex: 1; min-width: 0; }
.vb-banner--warn { background: var(--vb-warning-bg); } .vb-banner--warn > .vb-i { color: var(--vb-warning); }
.vb-banner--danger { background: var(--vb-danger-bg); } .vb-banner--danger > .vb-i { color: var(--vb-danger); }
@media (max-width: 767px) { .vb-banner { flex-wrap: wrap; } }

/* P56 枠内の注意書き */
.vb-callout { align-self: start; display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--vb-radius-sm); background: var(--vb-info-bg); color: var(--vb-ink-2); font: 400 13.5px/1.55 var(--vb-font); border: 1px solid transparent; min-width: 0; }
.vb-callout > .vb-i { color: var(--vb-info); margin-top: 1px; }
.vb-callout__body { flex: 1; min-width: 0; }
.vb-callout__title { font: 700 13.5px/1.4 var(--vb-font); color: var(--vb-ink); }
.vb-callout--warn { background: var(--vb-warning-bg); } .vb-callout--warn > .vb-i { color: var(--vb-warning); }
.vb-callout--danger { background: var(--vb-danger-bg); } .vb-callout--danger > .vb-i { color: var(--vb-danger); }
.vb-callout--success { background: var(--vb-success-bg); } .vb-callout--success > .vb-i { color: var(--vb-success); }
.vb-callout .vb-btn { margin-top: 8px; }

/* P59 保存の帯（変えた時だけ・画面の下に固定） */
.vb-savebar { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px 10px 20px; border-radius: 16px; background: #fff; box-shadow: var(--vb-shadow-modal); border: 1px solid var(--vb-line-2); }
.vb-savebar__text { flex: 1; min-width: 0; font: 600 14px/1.4 var(--vb-font); color: var(--vb-ink); display: flex; align-items: center; gap: 8px; }
.vb-savebar__text .vb-dot { background: var(--vb-warning); }
.vb-savebar--fixed { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); z-index: var(--vb-z-sticky); }
@media (max-width: 767px) { .vb-savebar__text .vb-savebar__long { display: none; } }

/* ==========================================================================
   重ねて出す物（P60〜P64・P67）
   ========================================================================== */
.vb-scrim { position: fixed; inset: 0; z-index: var(--vb-z-scrim); background: rgba(20, 22, 54, .42); animation: vb-fade var(--vb-dur) var(--vb-ease); }
@keyframes vb-fade { from { opacity: 0; } }

/* P60〜P62 ダイアログ（確認は後ろを暗くする＝決定 11） */
.vb-dialog { position: fixed; z-index: var(--vb-z-dialog); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100% - 48px); display: flex; flex-direction: column; background: #fff; border-radius: var(--vb-radius-lg); box-shadow: var(--vb-shadow-modal); animation: vb-pop var(--vb-dur) var(--vb-ease-out); }
.vb-dialog--lg { width: min(640px, calc(100% - 32px)); }
.vb-dialog--static { position: relative; left: auto; top: auto; transform: none; z-index: auto; animation: none; width: 100%; max-width: 480px; }
.vb-dialog--static.vb-dialog--lg { max-width: 640px; }
@keyframes vb-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
.vb-dialog__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px 24px; }
.vb-dialog__title { flex: 1; min-width: 0; font: var(--vb-text-h2); font-size: 18px; color: var(--vb-ink); }
.vb-dialog__head .vb-iconbtn { margin: -6px -6px 0 0; }
.vb-dialog__body { padding: 4px 24px 8px; overflow-y: auto; font: var(--vb-text-body); color: var(--vb-ink-2); display: flex; flex-direction: column; gap: 14px; }
.vb-dialog__foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 24px 20px; }
.vb-dialog__foot .vb-spacer { flex: 1; }
.vb-dialog__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--vb-danger-bg); color: var(--vb-danger); }
/* 送る前の確認：宛先・件名・本文を全文 */
.vb-sendcheck { border: 1px solid var(--vb-line-2); border-radius: var(--vb-radius-md); overflow: hidden; }
.vb-sendcheck__meta { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; padding: 12px 16px; background: var(--vb-surface-2); border-bottom: 1px solid var(--vb-line); font: 400 13.5px/1.5 var(--vb-font); }
.vb-sendcheck__meta dt { color: var(--vb-ink-3); font-weight: 600; }
.vb-sendcheck__meta dd { color: var(--vb-ink); min-width: 0; overflow-wrap: anywhere; }
.vb-sendcheck__body { padding: 14px 16px; max-height: 260px; overflow-y: auto; white-space: pre-wrap; font: 400 14px/1.75 var(--vb-font); color: var(--vb-ink); }
.vb-sendcheck__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
@media (max-width: 767px) {
  .vb-dialog:not(.vb-dialog--static) { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92%; border-radius: 22px 22px 0 0; animation: vb-sheet var(--vb-dur-slow) var(--vb-ease-out); }
  .vb-dialog__foot { flex-direction: column; align-items: stretch; }
  .vb-dialog__foot .vb-btn { width: 100%; height: var(--vb-control-h-lg); }
  .vb-dialog__foot .vb-spacer { display: none; }
}

/* P63 段階つきモーダル */
.vb-dialog__steps { padding: 4px 24px 12px; }

/* L07 横から開くパネル（プレビューは後ろを暗くしない＝決定 11） */
.vb-panel { position: fixed; z-index: var(--vb-z-panel); top: 0; right: 0; bottom: 0; width: min(var(--vb-panel-w), 100%); display: flex; flex-direction: column; background: #fff; box-shadow: var(--vb-shadow-modal); border-radius: var(--vb-radius-lg) 0 0 var(--vb-radius-lg); animation: vb-slide var(--vb-dur-slow) var(--vb-ease-out); }
.vb-panel--static { position: relative; z-index: auto; width: 100%; border-radius: var(--vb-radius-lg); box-shadow: var(--vb-shadow-panel); animation: none; height: 100%; }
@keyframes vb-slide { from { transform: translateX(24px); opacity: 0; } }
.vb-panel__head { display: flex; align-items: center; gap: 6px; height: 60px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--vb-line); flex: none; }
.vb-panel__title { flex: 1; min-width: 0; font: var(--vb-text-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-panel__body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.vb-panel__foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--vb-line); background: #fff; border-radius: 0 0 0 var(--vb-radius-lg); }
.vb-panel__resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
@media (max-width: 767px) {
  .vb-panel:not(.vb-panel--static) { top: auto; left: 0; width: 100%; height: 60%; border-radius: 22px 22px 0 0; animation: vb-sheet var(--vb-dur-slow) var(--vb-ease-out); }
  .vb-panel:not(.vb-panel--static).is-full { height: calc(100% - 24px); }
}

/* P64 下から出るシート（スマホ） */
.vb-sheet { position: fixed; z-index: var(--vb-z-dialog); left: 0; right: 0; bottom: 0; max-height: 85%; display: flex; flex-direction: column; background: #fff; border-radius: 22px 22px 0 0; box-shadow: var(--vb-shadow-modal); padding-bottom: env(safe-area-inset-bottom); animation: vb-sheet var(--vb-dur-slow) var(--vb-ease-out); }
.vb-sheet--static { position: relative; z-index: auto; animation: none; box-shadow: var(--vb-shadow-panel); max-width: 390px; }
@keyframes vb-sheet { from { transform: translateY(40px); opacity: 0; } }
.vb-sheet__grip { width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 4px; background: #d5d8e6; flex: none; }
.vb-sheet__title { padding: 6px 20px 8px; font: var(--vb-text-h3); }
.vb-sheet__body { overflow-y: auto; padding: 0 8px 12px; }
.vb-sheet .vb-menu__item { min-height: 48px; font-size: 15px; padding: 0 12px; }

/* P67 コマンドパレット（⌘K）・P68 新規作成 */
.vb-cmdk { position: fixed; z-index: var(--vb-z-dialog); left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); background: #fff; border-radius: var(--vb-radius-lg); box-shadow: var(--vb-shadow-modal); overflow: hidden; }
.vb-cmdk--static { position: relative; left: auto; top: auto; transform: none; z-index: auto; width: 100%; max-width: 640px; }
.vb-cmdk__input { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--vb-line); }
.vb-cmdk__input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; font: 500 16px/1 var(--vb-font); background: transparent; }
.vb-cmdk__input > .vb-i { color: var(--vb-ink-3); }
.vb-cmdk__list { max-height: 360px; overflow-y: auto; padding: 6px; }
.vb-cmdk__group { padding: 10px 10px 4px; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-cmdk__item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; cursor: pointer; min-width: 0; }
.vb-cmdk__item .vb-i { color: var(--vb-ink-3); }
.vb-cmdk__item.is-selected, .vb-cmdk__item:hover { background: var(--vb-primary-soft); }
.vb-cmdk__item.is-selected .vb-i { color: var(--vb-primary); }
.vb-cmdk__name { flex: 1; min-width: 0; font: 500 14px/1.3 var(--vb-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-cmdk__sub { font: var(--vb-text-caption); color: var(--vb-ink-3); white-space: nowrap; }
.vb-cmdk__foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--vb-line); background: var(--vb-surface-2); font: var(--vb-text-caption); color: var(--vb-ink-3); flex-wrap: wrap; }
.vb-cmdk__foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 汎用の並べ方 */
.vb-row-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vb-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vb-spacer { flex: 1; }

/* hidden 属性は部品の display より強くする */
[hidden] { display: none !important; }

/* P77 お気に入り（紫の塗り。重要度の星＝橙と分ける） */
.vb-fav.is-on, .vb-fav[aria-pressed="true"] { color: var(--vb-primary); }
.vb-fav.is-on svg, .vb-fav[aria-pressed="true"] svg { fill: currentColor; }
.vb-menu__chev { margin-left: auto; color: var(--vb-ink-3); }

/* ==========================================================================
   ガント（L13）・ボード（L10・P80）・スマホの表のカード（T22）・見出しの補足の行・状態を選ぶメニュー・シートの下端（パターンのファイルから土台へ移した）
   ========================================================================== */
.vb-mcard { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border-radius: var(--vb-radius-md); box-shadow: var(--vb-shadow-card); border: 1px solid transparent; cursor: pointer; min-width: 0; -webkit-user-select: none; user-select: none; }
.vb-mcard.is-selected { border-color: var(--vb-primary); background: var(--vb-row-selected); }
.vb-mcard__check { display: none; padding-top: 2px; }
.vb-mcards.is-selecting .vb-mcard__check { display: inline-flex; }
.vb-mcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vb-mcard__top { display: flex; align-items: flex-start; gap: 8px; }
.vb-mcard__title { flex: 1; min-width: 0; font: 700 15px/1.4 var(--vb-font); color: var(--vb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vb-mcard__sub { font: var(--vb-text-sm); color: var(--vb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-mcard__bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--vb-text-caption); color: var(--vb-ink-3); }
.vb-mcard__bottom .vb-due { font-size: 12px; }
.vb-mcard__amt { margin-left: auto; font: 800 17px/1 var(--vb-font); color: var(--vb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-gantt { --gn: 340px; --rh: 44px; position: relative; min-width: 0; }
/* ガントの枠は日付の見出しと名前の列を留めたまま縦横に送る表なので、中で送る（決定 51 の例外）。高さは「画面の高さ − 上のバー − 余白」まで使い、
   ページを送って枠の上端を上のバーの下に寄せると画面いっぱいになる。縦の送りは枠の端でページへ渡す（横だけ止める＝戻る操作の誤動作を防ぐ） */
.vb-gantt__scroll { overflow: auto; max-height: max(360px, calc(100dvh - var(--vb-topbar-h) - 32px)); overscroll-behavior-x: contain; }
.vb-gantt__inner { width: calc(var(--gn) + var(--tl)); min-width: 100%; }
.vb-gantt__row { display: flex; min-height: var(--rh); border-bottom: 1px solid var(--vb-line); }
.vb-gantt__name { position: sticky; left: 0; z-index: 3; flex: none; width: var(--gn); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; background: #fff; border-right: 1px solid var(--vb-line-2); min-width: 0; }
.vb-gantt__lane { position: relative; flex: none; width: var(--tl); }
.vb-gantt__body { position: relative; }
.vb-gantt--day .vb-gantt__body .vb-gantt__lane { background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--d) * 5), rgba(26, 43, 92, .04) calc(var(--d) * 5) calc(var(--d) * 7)), repeating-linear-gradient(90deg, var(--vb-line) 0 1px, transparent 1px var(--d)); }
.vb-gantt--week .vb-gantt__body .vb-gantt__lane { background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--d) * 5), rgba(26, 43, 92, .035) calc(var(--d) * 5) calc(var(--d) * 7)), repeating-linear-gradient(90deg, var(--vb-line-2) 0 1px, transparent 1px calc(var(--d) * 7)); }
.vb-gantt__row--head { position: sticky; top: 0; z-index: 5; min-height: 58px; background: var(--vb-surface-2); border-bottom-color: var(--vb-line-2); }
.vb-gantt__name--head { z-index: 6; justify-content: space-between; background: var(--vb-surface-2); font: 700 12.5px/1 var(--vb-font); color: var(--vb-ink-3); }
.vb-gantt__lane--head { display: flex; flex-direction: column; }
.vb-gantt__months { position: relative; height: 24px; }
.vb-gantt__month { position: absolute; top: 0; height: 24px; padding: 7px 0 0; border-left: 1px solid var(--vb-line-2); font: 800 12px/1 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; }
.vb-gantt__month b { position: sticky; left: calc(var(--gn) + 8px); display: inline-block; padding: 0 8px; font: inherit; }
.vb-gantt__days { display: flex; height: 34px; }
.vb-gantt__day { flex: none; width: var(--d); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 700 11.5px/1.1 var(--vb-font); color: var(--vb-ink-2); font-variant-numeric: tabular-nums; }
.vb-gantt__day small { font: 500 9.5px/1 var(--vb-font); color: var(--vb-ink-3); }
.vb-gantt__day.is-off { color: var(--vb-ink-3); }
.vb-gantt__day.is-today { color: var(--vb-primary-ink); }
.vb-gantt__day.is-today small { color: var(--vb-primary-ink); }
.vb-gantt__week { flex: none; width: calc(var(--d) * 7); padding: 10px 8px 0; border-left: 1px solid var(--vb-line); font: 600 11.5px/1 var(--vb-font); color: var(--vb-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-gantt--month .vb-gantt__days { height: 10px; }
.vb-gantt--month .vb-gantt__row--head { min-height: 36px; }
.vb-gantt__todaytag { position: absolute; top: 4px; transform: translateX(-50%); height: 16px; padding: 0 6px; border-radius: 6px; background: var(--vb-primary-strong); color: #fff; font: 700 10px/16px var(--vb-font); white-space: nowrap; }
.vb-gantt__bar { position: absolute; top: 50%; z-index: 2; height: 18px; margin-top: -9px; border-radius: 6px; background: #e6dafe; box-shadow: inset 0 0 0 1px #d3c1fc; overflow: hidden; cursor: grab; touch-action: none; }
.vb-gantt__bar.is-doing { background: #d9c7fe; box-shadow: none; }
.vb-gantt__bar.is-done { background: var(--vb-success); box-shadow: none; }
.vb-gantt__bar.is-hold { background: #c9cedd; box-shadow: none; }
.vb-gantt__bar.is-cont { background: repeating-linear-gradient(135deg, #e6dafe 0 6px, #f2ebff 6px 12px); box-shadow: inset 0 0 0 1px #d3c1fc; }
.vb-gantt__bar.is-late { box-shadow: 0 0 0 2px var(--vb-warning); overflow: visible; }
.vb-gantt__bar.is-late .vb-gantt__fill { border-radius: 6px 0 0 6px; }
.vb-gantt__bar.is-sub { height: 10px; margin-top: -5px; border-radius: 5px; }
.vb-gantt__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--vb-primary); }
.vb-gantt__bar:hover, .vb-gantt__bar:focus-visible { outline: none; box-shadow: var(--vb-focus-ring-gap); }
.vb-gantt__bar.is-drag { z-index: 4; cursor: grabbing; box-shadow: 0 0 0 2px #fff, var(--vb-shadow-lift); }
.vb-gantt__handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.vb-gantt__handle--s { left: 0; } .vb-gantt__handle--e { right: 0; }
.vb-gantt__handle::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .9); opacity: 0; }
.vb-gantt__bar:hover .vb-gantt__handle::after { opacity: 1; }
.vb-gantt__bar.is-sub .vb-gantt__handle::after { top: 2px; bottom: 2px; }
.vb-gantt__ghost { position: absolute; top: 50%; height: 18px; margin-top: -9px; border-radius: 6px; border: 1.5px dashed var(--vb-primary); background: rgba(144, 85, 253, .06); }
.vb-gantt__tip { position: absolute; bottom: calc(50% + 14px); z-index: 7; transform: translateX(-50%); padding: 5px 9px; border-radius: 8px; background: var(--vb-ink); color: #fff; font: 600 11.5px/1.3 var(--vb-font); white-space: nowrap; box-shadow: var(--vb-shadow-panel); pointer-events: none; }
.vb-gantt__sum { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: var(--vb-primary-soft); box-shadow: inset 0 0 0 1px #cdb7fb; }
.vb-gantt__note { position: absolute; top: 50%; transform: translateY(-50%); font: 600 11.5px/1 var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.vb-gantt__ms { position: absolute; top: 50%; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border: 0; border-radius: 3px; transform: rotate(45deg); background: var(--vb-primary); box-shadow: 0 0 0 2px #fff; cursor: pointer; }
.vb-gantt__ms:hover, .vb-gantt__ms:focus-visible { outline: none; box-shadow: var(--vb-focus-ring-gap); }
.vb-gantt__ms--sm { width: 12px; height: 12px; margin: -6px 0 0 -6px; cursor: default; }
.vb-gantt__unsched { position: absolute; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 10px; border: 1.5px dashed var(--vb-control-line); border-radius: 6px; font: 500 11.5px/21px var(--vb-font); color: var(--vb-ink-3); white-space: nowrap; cursor: crosshair; }
.vb-gantt__lane[data-lane]:has(.vb-gantt__unsched) { cursor: crosshair; }
.vb-gantt__overlay { position: absolute; top: 0; bottom: 0; left: var(--gn); width: var(--tl); z-index: 1; pointer-events: none; }
.vb-gantt__today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--vb-primary); opacity: .85; }
.vb-gantt__deps { position: absolute; left: 0; top: 0; overflow: visible; }
.vb-gantt__dep { fill: none; stroke: #9a83d6; stroke-width: 1.5; }
.vb-gantt__dep.is-bad { stroke: var(--vb-warning); stroke-dasharray: 4 3; }
.vb-gantt__arrow { fill: #9a83d6; } .vb-gantt__arrow.is-bad { fill: var(--vb-warning); }
.vb-gantt__row--sub .p-gname { font-weight: 500; color: var(--vb-ink-2); }
.vb-gantt__row--ms .p-gname { font-weight: 700; }
.vb-gantt__row--group, .vb-gantt__row--group .vb-gantt__name { background: #fbfaff; }
.vb-gantt__row--group .p-grp { flex: 1; min-width: 0; }
.vb-gantt__body .vb-gantt__row:hover > .vb-gantt__name, .vb-gantt__body .vb-gantt__row.is-hover > .vb-gantt__name { background: var(--vb-row-hover); }
.vb-gantt__body .vb-gantt__row:hover, .vb-gantt__body .vb-gantt__row.is-hover { background-color: rgba(26, 43, 92, .02); }
.vb-gantt .vb-empty { padding: 48px 20px; }
@media (max-width: 1279px) { .vb-gantt { --gn: 320px; } }
@media (max-width: 1023px) {
  .vb-gantt { --gn: 230px; }
}
.vb-board { position: relative; min-width: 0; }
.vb-board__tabs { display: none; }
.vb-board__track { position: relative; display: flex; gap: 16px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.vb-board__col { flex: 1 1 0; min-width: 270px; display: flex; flex-direction: column; gap: 8px; min-height: 320px; padding: 8px 10px 12px; border-radius: var(--vb-radius-card); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--vb-line); }
.vb-board__colhead { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 2px 0 6px; }
.vb-board__coltitle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; font: 800 15px/1 var(--vb-font); color: var(--vb-ink); white-space: nowrap; cursor: default; }
.vb-board__colacts { margin-left: auto; display: flex; gap: 2px; visibility: hidden; }
.vb-board__col:hover .vb-board__colacts, .vb-board__col:focus-within .vb-board__colacts, .vb-board__col:has(.vb-menu:not([hidden])) .vb-board__colacts { visibility: visible; }
@media (hover: none) { .vb-board__colacts { visibility: visible; } }
.vb-board__list { display: flex; flex-direction: column; gap: 12px; min-height: 72px; }   /* 列の中のカードの縦の隙間（決定 54：隣り合うカードは 12px 以上） */
.vb-board__empty { display: grid; place-items: center; height: 72px; border: 1.5px dashed var(--vb-line-strong); border-radius: var(--vb-radius-md); font: var(--vb-text-sm); color: var(--vb-ink-3); }
.vb-board__ph { flex: none; height: 104px; border: 2px dashed var(--vb-primary); border-radius: var(--vb-radius-md); background: rgba(144, 85, 253, .05); }
.vb-board__ph--from { border-color: var(--vb-line-strong); background: transparent; }
.vb-board__more { color: var(--vb-ink-2); }
.vb-board__col.is-folded { flex: 0 0 56px; min-width: 56px; align-items: center; padding: 10px 0; }
.vb-board__col.is-folded .vb-board__list, .vb-board__col.is-folded .vb-board__colacts, .vb-board__col.is-folded .vb-board__more { display: none; }
.vb-board__col.is-folded .vb-board__colhead { height: auto; padding: 0; }
.vb-board__col.is-folded .vb-board__coltitle { writing-mode: vertical-rl; gap: 10px; cursor: pointer; font-family: "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Meiryo", sans-serif; }
.vb-board__quick { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--vb-radius-md); background: #fff; box-shadow: var(--vb-shadow-flat), 0 0 0 1px var(--vb-primary-soft-2); }
.vb-board__quickacts { display: flex; justify-content: flex-end; gap: 6px; }
.vb-kcard { -webkit-user-select: none; user-select: none; }
.vb-kcard__labels { align-items: center; gap: 4px 8px; }
.vb-kcard__foot { flex-wrap: wrap; row-gap: 6px; }
.vb-kcard.is-dragging { opacity: .35; }
@media (max-width: 767px) {
  .vb-gantt { --gn: 112px; --rh: 48px; }
  .vb-gantt .p-gcols, .vb-gantt .p-load, .vb-gantt .p-tree__toggle, .vb-gantt .p-tree__pad, .vb-gantt .p-tree__sub { display: none; }
  .vb-gantt__name { padding: 0 8px; }
  .vb-gantt__row--group .p-grp { font-size: 12.5px; }
  .vb-gantt__row--group .p-grp .vb-count { display: none; }
  .vb-gantt__note { display: none; }
  .vb-gantt.is-view .vb-gantt__bar { cursor: pointer; }
  .vb-board__tabs { display: flex; margin-bottom: 12px; }
  .vb-board__track { gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0; }
  .vb-board__track::-webkit-scrollbar { display: none; }
  .vb-board__col { flex: 0 0 100%; min-width: 0; min-height: 0; scroll-snap-align: start; padding: 0 2px; background: transparent; box-shadow: none; }
  .vb-board__col.is-folded { flex: 0 0 100%; align-items: stretch; }
  .vb-board__col.is-folded .vb-board__list { display: flex; }
  .vb-board__colhead { display: none; }
  .vb-kcard__menu { visibility: visible; }
  .vb-board__ph { height: 84px; }
}

/* ==========================================================================
   仕上げで土台へ移した決まり（2026-10-21）
   ========================================================================== */
/* 見出しの補足の行（取引先・期日・主担当）。題名の下・主ボタンより下に置く */
.vb-headsub { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: -6px; font: var(--vb-text-sm); color: var(--vb-ink-3); min-width: 0; }
.vb-headsub a { font-weight: 700; white-space: nowrap; }
.vb-headsub__sep { color: var(--vb-line-strong); }
/* 見出しの行の中に置く：PC は題名の行の下、スマホは主ボタンより上（題名と補足を離さない） */
.vb-pagehead__row > .vb-headsub { flex-basis: 100%; order: 9; margin-top: -4px; }
@media (max-width: 767px) { .vb-pagehead__row > .vb-pagehead__acts { order: 10; } }

/* 状態を選ぶメニュー（押して変える札の下に出す）。重なる物の位置と層は js/overlay.js が決める（下の「重ねて出す物」） */
.vb-stmenu { min-width: 150px; }
/* 下に出る場所が無い時（ナビの下端の自分など）は上へ開く */
.vb-menu--up { top: auto; bottom: calc(100% + 6px); }
/* 重ねて出す物（メニュー・説明・チャットの設定・skill の選択の面）は、開いている間 js/overlay.js が popover="manual" を付けて最前面に出し、位置（fixed の left・top）を決める。
   祖先の backdrop-filter・transform・overflow の影響を受けない（表の中の状態のメニューが画面の外へ出た・枠で切れた原因）。
   popover の既定の見た目（余白・枠・色・中央寄せ・はみ出しの切り取り）だけを打ち消す。:where は詳しさ 0＝.vb-menu・.vb-pop・各部品の指定が勝つ */
:where(.vb-menu[popover], .vb-pop[popover], .mk-chat-set-b[popover], .dc-sk-p[popover]) { inset: auto; margin: 0; padding: 0; border: 0; color: inherit; background: none; overflow: visible; width: auto; height: auto; }

/* 重なりの順：後ろを暗くするパネル（作成・編集・連携）は幕の上に出す。
   プレビューのパネルは暗くしない（決定 11）。data-scrim の有無で決まる */
.vb-panel[data-scrim] { z-index: var(--vb-z-dialog); }

/* 重ねる物の下端（ダイアログ・パネル・シート）。
   PC：右寄せで［キャンセル］→主の順。767 以下：全幅の縦並びで主ボタンを一番下（親指の位置）に置く。
   書く順は常に［削除など］→［キャンセル］→主 */
.vb-sheetfoot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--vb-line); }
@media (max-width: 767px) {
  .vb-dialog__foot, .vb-panel__foot, .vb-sheetfoot { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .vb-dialog__foot .vb-btn, .vb-panel__foot .vb-btn, .vb-sheetfoot .vb-btn,
  .vb-dialog__foot .vb-split, .vb-panel__foot .vb-split, .vb-sheetfoot .vb-split { width: 100%; height: var(--vb-control-h-lg); }
  .vb-dialog__foot .vb-spacer, .vb-panel__foot .vb-spacer, .vb-sheetfoot .vb-spacer { display: none; }
  .vb-panel__foot { border-radius: 0; padding: 12px 16px 16px; }
}

/* 画面の下に固定する帯（まとめての帯・保存の帯）とトースト。
   スマホは下のタブの上に置く。帯が出ている間、トーストは帯の上へ逃がす */
@media (max-width: 767px) {
  .vb-bulkbar--fixed, .vb-savebar--fixed { bottom: calc(var(--vb-tabbar-h) + 12px); width: calc(100% - 24px); }
}
body:has(.vb-bulkbar--fixed:not([hidden])) .vb-toasts,
body:has(.vb-savebar--fixed:not([hidden])) .vb-toasts { bottom: 96px; }
@media (max-width: 767px) {
  body:has(.vb-bulkbar--fixed:not([hidden])) .vb-toasts,
  body:has(.vb-savebar--fixed:not([hidden])) .vb-toasts { bottom: calc(var(--vb-tabbar-h) + 84px); }
}

/* カードの見出しの件数：題名のすぐ右に灰の丸（右端に「N 件」と書かない） */
.vb-card__head .vb-h3:has(+ .vb-count), .vb-widget__title:has(+ .vb-count) { flex: 0 1 auto; }
.vb-card__head .vb-h3 + .vb-count, .vb-widget__title + .vb-count { margin-right: auto; }

/* 道具の行（一覧の型・全画面同じ）
   並び：［見方の切替］→ 検索 →［絞り込み］（漏斗）… 右端に［表示］（横棒）。
   付いた絞り込みのチップは道具の行の下に別の行（.vb-filterrow）で出し、道具の行を折り返させない。
   ビューのタブの「すべて」は最後に置く */
.vb-filterrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; margin-top: -4px; }
.vb-filterrow[hidden], .vb-filterrow:empty { display: none; }
@media (min-width: 768px) { .vb-toolbar__search { flex: 0 1 320px; min-width: 160px; } }

/* 押せる範囲は 44（見た目が小さい部品も）。決まり：見た目 32 でも押せる範囲は 44（ds-inventory.md）。
   スマホとタッチの機械で、小さな部品の押せる範囲を ::after で広げる（見た目と並びは変えない） */
@media (max-width: 767px), (pointer: coarse) {
  .vb-check, .vb-radio, .vb-chip, .vb-filter > button, .vb-seg__btn, .vb-info, button.vb-status, .vb-crumbs a,
  .vb-link, .vb-nav__sectitle, .vb-avatar-btn, .vb-switch, .vb-hit { position: relative; }
  .vb-check::after, .vb-radio::after, .vb-chip::after, .vb-filter > button::after, .vb-seg__btn::after, .vb-info::after, button.vb-status::after,
  .vb-crumbs a::after, .vb-link::after, .vb-nav__sectitle::after, .vb-avatar-btn::after, .vb-switch::after, .vb-hit::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* ボタン・メニューの行・まとまりの見出し・並べ替え・上のバーの自分とロゴ・予定の札：::before で広げる（::after は読み込み中の印に使う） */
  .vb-btn, .vb-menu__item, .vb-group__head, .vb-th-sort, .vb-topbar__me, .vb-topbar__logo, .vb-nav__item, .vb-tabbar__item { position: relative; }
  .vb-btn::before, .vb-menu__item::before, .vb-group__head::before, .vb-th-sort::before, .vb-topbar__me::before, .vb-topbar__logo::before, .vb-nav__item::before, .vb-tabbar__item::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* ナビの 2 段目は行の高さそのものを 44 に */
  .vb-nav__subitem { min-height: 44px; }
}

/* ==========================================================================
   表示の設定のパネル（P36）
   ========================================================================== */


/* 表示の設定のパネル（P36）：一覧の型の［表示］。列・まとまり・並び・行の高さ・完了を表示 */
.vb-viewpanel { width: min(360px, 100%); }
.vb-viewpanel__sec { display: flex; flex-direction: column; gap: 6px; }
.vb-viewpanel__sec .vb-h4 { margin-bottom: 2px; }
.vb-seg--full { display: flex; }
.vb-seg--full .vb-seg__btn { flex: 1; }
.vb-switchrow { display: flex; justify-content: space-between; width: 100%; font-weight: 700; font-size: 13px; }

/* 幅で出し分ける（PC だけ・スマホだけ）。767 以下がスマホ */
@media (min-width: 768px) { .vb-sp-only { display: none !important; } }
@media (max-width: 767px) { .vb-pc-only { display: none !important; } }

/* 横パネルの中身の直下は縮ませない（長い表が高さ 0 に潰れたため・decisions 37） */
.vb-panel__body > * { flex-shrink: 0; }

/* ---- 浮かせる面は 1 段（決定 45・2026-10-23 オーナー指摘「浮いたカードのなかに浮いたカードを配置している」） ----
   外側に影を持つ面（カード・数字の枠・表の枠・ウィジェット・2 ペインの箱・ページ見出しなど）の中に入った面は、影を持たない形になる。
   カードの中のまとまりは「区切り線・淡い地・白地でない細い枠」のどれかで分ける（shadcn/ui・Linear・Vercel と同じ）。
   重ねて出す物（メニュー・ポップオーバー・ダイアログ・横パネル・トースト・下の帯）は浮くのが役目なので、ここには入れない。
   特異度は :is() の中の最大（0,1,0）が足されて (0,2,0)。押した・マウスを載せた形は下で別に書く。
   新しい浮いた面（影を持つ部品）を足したら、ここの「外」（1 行目）と「中」（2 行目）の一覧にも足す（tools/ui-check の「浮いた面の入れ子」が数える）。 */
/* 面の中の面（カード・数字の枠・ウィジェット）＝淡い地。影も枠もなし */
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  :is(.vb-card, .vb-widget, .vb-stat, .vb-mcard, .p-box) {
  background: var(--vb-surface-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  :is(.vb-card--hover:hover, .vb-card--hover.is-hover, .vb-stat--link:hover, .vb-stat--link.is-hover) {
  background: var(--vb-primary-soft); box-shadow: none;
}
/* 面の中の表・一覧の枠＝透明の地に細い枠 */
:is(.vb-card, .vb-widget, .vb-stat, .vb-mcard, .p-box, .vb-pagehead, .vb-tool__page)
  :is(.vb-tablewrap, .p-cal, .p-tasks, .p-cardlist) {
  background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--vb-line-2);
}
/* 面の中の枠つきの箱（行・ガントの狭い幅の行・ファイル・書く欄・アップロード・差分・線のカード）＝白地をやめて透明の地に細い枠 */
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  :is(.p-caserow, .p-glist__row, .vb-composer, .vb-filetile, .vb-upload, .vb-diff, .vb-linecard) {
  background: transparent;
}
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  :is(.p-caserow:hover, .vb-filetile:hover, .vb-filetile.is-hover) { background: var(--vb-row-hover); box-shadow: none; }
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  :is(.vb-code) { background: var(--vb-surface-2); }
/* 面の中のボードのカード＝影をやめて細い線の輪だけ */
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  .vb-kcard:not(.is-selected):not(.is-drag) { background: transparent; box-shadow: 0 0 0 1px var(--vb-line-2); }
:is(.vb-card, .vb-widget, .vb-tablewrap, .vb-stat, .vb-mcard, .p-box, .p-cal, .p-tasks, .p-cardlist, .vb-pagehead, .vb-tool__page)
  .vb-kcard:not(.is-selected):not(.is-drag):hover { background: var(--vb-row-hover); box-shadow: 0 0 0 1px var(--vb-line-2); }

/* ---- 中を送る箱の送り棒（決定 51・2026-10-26） -------------------------------
   基本はページ全体を送り、カードの中を送らない。中を送る所（2 枚並びの一覧と本文・チャット・横のパネル・ダイアログ・メニュー・ガントの枠・
   今の中身の箱）の送り棒は、左ナビ（.vb-nav__scroll）と同じ細い形：幅 8px・▲▼のボタンなし・溝は透明・棒は淡く、載せた時だけ濃く。
   ページ（html）の送り棒はそのまま。:where() で特異度を 0 にし、自分で棒を隠す部品（タブ・切替・チップの横送り）と左ナビの指定が勝つ。
   scrollbar-width・scrollbar-color を書くと Chrome は ::-webkit-scrollbar を無視して既定の棒（▲▼つき）に戻るので、Firefox だけに囲む */
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar { width: 8px; height: 8px; }
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar-track,
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar-corner { background: transparent; }
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar-thumb { background-color: rgba(26, 43, 92, 0.12); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; }
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) :hover::-webkit-scrollbar-thumb,
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) :focus-within::-webkit-scrollbar-thumb { background-color: rgba(26, 43, 92, 0.24); }
:where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) ::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 43, 92, 0.38); }
@supports not selector(::-webkit-scrollbar) {
  :where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) * { scrollbar-width: thin; scrollbar-color: rgba(26, 43, 92, 0.18) transparent; }
  :where(.vb-app, .vb-scope, .vb-panel, .vb-dialog, .vb-sheet, .vb-menu, .vb-cmdk) :hover { scrollbar-color: rgba(26, 43, 92, 0.32) transparent; }
}

/* ==== 仕事の型の工程（P85〜P87・2026-10-27）。窓口の帯・案件の札で、工程の横の段と答え待ちの印、型を選ぶメニューに使う ==== */
/* 横の段：面は足さず、帯の色の上に細い棒で進み具合を見せる。段の数は data-n（2〜12）。狭い幅は 3 列に折り返す */
.vb-flow { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; min-width: 0; }
.vb-flow__head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.vb-flow__head .vb-spacer { flex: 1; }
.vb-flow__lab { font: var(--vb-text-sm); color: var(--vb-ink-3); white-space: nowrap; }
.vb-flow__name { font: 700 13px/1.4 var(--vb-font); color: var(--vb-ink); overflow-wrap: anywhere; }
.vb-flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.vb-flow__steps[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.vb-flow__steps[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vb-flow__steps[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vb-flow__steps[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vb-flow__steps[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vb-flow__steps[data-n="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vb-flow__steps[data-n="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.vb-flow__steps[data-n="9"] { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.vb-flow__steps[data-n="10"] { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.vb-flow__steps[data-n="11"] { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.vb-flow__steps[data-n="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.vb-flow__s { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vb-flow__bar { display: block; box-sizing: border-box; height: 5px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--vb-primary-soft-2); }
.vb-flow__s.is-done .vb-flow__bar { background: var(--vb-success); box-shadow: none; }
.vb-flow__s.is-cur .vb-flow__bar { background: var(--vb-primary); box-shadow: none; }
.vb-flow__s.is-wait .vb-flow__bar { background: var(--vb-warning); box-shadow: none; }
.vb-flow__s.is-plan .vb-flow__bar { background: transparent; box-shadow: none; border: 1.5px dashed var(--vb-primary); }
.vb-flow__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vb-flow__txt b { display: flex; align-items: center; gap: 4px; font: 700 12.5px/1.35 var(--vb-font); color: var(--vb-ink); overflow-wrap: anywhere; }
.vb-flow__txt small { font: 500 11.5px/1.4 var(--vb-font); color: var(--vb-ink-3); overflow-wrap: anywhere; }
.vb-flow__s.is-todo .vb-flow__txt b, .vb-flow__s.is-plan .vb-flow__txt b { color: var(--vb-ink-2); font-weight: 600; }
.vb-flow__s.is-wait .vb-flow__txt small { color: var(--vb-warning-ink); font-weight: 700; }
.vb-flow__s.is-cur .vb-flow__txt small { color: var(--vb-primary-ink); font-weight: 700; }
.vb-flow__no { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--vb-ink-3); font: 700 10.5px/1 var(--vb-font); }
.vb-flow__s.is-cur .vb-flow__no { background: var(--vb-primary); color: #fff; }
.vb-flow__s .vb-i { flex: none; width: 16px; height: 16px; }
.vb-flow__s.is-done .vb-i { color: var(--vb-success-ink); }
.vb-flow__s.is-wait .vb-i { color: var(--vb-warning-ink); }
@container (max-width: 560px) {
  .vb-flow__steps[data-n] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .vb-flow__steps[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .vb-flow__steps[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 400px) {
  .vb-flow__steps[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-flow__steps[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
}
/* お客様の答え待ちの印（橙の小さな札＋時計）。止まっている所の目印 */
.vb-wait { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--vb-warning-bg); color: var(--vb-warning-ink); font: 700 12px/1 var(--vb-font); white-space: nowrap; flex: none; }
.vb-wait .vb-i { width: 13px; height: 13px; }
/* 仕事の型を選ぶメニュー：名前の下に「工程 N つ」。おすすめの札は右端 */
.vb-menu--wide { min-width: 320px; max-width: min(380px, calc(100vw - 24px)); }
.vb-menu__item.vb-flowpick { align-items: flex-start; height: auto; min-height: 0; padding: 8px 12px; white-space: normal; text-align: left; }
.vb-flowpick > .vb-i { margin-top: 2px; }
.vb-flowpick .vb-menu__check { margin-top: 2px; }
.vb-flowpick__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vb-flowpick__t b { font-weight: 700; overflow-wrap: anywhere; }
.vb-flowpick__t small { font: var(--vb-text-caption); color: var(--vb-ink-3); font-weight: 400; overflow-wrap: anywhere; }
.vb-flowpick > .vb-tag { margin-left: auto; align-self: center; }