/*
 * v2（Salon Workspace）の共通部品。正は DES-UX-020 §8.2〜§8.7。
 * 色の生値を書かない。トークンだけを参照する。
 */

/* ---- ボタン（§8.2） ------------------------------------------ */

.v2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--cocpi-v2-border-strong);
  border-radius: var(--cocpi-v2-radius-control);
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--cocpi-v2-duration-fast) ease-out,
              background var(--cocpi-v2-duration-fast) ease-out,
              border-color var(--cocpi-v2-duration-fast) ease-out;
}

.v2-button svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .v2-button:hover:not(:disabled) {
    border-color: var(--cocpi-v2-border-input);
    background: var(--cocpi-v2-bg-subtle);
  }
}

/* 押した確認。1px 下がる（DES-UX-020 §8.2） */
.v2-button:active:not(:disabled) { transform: translateY(1px); }

.v2-button--primary {
  border-color: var(--cocpi-v2-brand);
  color: var(--cocpi-v2-text-inverse);
  background: var(--cocpi-v2-brand);
}

@media (hover: hover) {
  .v2-button--primary:hover:not(:disabled) {
    border-color: var(--cocpi-v2-brand-hover);
    background: var(--cocpi-v2-brand-hover);
  }
}

/* Tertiary。面も枠もない。hover で下線を消さない（§4.7.2 の判断を維持） */
.v2-button--text {
  border-color: transparent;
  background: transparent;
  color: var(--cocpi-v2-brand-text);
  text-decoration: underline;
}

@media (hover: hover) {
  .v2-button--text:hover:not(:disabled) {
    border-color: transparent;
    background: var(--cocpi-v2-bg-hover);
  }
}

/* 危険な操作。通常時は枠、確認の場面だけ面（§4.7.3 の判断を維持） */
.v2-button--danger {
  border-color: var(--cocpi-v2-error);
  color: var(--cocpi-v2-error);
  background: var(--cocpi-v2-bg-canvas);
}

.v2-button--danger-solid {
  border-color: var(--cocpi-v2-error);
  color: var(--cocpi-v2-text-inverse);
  background: var(--cocpi-v2-error);
}

/* **面を塗る種別は hover も自分で持つ**（§8.2.1。2026-08-15 のオーナー指摘）。
   持たないと共通の `.v2-button:hover`（`bg-subtle` の面）が当たり、
   **文字色だけ白のまま残る。** 実測: コントラスト 1.13:1（文字が消えた） */
@media (hover: hover) {
  .v2-button--danger-solid:hover:not(:disabled) {
    border-color: var(--cocpi-v2-error-hover);
    background: var(--cocpi-v2-error-hover);
  }

  /* 枠だけの危険ボタンは、同系の淡い面で応える（灰色にしない） */
  .v2-button--danger:hover:not(:disabled) {
    border-color: var(--cocpi-v2-error);
    background: var(--cocpi-v2-error-soft);
  }
}

/* **押している間はホバーと同じ面**（§8.29。2026-09-13）。タッチ端末には hover が
   無く、ブラウザの青も消したため、押した手応えはこの面と 1px の沈みが担う。
   **種別ごとに持つ**（共通の面だけにすると、面を塗る種別で白文字が残る。§8.2.1）。
   種別の規則を共通の規則より後ろに置く（詳細度が同じで、後ろが勝つ） */
.v2-button:active:not(:disabled) { border-color: var(--cocpi-v2-border-input); background: var(--cocpi-v2-bg-subtle); transition: none; }
.v2-button--primary:active:not(:disabled) { border-color: var(--cocpi-v2-brand-hover); background: var(--cocpi-v2-brand-hover); }
.v2-button--text:active:not(:disabled) { border-color: transparent; background: var(--cocpi-v2-bg-hover); }
.v2-button--danger:active:not(:disabled) { border-color: var(--cocpi-v2-error); background: var(--cocpi-v2-error-soft); }
.v2-button--danger-solid:active:not(:disabled) { border-color: var(--cocpi-v2-error-hover); background: var(--cocpi-v2-error-hover); }

.v2-button:disabled {
  color: var(--cocpi-v2-text-muted);
  border-color: var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
  cursor: not-allowed;
}

/* スマートフォンは打鍵域を優先して高くする（REQ-UX-002） */
@media (max-width: 767px) {
  .v2-button { min-height: 44px; }
}

/* ---- 状態ピル（§8.6） ---------------------------------------- */

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-text-secondary);
  background: var(--cocpi-v2-bg-subtle);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 状態色だけに依存しない。点 + 文言（§8.6） */
.v2-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.v2-pill--success { color: var(--cocpi-v2-success); background: var(--cocpi-v2-success-soft); }
.v2-pill--warning { color: var(--cocpi-v2-warning); background: var(--cocpi-v2-warning-soft); }
.v2-pill--error { color: var(--cocpi-v2-error); background: var(--cocpi-v2-error-soft); }
.v2-pill--brand { color: var(--cocpi-v2-brand-text); background: var(--cocpi-v2-brand-soft); }

/* ---- カード（§8.4。使うのはホームの要約・打刻・重要タスクだけ） */

/* **ホームの区画そのものが「要約」である**（2026-08-23 のオーナー指摘
   「メリハリが無い」）。§8.4 は当初からカードの用途を「ホームの要約・打刻・
   重要タスク」と定めていたが、`v2-home-block` と `v2-home-timecard` は枠を
   持たず、白いキャンバスに見出しと本文が直接載っていた。**区画の境目が余白
   だけで示されていた。**

   宣言を複製せず、同じ規則にまとめる（器の定義を 3 箇所に散らさない） */
.v2-card,
.v2-home-block,
.v2-home-timecard {
  padding: 20px;
  border: 1px solid var(--cocpi-v2-border-card);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
}

/* ---- 通知（短い・静かな通知。§4.8 の役割を引き継ぐ） ---------- */

.v2-notice {
  position: relative;
  padding: 12px 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
}

/* **記号は見出しの行にだけ添える。** 記号を独立した列にすると、その下に
   同じ幅の空きが残り、本文の左の余白（46px）が右（16px）の 3 倍近くになる。
   記号を絶対配置にして、**記号の無い行は左右で同じ余白**にする（2026-08-11 の指摘） */
.v2-notice > svg {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 20px;
  height: 20px;
}

.v2-notice p { margin: 0; }

/* 見出しだけを行にする。**文中の強調まで改行させない**
   （`.v2-notice strong` と書いたところ、本文の途中の強調が独立した行になった）。
   下げ幅は記号の幅 + 間隔 */
.v2-notice p > strong:first-child { display: block; padding-left: 28px; }

/* 通知が 2 つ以上続くときは**少しだけ**空ける。くっつくと 1 つの面に見える。
   容器が gap を持たない場所（キャンバス直下・フォーム画面直下）に限る。
   gap を持つ容器（`.v2-form` など）では二重に空いてしまう */
.v2-canvas > .v2-notice,
.v2-form-page > .v2-notice { margin-bottom: 20px; }

.v2-canvas > .v2-notice:has(+ .v2-notice),
.v2-form-page > .v2-notice:has(+ .v2-notice) { margin-bottom: 8px; }

/* 通知の導線。行を分ける（DES-ATT-010 §2.1。本文に続けると語中で折り返す） */
.v2-notice__action {
  display: flex;
  width: fit-content;
  margin-top: 4px;
  padding-inline: 0;
}

.v2-notice--warning {
  border-color: var(--cocpi-v2-warning-soft);
  background: var(--cocpi-v2-warning-soft);
}

.v2-notice--warning svg { color: var(--cocpi-v2-warning); }

.v2-notice--error {
  border-color: var(--cocpi-v2-error-soft);
  background: var(--cocpi-v2-error-soft);
}

.v2-notice--error svg { color: var(--cocpi-v2-error); }

.v2-notice--success {
  border-color: var(--cocpi-v2-success-soft);
  background: var(--cocpi-v2-success-soft);
}

.v2-notice--success svg { color: var(--cocpi-v2-success); }

/* ---- 節（フォーム画面の区画） -------------------------------- */

/* 区画同士は 32px、区画の中の要素同士は 24px（10_tokens.md §4.1） */
.v2-section + .v2-section {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--cocpi-v2-border);
}

.v2-section__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }

.v2-section__lead {
  margin: 0 0 16px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 14px;
}

/* **本文の幅は絞らない**（§8.1.2。2026-08-15 のオーナー指摘）。
   初版は `max-width: 48rem` でページごと絞っていたが、**絞る対象を間違えて
   いた。** 長くなって困るのは入力欄であり、見出し・区切り線・表ではない。
   実測（1600px）: キャンバス 1321px に対し本文 768px で、区切り線も途中で
   終わり「描画が途切れた」ように見えた。**欄の上限は `cocpi-v2-forms.css`** */
.v2-form-page { min-width: 0; }

/* 参照のみの値を文として置く（入力欄として置かない。DES-ORG-010 §3.1） */
.v2-readonly-value {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-bg-subtle);
  font-weight: 700;
}

/* 画面下の主要操作。取り消しできない操作を同じ並びに入れない（§4.7） */
.v2-page-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---- 確認ダイアログ（中央。§8.8） ---------------------------- */

/* display は [open] に限って当てる（検査 13.7。閉じても見え続けるのを防ぐ） */
.v2-dialog[open] { display: flex; }

.v2-dialog {
  flex-direction: column;
  width: min(440px, calc(100vw - 32px));
  max-height: min(88dvh, 860px);
  padding: 0;
  border: 0;
  border-radius: var(--cocpi-v2-radius-card);
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-float);
}

/* 入力を伴うダイアログは一段広い */
.v2-dialog--form { width: min(560px, calc(100vw - 32px)); }

/* 表を載せるダイアログ（所定勤務パターンの展開結果。DES-ATT-010 §6.0）。
   7 列の表を 440px に収めると、どの列も読めない幅になる */
.v2-dialog--wide { width: min(720px, calc(100vw - 32px)); }

.v2-dialog::backdrop { background: var(--cocpi-v2-scrim); }

/* 送信を伴うダイアログとモーダルは中身を form で包む（確認・却下・差戻し・
   日別編集）。包むと flex の子が form 1 つになり、本文の伸縮と操作の下端固定が
   効かなくなる。**器の役割を form へ引き継ぐ** */
.v2-dialog__form,
.v2-editmodal__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.v2-dialog__body { padding: 24px; overflow-y: auto; }
.v2-dialog__body h2 { margin: 0 0 8px; font-size: 20px; }
.v2-dialog__body p { margin: 0; color: var(--cocpi-v2-text-secondary); }

.v2-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
}

/* ---- 値の弱い表示 -------------------------------------------- */

/* 値がない印（—）。消さずに弱める（§4.13 の判断を維持） */
.v2-muted { color: var(--cocpi-v2-text-muted); }

/* ---- ホーム（DES-UX-030 §5、ブリーフ §8.1） ------------------- */

/* 2 列。もっとも重い区画を左列の最上部へ（§5.5.1 の判断を維持） */
.v2-home__columns { display: grid; gap: 20px; }

@media (min-width: 1000px) {
  .v2-home__columns { grid-template-columns: 3fr 2fr; align-items: start; }
}

.v2-home__column { display: grid; gap: 20px; min-width: 0; }

.v2-home__date { color: var(--cocpi-v2-text-secondary); font-size: 14px; }

.v2-home-block__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}

/* 打刻カード。employee の最上位（REQ-UX-008）。
   打刻は毎日の主目的であり、画面でもっとも強い面を与える */
.v2-punchcard { padding: 24px; }

/* **ホームの区画の中では器を重ねない**（2026-08-23）。区画そのものがカードに
   なったため、中の打刻カードは余白だけを持つ */
.v2-home-block > .v2-punchcard { padding: 0; border: 0; border-radius: 0; }

/* **中央寄せを既定にする**（2026-08-13 にオーナー指摘）。単独画面だけを
   中央にしていたため、**ホームの同じカードが左寄せのまま**だった。
   日付・時刻・状態は 1 つのまとまりであり、器で揃え方を変えない */
.v2-punchcard__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* **札とボタンの間を空ける。** 0px で接していた（実測） */
  margin: 0 0 16px;
}

.v2-punchcard__date {
  margin: 0;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  text-align: center;
}

.v2-punchcard__now {
  margin: 4px 0 12px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.v2-punchcard__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 打鍵域を大きく（REQ-UX-002。v1 の打刻ボタンと同じ 56px） */
.v2-punchcard__actions .v2-button { flex: 1 1 10rem; min-height: 56px; }

/* 本日の実績。4 つの小さな情報セル（ブリーフ §8.1） */
.v2-punchcard__minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--cocpi-v2-border);
}

@media (max-width: 479px) {
  .v2-punchcard__minis { grid-template-columns: repeat(2, 1fr); }
}

.v2-punchcard__mini { min-width: 0; }
.v2-punchcard__mini dt { color: var(--cocpi-v2-text-secondary); font-size: 11px; }
.v2-punchcard__mini dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 素の箇条書きの体裁を外す一覧（対応が必要リスト、ラベルと値の行、ナレッジと
   動画の行 §8.27）。受信トレイのように 1 行 1 件（ブリーフ §8.1）。
   **入れ物は体裁を外すだけで、並べ方を持たない。** 2026-09-13 に重複をまとめた
   とき、この規則の宣言を消して入れ物の名前を下の「1 件の行」の規則へ混ぜ、
   **入れ物が横並びになって項目が 1 行に並んだ**（マイページ・動画の再生・
   労務情報・ホームなど。オーナー指摘）。`verify_mocks.py` の検査 7 が止める */
.v2-tasklist,
.v2-statrows,
.v2-doclist { margin: 0; padding: 0; list-style: none; }

.v2-tasklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--cocpi-v2-border);
  color: inherit;
  text-decoration: none;
}

.v2-tasklist__item:last-child { border-bottom: 0; }

@media (hover: hover) {
  .v2-tasklist__item:hover { background: var(--cocpi-v2-bg-hover); }
}

.v2-tasklist__item::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cocpi-v2-warning);
}

.v2-tasklist__value { margin-left: auto; color: var(--cocpi-v2-text-secondary); font-size: 13px; }

.v2-tasklist__chevron { color: var(--cocpi-v2-text-muted); flex: 0 0 auto; }

/* 件数付きの区画見出し */
.v2-home-block__count {
  margin-left: 8px;
  min-width: 22px;
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-warning);
  background: var(--cocpi-v2-warning-soft);
  font-size: 12px;
  text-align: center;
}

/* 見出しに添える数（対応を要さないもの）。**警告の色を使わない。**
   「出勤 3 / 6」は状態の報告であり、対応の要求ではない（§8.6） */
.v2-home-block__meta {
  margin-left: 8px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* ラベルと値の行（本日の勤怠状況、今月の内訳） */

.v2-statrows__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--cocpi-v2-border);
}

.v2-statrows__row:last-child { border-bottom: 0; }

/* **行一覧で区画が終わる場合は、最後の罫線を残す**（2026-08-11 の指摘）。
   最後の行だけ罫線を落とすと、行の下半分と区画の間隔が続けて空き、
   **空の行が 1 つあるように見える**（実測 40px。行の間は 8px）。
   残した罫線が区画の区切りを兼ねるため、次の区画の線は落とす。
   囲みの中（`.v2-card`）では囲みの境界が閉じるため、この形は使わない */
.v2-section--rows > .v2-statrows > .v2-statrows__row:last-child {
  border-bottom: 1px solid var(--cocpi-v2-border);
}

.v2-section--rows + .v2-section { padding-top: 0; border-top: 0; }
.v2-statrows__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 主要な数値（今月の実労働、未承認の件数）。重要度に差を付ける */
.v2-hero-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.v2-hero-number small {
  margin-left: 4px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 14px;
  font-weight: 400;
}

/* ---- 本日の顔ぶれ（§8.4.1、DES-UX-030 §5.3.1） ---------------- */

/* **区分ごとに 1 行、氏名を札で並べる。** 表にしない。人数が区分ごとに
   大きく偏る（出勤 8 人・有給 1 人）ため、列にすると空きだらけになる */
/* 行間は詰める（§8.4.1。2026-08-14 のオーナー指摘「縦幅が広い」） */
.v2-roster { display: grid; gap: 6px; }

/* 店舗の見出し。**店舗が 2 つ以上あるときだけ出す**（DES-UX-030 §5.3） */
.v2-roster__store {
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

/* **2 つめ以降の店舗は境界線で始める**（§8.4.1。2026-08-14 のオーナー指摘
   「店舗間の区切りの色が分かりづらい」。見出しの色だけでは切れ目にならない） */
.v2-roster__store:not(:first-child) {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cocpi-v2-border);
}

.v2-roster__row { display: flex; gap: 8px; }

/* **区分名の幅を固定して札の左端をそろえる。** そろわないと区分が読めない。
   行の高さは札に合わせる（26px。§8.6） */
.v2-roster__kind {
  flex: 0 0 4.5rem;
  min-height: 26px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
}

.v2-roster__people { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* **長い氏名は札の中で折り返す**（REQ-UX-015）。切り詰めて隠さない */
.v2-roster .v2-pill { white-space: normal; }

/* 札の中の補足（「午前」「午後」）。**色は変えず太さだけ落とす。**
   状態色の面の上で文字色を変えるとコントラストが基準を割る（REQ-UX-013） */
.v2-roster__note { font-weight: 400; }

/* ---- ホームの月次勤怠の区画（§8.4.2。DES-UX-030 §5.4.1） ---------- */

/* 軽い区画の 2 列の下に全幅で置く。上の余白が 2 列との切れ目になる。
   器（枠・角丸・面・余白）は §8.4 のカードの規則が与える */
.v2-home-timecard { margin-top: 20px; }

/* 区画見出しと「提出する」を 1 行に。**ボタン 1 つのために行を増やさない**
   （旧・月次勤怠画面の `.v2-page-header--inline` にあたる） */
.v2-home-timecard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.v2-home-timecard__header .v2-home-block__title { margin: 0; }

/* ---- 打刻（単独画面。DES-ATT-010 §2、ブリーフ §8.2） ---------- */

/* スタッフが 1 日に 4 回以上開く画面。幅を絞り、打刻だけに視線を集める */
.v2-punch-page {
  max-width: 34rem;
  margin-inline: auto;
  display: grid;
  gap: 16px;
}

/* 単独画面は日付・時刻・状態を中央に置く。時刻は画面の主役 */
/* 単独画面は打刻だけに視線を集めるため、時刻を一段大きくする。
   **揃え方は既定と同じ**（上で中央寄せ済み） */
.v2-punch-page .v2-punchcard__now { font-size: 52px; }

/* ---- 月次勤怠（DES-ATT-010 §3、ブリーフ §8.3） ---------------- */

/* 月移動 */
.v2-monthpicker { display: flex; align-items: center; gap: 4px; }

.v2-monthpicker__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--cocpi-v2-text-secondary);
  background: transparent;
  cursor: pointer;
}

.v2-monthpicker__nav:hover { background: var(--cocpi-v2-bg-hover); }
.v2-monthpicker__nav svg { width: 18px; height: 18px; }

.v2-monthpicker__label {
  min-width: 7em;
  margin: 0 4px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.v2-commandbar__period { color: var(--cocpi-v2-text-secondary); font-size: 12px; }
/* 要約チップ。表の上に小さく（ブリーフ §8.3） */
.v2-statchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--cocpi-v2-text-secondary);
}

.v2-statchips b {
  margin-left: 4px;
  color: var(--cocpi-v2-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.v2-statchips .v2-statchips__warn b { color: var(--cocpi-v2-warning); }

/* 表。作業キャンバスへ直接置く（表だけのカードを増やさない）。
   日と曜日の 2 列を固定する（v1 §3.2 の構造を維持）。

   **行に重ねたリンクのため、表の箱を内容の幅に合わせる。** `width: 100%` の
   ままだと箱は枠の幅に留まり、はみ出した右側が行の箱の外になる。
   狭い幅で表を右へ送ると、そこだけリンクが効かない（2026-08-13 に実測） */
.v2-timecard { min-width: 100%; width: max-content; }


/* 日と曜日の 2 列の固定は共通部品（`.v2-table--sticky-two`。tables.css）。
   **ここは 1 列目の幅だけを渡す。** 2026-08-14 に、スタッフ一覧が同じ規則を
   必要としたため 1 箇所へまとめた（検査 13 が重複を捕まえた） */
/* **クラスを 2 つ重ねる。** 既定値（`.v2-table--sticky-two` の 92px）と
   詳細度が並ぶと、読み込み順で決まってしまう（2026-08-14 に実測。日の列が
   92px になった） */
.v2-timecard.v2-table--sticky-two { --v2-sticky-first: 2.6em; }

/* 週の区切り。月曜の上に一段強い線（31 行の中の位置の手がかり。§4.13） */
.v2-timecard tr[data-week] td { border-top: 2px solid var(--cocpi-v2-border-strong); }

/* 曜日の色は共通の語彙（§3.6）。面は塗らない */
/* **太さも変える。** 色だけでは差が読み取りにくかった（2026-08-13）。
   面は塗らない（DES-UX-020 §3.6） */
.v2-dow-sat { color: var(--cocpi-v2-saturday); font-weight: 700; }
.v2-dow-sun { color: var(--cocpi-v2-sunday); font-weight: 700; }

/* **表の本体（`tbody`）に `cursor: pointer` を付けない**（2026-09-13 に外した）。
   押せるのは押せる行（`tr[data-rowlink]`。行自身が指の形を持つ。cocpi-v2-tables.css）。
   本体に付けると、スマートフォンのブラウザが押した所の印を**カレンダー全体**に
   重ねた（オーナー指摘「日にちを押すと、カレンダー全体が青く光る」。§8.29） */

/* 未入力の文言。行の面（warning-soft）の上で 4.92:1 */
.v2-warn-text { color: var(--cocpi-v2-warning); font-weight: 700; }

/* ---- 日別編集モーダル（中央。§8.8.1） -------------------------------
   **右パネルから中央へ改めた**（2026-08-13。オーナー判断）。行を押した位置から
   遠くならず、四方に余白が付いて角丸と影が輪郭を作る。参照元も中央モーダル。
   モバイルだけは下から出す（片手で届く位置に残す） */

/* display は [open] に限って当てる。無条件に当てると、UA の
   `dialog:not([open]) { display: none }` を作者スタイルが上書きし、
   閉じたダイアログが常に見える（v1 の `hidden` 対 `display: flex` と同型。
   検査 13.7 が捕まえる） */
.v2-editmodal[open] { display: flex; }

.v2-editmodal {
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: min(88dvh, 860px);
  padding: 0;
  border: 0;
  /* **縁を角丸にする。** 画面の端に接していないため四辺とも効く */
  border-radius: var(--cocpi-v2-radius-card);
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-float);
}

.v2-editmodal::backdrop { background: var(--cocpi-v2-scrim); }

.v2-editmodal__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--cocpi-v2-border);
}

.v2-editmodal__header h2 { flex: 1; margin: 0; font-size: 20px; line-height: 1.4; }

/* **本文だけが伸び縮みする。** 見出しと操作は端に留める
   （長い日の入力でも「保存する」を探しに行かせない） */
.v2-editmodal__body { flex: 1; min-height: 0; padding: 20px; overflow-y: auto; }

.v2-editmodal__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
}

/* 取り消しできない操作を主操作の並びに入れない（§4.7）。左端に置いて離す */
.v2-editmodal__footer .v2-button--danger { margin-right: auto; }

@media (max-width: 767px) {
  .v2-editmodal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    /* 下から出す。**上端だけ角丸**（下辺は画面の端に接する） */
    border-radius: var(--cocpi-v2-radius-canvas) var(--cocpi-v2-radius-canvas) 0 0;
  }

  .v2-editmodal__footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .v2-editmodal__footer .v2-button--danger { width: 100%; margin: 0; order: 9; }
  .v2-editmodal__footer .v2-button:not(.v2-button--danger) { flex: 1; }
}

/* 入れ子の選択肢（半休の午前午後、欠勤の内訳）。選んだ項目の下に現れる */
.v2-nested {
  margin: 8px 0 8px 12px;
  padding: 12px;
  border-left: 2px solid var(--cocpi-v2-border-strong);
  display: grid;
  gap: 12px;
}

/* 既定値だと分かる表示（§4.14.2。実際の打刻と区別が付かないと確認せず保存される） */
.v2-input--default { color: var(--cocpi-v2-text-muted); }

/* 単位のある入力欄 */
.v2-unit { display: flex; align-items: center; gap: 8px; }
.v2-unit .v2-input { max-width: 8rem; }
/* 単位のラベルを折らない（REV-009 m-9）。`.v2-duration` の欄は縮められる
   （flex 0 1 9rem）ため、390px で「時間」が 2 行に折れていた（実測） */
.v2-unit > span { white-space: nowrap; }

/* ---- 小さなボタン（一覧の行内操作） -------------------------- */

.v2-button--sm {
  position: relative;
  min-height: 30px;
  padding: 2px 12px;
  font-size: 13px;
}

/* 見た目は 30px、当たりは 44px（REQ-UX-002。v1 の xs と同じ考え方） */
.v2-button--sm::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

@media (max-width: 767px) {
  .v2-button--sm { min-height: 32px; }
}

/* 行内の操作の並び */
.v2-row-actions { display: inline-flex; gap: 8px; }

/* ---- 一覧で種別を見分ける記号（20_components.md §8.7.1） ------------
   **記号は文字に添える。** 記号だけにしない（意味は人によって違う）。
   **色で種別を示さない** —— 機能色は状態の札が使っている（ADR-0029）。
   形の違い（太陽と時計）だけで見分ける */

.v2-type-cell { white-space: nowrap; }

.v2-type-icon {
  /* **地の `svg { display: block }` を上書きする**（cocpi-v2-shell.css）。
     block のままだと文字が次の行へ落ち、種別の列だけ行が高くなる
     （2026-08-30 に実測で踏んだ） */
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--cocpi-v2-text-muted);
}

/* ---- 適用中の絞り込み条件（Gmail の検索チップ。ブリーフ §8.4） -- */

.v2-filterchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--cocpi-v2-text-secondary);
}

.v2-filterchip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  /* **既定は左右対称。** 右を詰めるのは閉じるボタンがあるときだけ。
     一律に 4px にしていたところ、ボタンの無いチップで**文字が右端へ寄って
     見えた**（2026-08-13 にオーナー指摘。実測で左 12px / 右 4px） */
  padding: 2px 12px;
  border: 1px solid var(--cocpi-v2-border-strong);
  border-radius: var(--cocpi-v2-radius-pill);
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  font-weight: 700;
}

/* 閉じるボタンを持つチップだけ、右を詰めてボタンぶんの領域にする */
.v2-filterchip:has(.v2-filterchip__remove) { padding-right: 4px; }

/* 条件を外せないチップ（値の表示のみ）は閉じるボタンを持たない */
.v2-filterchip__remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  color: var(--cocpi-v2-text-secondary);
  background: transparent;
  cursor: pointer;
}

.v2-filterchip__remove:hover { background: var(--cocpi-v2-bg-hover); }
.v2-filterchip__remove svg { width: 14px; height: 14px; }

/* ---- タブ（段階の切り替え） ---------------------------------- */

/* セグメント型（§8.6.1。2026-08-15 のオーナー指摘で下線タブから変えた）。
   **薄い地の帯の中に並べ、選択中だけ白い面で浮かせる。**
   帯そのものが「1 つの対象を切り替える器」であることを示す。

   **スクロールさせない。** 初版は `overflow-x: auto` を持ち、狭い幅で
   スクロールバーが出た（実測: 480px 未満でだけ溢れる）。横に隠すと、
   隠れたタブの存在が読めない。**折り返す**（タブは 3 つで、2 行でも
   縦は 1 行ぶんしか増えない） */
.v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
}

.v2-tabs__tab {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--cocpi-v2-radius-control);
  color: var(--cocpi-v2-text-secondary);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .v2-tabs__tab:hover { color: var(--cocpi-v2-text); background: var(--cocpi-v2-bg-hover); }
}

/* 選択中は色だけに頼らず、面（白）と影でも示す。
   **影は既存の 2 つから採る**（`10_tokens.md` §10。新しい影を作らない）。
   選択中の項目は帯の上に浮く要素であり、REQ-UX-012.1 の「浮く要素」にあたる */
.v2-tabs__tab[aria-selected="true"] {
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-canvas);
}

/* ---- 前後の対比（元の所定 → 上書き後。DES-ATT-010 §9.1） ------ */

/* **何を上書きするのか分からないまま上書きさせない。** 左は参照であり編集しない */
.v2-compare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
}

.v2-compare__col { flex: 1 1 13rem; min-width: 0; }
.v2-compare__label { margin: 0; color: var(--cocpi-v2-text-secondary); font-size: 12px; }
.v2-compare__value { margin: 4px 0 0; font-weight: 700; }
.v2-compare__arrow { color: var(--cocpi-v2-brand-text); font-weight: 700; }

/* ---- 空の状態（§4.4.1） -------------------------------------- */

.v2-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
}

/* 小見出しは本文と同じ大きさで、太さで示す（DES-UX-010 §5.0.0） */
.v2-empty__title,
.v2-sheet__header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.v2-empty__lead { margin: 0 0 8px; color: var(--cocpi-v2-text-secondary); }

/* 狭い幅では 1 行に収める（2026-08-12）。390px の作業面は 358px しかなく、
   月選択（200px）+ 期間 + 状態が入りきらずに 2 行になっていた。
   **月名の最小幅を外す**（`2026年8月` は 7em も要らない）*/
@media (max-width: 767px) {
  .v2-commandbar { gap: 8px; }
  .v2-monthpicker__label { min-width: 0; margin: 0; }
  .v2-monthpicker__nav { width: 36px; height: 36px; }
}

/* ---- サポートチャット（DES-SUP-010 §2、DES-UX-020 §8.11） ------ */

/* 本文（会話 + 入力）と、過去の会話の一覧。広い幅では一覧を右へ寄せる
   （ホームの 2 列と同じ考え方。DES-UX-030 §5.5.1） */
.v2-chat-layout { display: grid; gap: 24px; align-items: start; }

@media (min-width: 1024px) {
  .v2-chat-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.v2-chat { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.v2-chat__thread { display: flex; flex-direction: column; gap: 4px; }

/* 発言の主とメッセージの間は詰め、発言どうしの間は空ける */
.v2-chat__thread > * + .v2-chat__meta { margin-top: 16px; }

/* 吹き出し。**回答は平文のまま出す**（DES-SUP-010 §2.1。Markdown 変換をしない）。
   幅を 36rem で止めるのは入力欄の 32rem と同じ理由 — 1 行が長いと
   始点と終点が視線の移動 1 回で結べない（§8.1.2）。器の側は絞らない */
.v2-chat__msg {
  max-width: min(85%, 36rem);
  padding: 12px 16px;
  border-radius: var(--cocpi-v2-radius-card);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.v2-chat__msg--user {
  align-self: flex-end;
  background: var(--cocpi-v2-brand-soft);
}

.v2-chat__msg--ai {
  align-self: flex-start;
  border: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
}

/* 小さな付記（発言の主、カードの見出し語、一覧の日付）。
   発言の主は**回答が AI であることを毎回言う**（AC-MVP12-12） */
.v2-chat__meta,
.v2-guide-card__kicker,
.v2-chat-past__sub,
.v2-sources__kicker {
  margin: 0;
  color: var(--cocpi-v2-text-muted);
  font-size: 12px;
}

.v2-chat__meta--user { align-self: flex-end; }

/* 生成中。**進捗を偽装しない**（DES-SUP-010 §2.2）。文言だけを出す */
.v2-chat__pending {
  align-self: flex-start;
  color: var(--cocpi-v2-text-secondary);
  font-size: 14px;
}

/* ガイドへの導線カード（AC-MVP12-01/02）。回答の下に、回答と同じ側で出す */
.v2-guide-card {
  align-self: flex-start;
  width: min(85%, 36rem);
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
}

/* スクリーンショットの器（`scripts/capture_guides.py` が撮る実画像が入る。
   REQ-SUP-007）。`aspect-ratio` は**画像が無いときだけ効く**（画像があれば
   内容が高さを決める）。空の器の場所取りとして残す。

   **`min-width: 0` を落とさない。** grid の項目は既定で内容の最小幅より
   縮まず、画像の実寸（1280px）が下限になる。カードの面から右へ 20px
   はみ出していた（2026-08-20 に実測。390 / 768 / 1280px のすべてで発生） */
.v2-guide-card__shot {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-bg-subtle);
}

/* **`block` にする。** `inline` のままだと行末の余白（baseline の下）が
   器の中に残り、下の境界との間だけ隙間が空く */
.v2-guide-card__shot img {
  display: block;
  max-width: 100%;
  border-radius: var(--cocpi-v2-radius-control);
}

/* 解決確認（AC-MVP12-14）。回答の側に、操作としてまとめて出す */
.v2-chat__resolve {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 0;
}

.v2-chat__resolve p { margin: 0; color: var(--cocpi-v2-text-secondary); font-size: 14px; }

/* 入力。**欄と送信を 1 つの箱に収める**（2026-08-20、オーナー指摘。
   DES-UX-020 §8.11.1）。幅は帯と同じく器いっぱいに広がる — 32rem の欄の
   上限（§8.1.2）はチャットには適用しない。高さが伸びる欄であり、
   1 行が伸びすぎる問題は起きない */
.v2-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--cocpi-v2-border-input);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
}

/* フォーカスは箱が示す（中の欄は輪郭を持たない） */
.v2-chat__composer:focus-within {
  outline: 2px solid var(--cocpi-v2-focus-ring);
  outline-offset: 2px;
}

.v2-chat__composer .v2-textarea {
  flex: 1 1 auto;
  max-width: none;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  resize: none;
}

.v2-chat__composer .v2-textarea:focus { outline: none; }
.v2-chat__composer .v2-button { flex: 0 0 auto; white-space: nowrap; }

/* 過去の会話。タイトルを持たないため、最初の質問の冒頭で表す（DES-DM-310 §2） */
.v2-chat-past { display: grid; gap: 0; }

/* コンパクトに保つ（2026-08-20、オーナー指摘。本文より一段小さい字） */
.v2-chat-past__item {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  border-top: 1px solid var(--cocpi-v2-border);
  text-decoration: none;
  color: inherit;
}

.v2-chat-past__item:first-child { border-top: 0; }

@media (hover: hover) {
  .v2-chat-past__item:hover { background: var(--cocpi-v2-bg-hover); }
}

.v2-chat-past__excerpt {
  margin: 0;
  font-size: 13px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/* 操作ガイドの本文（Markdown 変換の出力。DES-SUP-010 §3）。
   読み物の行間と、番号付き手順の余白だけを整える */
.v2-guide-body { max-width: 48rem; line-height: 1.9; }

/* ナレッジの詳細の本文（DES-UX-020 §8.17）。ガイドの本文と同じ幅・行間に **16px**
   を足す。**登録画面の本文の欄と同じ値**にして、改行位置を揃える */
.v2-knowledge-body { max-width: 48rem; font-size: 16px; line-height: 1.9; }
.v2-knowledge-body h3 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.v2-knowledge-body p { margin: 0 0 12px; }
.v2-knowledge-body ul { margin: 0 0 12px; padding-left: 1.6em; }
.v2-knowledge-body li { margin: 4px 0; }
.v2-guide-body h1 { font-size: 20px; margin: 0 0 12px; }
.v2-guide-body h2 { font-size: 16px; margin: 24px 0 8px; }
.v2-guide-body p { margin: 0 0 12px; }
.v2-guide-body ol,
.v2-guide-body ul { margin: 0 0 12px; padding-left: 1.6em; }
.v2-guide-body li { margin: 4px 0; }

/* ---- 対象の帯（労務情報。DES-UX-020 §8.12、DES-ORG-050 §3.0） -- */

/* 「いま誰の情報を見ているか」を、タブの切り替えとスクロールから独立させる。
   別画面へ移った先で、元の画面に出ていた identity が消えるのを防ぐ。

   **表の見出し（`.v2-table th`）の `top` は 0 のままにする。** 見出しが留まる
   のは `.v2-table-scroll`（スクロールの器）の中であって画面ではないため、
   帯の高さぶん下げると**器の中で見出しが下がり、1 行目に重なる**
   （2026-09-02 に実測。1 行の表で th が td の上へ 44px かぶった）。
   帯（z-index 5）は見出し（3）より上にあり、スクロールで潜っても隠れない。

   **高さを宣言しない。** 中身（氏名・属性・操作）で決まり、幅によって
   1〜3 行に変わる。決め打つと実際の高さと食い違う */
.v2-subject {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--cocpi-v2-border-card);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: var(--cocpi-v2-shadow-canvas);
}

.v2-subject__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* 属性は区切り線で分ける。**「・」で連ねない** —— 読み上げに記号が混ざり、
   折り返したときに行頭へ点が残る */
.v2-subject__meta {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
}

.v2-subject__meta > * + * {
  padding-left: 12px;
  border-left: 1px solid var(--cocpi-v2-border);
}

/* **狭い幅では留めない**（2026-09-02 に実測）。390px では帯が 192px になり、
   画面の高さ（844px の端末で本文は 700px 前後）の 4 分の 1 を占め続ける。
   **識別を保つために本文の 4 分の 1 を明け渡さない** —— 上へ戻れば読める */
@media (max-width: 767px) {
  .v2-subject { position: static; }
}

/* ---- 区画の見出しに操作を並べる（DES-UX-020 §8.13） ----------- */

/* 画面見出し（`.v2-page-header`）と同じ形を、区画の段でも使う。
   **区画ごとに保存する画面**（労務情報。DES-ORG-050 §4.1）で、
   どの区画に対する操作かを見出しの位置で示す */
.v2-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 8px;
}

.v2-section__head > .v2-section__title { margin: 0; }

/* 参照の行一覧は読む幅に絞る（DES-UX-020 §8.13）。**器は絞らない**（§8.1.2）が、
   ラベル左・値右の行は 1300px の器いっぱいに広げると
   **どのラベルの値なのか視線で結べない**（実測 1300px でラベルと値が 1250px 離れた） */
.v2-statrows--readable { max-width: 48rem; }

/* 件数と上限。**上限を見せてから断る**（DES-ORG-050 §4.2）。
   見出しの一部だが、見出しの重さは持たせない */
.v2-section__count {
  margin-left: 8px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 14px;
  font-weight: 400;
}

/* ---- 選べるものをカードで並べる（DES-UX-020 §8.15、DES-ORG-060 §3） -- */

/* **一覧でもフォームでもモーダルでもない画面。** 出せるものを並べ、
   1 つずつ落とす。**押す前に、何がどれだけ出るかを見せる**（§3.2）。

   `.v2-card` の地（枠・角丸・余白）はそのまま使い、**中の並びだけを足す。**
   カードの高さが揃うよう、操作を下端へ寄せる */
.v2-cardgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .v2-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .v2-cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.v2-cardgrid > .v2-card,
.v2-editor__pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.v2-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.v2-card__lead {
  margin: 0;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

/* 操作の行。**カードの高さが違っても、ボタンの位置が揃う**。
   **`flex-end` にする**（2026-09-02。件数を出すのをやめ、添えの文が無い
   カードが出た）。`space-between` だと、ボタンだけのカードで左へ寄る */
.v2-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

/* **ボタンの中の文字を折り返さない**（2026-09-02 のオーナー指摘）。
   「この範囲に記録がありません」が長く、幅によっては**ボタンの側が
   「ダウン／ロード」と 2 行に割れていた。** 縮むのは説明の側とする */
.v2-card__foot > :is(.v2-button, a) { flex: 0 0 auto; white-space: nowrap; }

/* 添えの文は**左端に残す**（`margin-right: auto`）。`space-between` を
   やめたため、伸ばすだけでは右へ寄る */
.v2-card__foot > .v2-card__note { flex: 1 1 auto; min-width: 0; margin-right: auto; }

/* 添えの文（`.v2-card__note`）は `cocpi-v2-tables.css` の `.v2-pager__counter`
   と**同じ規則にまとめてある。** 役割が同じ（控えめに添える）であり、
   書き写すと次に値を変えるとき片方だけ直る */

/* ==== コミュニティ（MVP3。20_components.md §8.17〜§8.23） ====================== */

/* ---- 8.17 ナレッジの登録 / 編集（`v2-editor`） --------------------------------
   **本文は詳細と同じ幅・字体、PDF は下に 1 行の帯**（REQ-AI-003.4 の 2026-09-03
   改訂）。当初の「同じ高さの 2 区画を横に並べる」は、PDF の区画が横幅を取り、
   本文の改行位置が実際の表示と一致しなかった */
/* **全体を本文の欄の幅（48rem）にそろえる**（2026-09-03 のオーナー指摘: タイトル・
   本文・PDF の幅がばらばらだった）。タイトルの欄は基礎の 32rem を外して同じ幅に */
.v2-editor { display: grid; gap: 16px; max-width: 48rem; }
.v2-editor .v2-input { max-width: none; }

.v2-editor__panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.v2-editor__panes > * { width: 100%; }

/* PDF の帯。本文の欄と同じ幅（`.v2-attach` の破線の箱が帯そのもの） */
.v2-editor__pane--compact { width: 100%; }

/* 区画。**箱（枠・面・余白）を持たない**（2026-09-03 改訂）。縦積みにした時点で
   2 つの箱を並べる理由が消え、余白のぶん本文の欄が詳細より狭くなって改行位置が
   ずれる。見出しと中身だけの縦の flex */
/* `.v2-editor__pane` の宣言は `.v2-cardgrid > .v2-card` と同じ（1 つの規則にまとめてある） */

.v2-editor__pane-title { margin: 0; font-size: 14px; font-weight: 700; }

/* ツールバーは 2 つだけ（■ 見出し / ・ 箇条書き）。**Markdown を出さない**
   （REQ-AI-003.2）。折り返せる横並び */

/* 本文の欄。**32rem の上限を外す**（区画いっぱいに広げる。§8.11.1 と同じ理由 ——
   高さが伸びる欄）。**16px 以上**（iOS の自動ズームを止める）。自動リサイズは
   JS が scrollHeight に追従させる。無ければ 18rem + スクロール */
/* 詳細度を 2 つにする。基礎の `.v2-textarea { max-width: 32rem }` は forms.css にあり、
   同じ詳細度だと読み込み順で負ける（2026-09-03 に実測: 512px で止まっていた） */
.v2-editor .v2-editor__textarea {
  flex: 1 1 auto;
  width: 100%;
  max-width: 48rem;      /* v2-knowledge-body と同じ */
  min-height: 18rem;
  font-size: 16px;       /* 同上（iOS の自動ズームも止める） */
  line-height: 1.9;      /* 同上 */
  resize: vertical;
}

.v2-editor__count {
  margin: 0;
  align-self: flex-end;
  color: var(--cocpi-v2-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.v2-editor__count--over { color: var(--cocpi-v2-error); }

/* ---- 8.18 添付（`v2-attach`）。PDF と動画で同じ器 --------------------------------
   **選んだ時点で預かり、確認の値（ページ数・文字数 / 長さ・大きさ）を返す**
   （ADR-0035 規定6）。器は縦に積む。ファイル名は折り返す */
.v2-attach {
  display: grid;
  gap: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--cocpi-v2-border-strong);
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-bg-subtle);
}

.v2-attach--set { border-style: solid; background: var(--cocpi-v2-bg-canvas); }

/* 帯（PDF）。1 行に「ファイルを選ぶ」とファイル名・ページ数・「外す」を並べる
   （DES-UX-020 §8.17 の 2026-09-03 改訂） */
.v2-attach--strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v2-attach--strip .v2-attach__file,
.v2-attach--strip .v2-attach__meta,
.v2-attach--strip .v2-attach__actions { margin: 0; }
.v2-attach--strip .v2-notice { flex: 1 0 100%; }

.v2-attach__file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.v2-attach__file svg { flex: 0 0 auto; color: var(--cocpi-v2-text-muted); }

/* 添えの文（確認の値、評価の前置き）。同じ役割は同じ規則に */
.v2-attach__meta,


/* ---- 8.19 進み具合（`v2-progress`）。直接アップロード ---------------------------
   **偽装しない。** XMLHttpRequest の upload.onprogress の値だけを出す
   （DES-CMU-010 §5.2）。<progress> を使わない —— 見た目が端末ごとに違う */
.v2-progress { display: grid; gap: 4px; }

.v2-progress__track {
  height: 8px;
  border-radius: var(--cocpi-v2-radius-pill);
  background: var(--cocpi-v2-border);
  overflow: hidden;
}

.v2-progress__bar {
  height: 100%;
  border-radius: var(--cocpi-v2-radius-pill);
  background: var(--cocpi-v2-brand);
  transition: width var(--cocpi-v2-duration);
}

.v2-progress__label {
  margin: 0;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---- 8.20 画面下に固定した保存の帯（`v2-savebar`） ------------------------------
   **スクロールして探させない**（REQ-AI-003.4。参照元の結論）。sticky で
   作業面の下端に留め、iOS のホームバーぶんを safe-area-inset-bottom で空ける。
   100vh を使わない（キーボードでビューポートがずれる） */
.v2-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 24px -16px 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-canvas);
}

.v2-savebar__status { margin: 0; margin-right: auto; color: var(--cocpi-v2-text-secondary); font-size: 14px; }

/* **自動スクロールを帯の手前で止める**（2026-09-04、オーナー判断）。
   Tab で下の欄へ焦点を移すと、ブラウザは「欄が画面に入る最小限」までしか
   送らないため、**欄が帯（70px）の下へ潜り込む**（実測: 欄の下端 960px に
   対し帯の上端 890px）。入力中の欄が見えない状態になる。

   **`scroll-padding` は見た目を変えない。** 効くのは自動スクロールの
   止まる位置だけで、レイアウトも余白も動かない。

   **帯のある画面に限る**（`:has()`）。他の画面の焦点移動やアンカーの飛び先を
   変えない。値は帯の高さ 70px + 余白 18px */
html:has(.v2-savebar) { scroll-padding-bottom: 88px; }

/* ---- 8.21 動画の再生（`v2-player`） ------------------------------------------
   HTML5 の標準の操作に任せる。器は幅いっぱい、比は 16:9 で場所取りする
   （読み込み中に高さが跳ねない）。動画の下に、目的・合否基準・目標時間 */
.v2-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-text);
}

.v2-player__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0 0;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
}

/* ---- 8.22 カテゴリの木（`v2-tree`） ------------------------------------------
   深さ 3。1 行 = 1 カテゴリ。**行の操作は折り返す**（390px で 6 つ並ばない）。
   ドラッグ&ドロップを持たない（60_mvp3.md §1.2） */
.v2-tree { display: grid; gap: 0; }

.v2-tree__children { display: grid; gap: 0; padding-left: 24px; }

.v2-tree__node {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cocpi-v2-border);
}

.v2-tree__toggle {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cocpi-v2-text-muted);
  cursor: pointer;
}

.v2-tree__toggle svg { width: 20px; height: 20px; transition: transform var(--cocpi-v2-duration-fast); }
.v2-tree__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

.v2-tree__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }

.v2-tree__name { font-weight: 700; overflow-wrap: anywhere; }

/* つかみ手（ドラッグ&ドロップ。2026-09-03）。**標準の API だけ**（ADR-0014）。
   タッチとキーボードには効かないため、↑↓と「移動」の小窓を残す */
.v2-tree__handle {
  flex: 0 0 auto;
  color: var(--cocpi-v2-text-muted);
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.v2-tree__handle:active { cursor: grabbing; }

/* 落とし先の見せ方。**class の切り替えだけ**（JS は markup を作らない）。
   前 / 後ろは線、中は面 */
.v2-tree__node--dragging { opacity: 0.5; }
.v2-tree__node--drop-before { box-shadow: inset 0 2px 0 0 var(--cocpi-v2-brand); }
.v2-tree__node--drop-after { box-shadow: inset 0 -2px 0 0 var(--cocpi-v2-brand); }
.v2-tree__node--drop-into { background: var(--cocpi-v2-brand-soft); }

.v2-tree__counts { color: var(--cocpi-v2-text-secondary); font-size: 13px; white-space: nowrap; }

/* 操作は 2 列目の下に回す（1 列目の 24px を空けたまま）。折り返す */
.v2-tree__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.v2-tree__reason { grid-column: 2; margin: 0; color: var(--cocpi-v2-text-muted); font-size: 12px; }

/* 改名はその場の欄（ダブルクリックではなくボタン。スマートフォンで成立する） */
.v2-tree__rename { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-tree__rename .v2-input { flex: 1 1 12rem; max-width: 20rem; }

/* **元の `grid-column: 2` より後ろに置く**（同じ詳細度。前に置くと負ける —— 2026-09-03 に実測）。
   768px 以上では操作を行の右端に（3 列目）。**全部同じ大きさ**（2026-09-03 改訂） */
@media (min-width: 768px) {
  .v2-tree__node { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .v2-tree__actions { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
  .v2-tree__reason,
  .v2-tree__rename { grid-column: 2 / 4; }
}

.v2-tree__actions .v2-button { min-width: 40px; }

/* ---- 8.23 出典と評価（ナレッジチャット。`v2-sources` / `v2-chat__feedback`） -----
   **出典はサーバが決める**（DES-CMU-030 §4.2）。回答の下、回答と同じ側。
   最大 3 件。ナレッジ詳細へのリンク */
.v2-sources {
  align-self: flex-start;
  width: min(85%, 36rem);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
  list-style: none;
}


/* 行ごとに 40px の当たり判定を持たせる（スマートフォンで出典を押して詳細へ行く主要な操作） */
.v2-sources__item { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; font-size: 14px; }
.v2-sources__item > a { min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.v2-sources__page { color: var(--cocpi-v2-text-muted); font-size: 12px; white-space: nowrap; }

/* 評価。**押し直せる**（DES-DM-641 §2）。選んだ側は aria-pressed で塗る */
.v2-chat__feedback {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.v2-chat__feedback p { margin: 0; color: var(--cocpi-v2-text-secondary); font-size: 13px; }

.v2-chat__feedback .v2-button[aria-pressed="true"] {
  border-color: var(--cocpi-v2-brand);
  background: var(--cocpi-v2-brand-soft);
  color: var(--cocpi-v2-brand-text);
}

/* 定型質問（knowledge_preset_questions。最大 8）。入力欄の上に折り返して並べる。
   **0 件なら区画ごと出さない** */

/* JS が hidden を立てる器。**hidden が display に負けないようにする**（README 検査 5・14） */
.v2-presets[hidden],
.v2-notice[hidden],
.v2-attach__meta[hidden],
.v2-sources[hidden],
.v2-chat__feedback[hidden],
.v2-progress[hidden],
.v2-attach[hidden],
.v2-tree__rename[hidden],
.v2-tree__children[hidden],
.v2-tree__actions[hidden],
.v2-editor__pane[hidden],
.v2-savebar[hidden] { display: none; }

/* ---- ナレッジと動画の行（DES-UX-020 §8.27。2026-09-13 のオーナー指摘） ----
   動画は同日にカード（`v2-videocard`）で作ったが、取り下げてこの行へ揃えた（§8.26）。体裁を外す規則は
   `.v2-tasklist` と共有（入れ物に並べ方を持たせない） */

/* 1 件。**全体が 1 つのリンク。** 3 段の格子（アイコン / 本文 / 日付）。
   **`v2-tasklist` を流用しない** —— 行頭に警告色の点が付く（`::before`） */
.v2-doclist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 8px;
  border-bottom: 1px solid var(--cocpi-v2-border);
  color: inherit;
  text-decoration: none;
}

.v2-doclist > li:last-child > .v2-doclist__item { border-bottom: 0; }

@media (hover: hover) {
  .v2-doclist__item:hover { background: var(--cocpi-v2-bg-hover); }
}

/* 種別のアイコン（ナレッジは本文 / PDF、動画は再生）。**淡い色の枠**に入れて、
   行の頭を揃える */
.v2-doclist__icon {
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-brand-soft);
  color: var(--cocpi-v2-brand-text);
}

.v2-doclist__icon svg { width: 20px; height: 20px; }

/* 題は **2 行で省略**（2026-09-13 のオーナー指摘「スマホで見づらい」。全文は
   詳細・再生の画面）。状態の札は題に入れず、3 段目（`__meta`）に置く（省略で
   札が隠れる）。**文節の切れ目で折り返す**（`auto-phrase`。390px で
   「チェックリス / ト」と 1 文字だけ落ちた。対応しないブラウザでは従来の
   折り返しになるだけ） */
.v2-doclist__title {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 公開日。右端。**折り返さない**（題の 1 行目と高さを揃える） */
.v2-doclist__date {
  grid-column: 3;
  grid-row: 1;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
  white-space: nowrap;
}

/* 本文の冒頭。**1 行で省略**（改行は空白にして渡す） */
.v2-doclist__lead {
  grid-column: 2 / 4;
  margin: 0;
  overflow: hidden;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* タグと PDF のページ数。折り返す */
.v2-doclist__meta {
  display: flex;
  grid-column: 2 / 4;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* ---- 改行を保つ（DES-UX-020 §8.28。2026-09-13 のオーナー指摘） ---- */

/* 入力は改行を保って保存しているのに、**HTML が空白 1 つに畳んでいた。**
   **行頭の空白は畳む**（`pre-line`。入力の癖で字下げが出ない）。
   表の中は `cocpi-v2-tables.css`（折り返さない作りに合わせる） */
.v2-multiline { white-space: pre-line; overflow-wrap: anywhere; }

/* ---- 押している間（DES-UX-020 §8.29。2026-09-13） ----
   行・タブの面。ホバーとも現在地・選択とも違う色（`brand-soft-strong`）。
   **押した瞬間に塗る**（`transition: none`。120ms かけると、軽く押して離す
   間に色が付き切らない。離したときは元の規則の変化で戻る） */
.v2-tasklist__item:active,
.v2-doclist__item:active,
.v2-tabs__tab:active { background: var(--cocpi-v2-brand-soft-strong); transition: none; }

/* 過去の会話の行は **`bg-subtle`**。薄い文字（`__sub` の `text-muted`）を載せ、
   `brand-soft-strong` の上では 4.19 と 4.5 を割る（表の行と同じ理由。§8.29） */
.v2-chat-past__item:active { background: var(--cocpi-v2-bg-subtle); transition: none; }

/* 部品のクラスを持たない文中のリンク。文字の後ろだけを塗る */
a:not([class]):active { background: var(--cocpi-v2-brand-soft-strong); }