/* =================================================================
 * cv-components.css — 共有コンポーネント CSS（cv-* 正本）
 *
 * 出自: verification/page-home-server.css から昇格（8-6a・ルール無改修）。
 * 状態: functions.php からは未 enqueue（enqueue は 8-6b、live 切替は 8-7）。
 * 方針: docs/legacy-alias-enqueue-plan-2026-06.md（enqueue 順・alias 設計）
 *       docs/home-server-design-verification.md（検証経緯）
 * 構造の対応: docs/blueprints/home-server-block-plan.md
 * スコープ: 現状すべて .page-id-787 配下に限定（!important は使わない）。
 * 命名: cv-* 化済み（8-3a〜8-3e）。--hs-* は page layer の調整口として残置。
 * ================================================================= */

/* ---- Tokens（page layer・二層構成） ----
 * 共有基底は assets/css/_tokens.css の --cv-* / --c-* が持つ（light/dark 切替もそちら）。
 * ここでは --hs-* を残し、値を var(--cv-*) 参照に差し替える（ページ隔離＝調整の逃げ道）。
 * → コンポーネント CSS（--hs-* 参照）は無改修。テーマ別の値定義もこのファイルから消え、
 *   light/dark は _tokens.css の :root / [data-theme="dark"] が司る。
 * ページ固有の表情・階層・カード種別・Hero 調整が要る時は、ここで実値に上書きできる。
 * 前提: _tokens.css が先に読み込まれること（サンプルは <link> で両方を読み込む）。
 * 設計: docs/cv-naming-tokens-plan-2026-06.md / docs/tokens-css-promotion-2026-06.md
 */
.page-id-787 {
  --hs-bg: var(--cv-bg);
  --hs-bg-soft: var(--cv-bg-soft);
  --hs-bg-card: var(--cv-surface);

  --hs-text: var(--cv-text);
  --hs-text-muted: var(--cv-text-muted);
  --hs-text-subtle: var(--cv-text-subtle);

  --hs-border: var(--cv-border);
  --hs-shadow: var(--cv-shadow);
  --hs-shadow-hover: var(--cv-shadow-hover);

  /* ツール別アクセント（Home=赤を正本に確定・docs/token-open-decisions-2026-06.md） */
  --hs-accent: var(--c-home);
  --hs-accent-soft: var(--c-home-soft);

  --hs-note-bg: var(--cv-note-bg);
  --hs-note-border: var(--cv-note-border);
  --hs-note-text: var(--cv-note-text);

  --hs-nav-bg: var(--cv-nav-bg);
  --hs-nav-link: var(--cv-nav-link);

  --hs-hero-from: var(--cv-hero-from);
  --hs-hero-to: var(--cv-hero-to);
  --hs-hero-text: var(--cv-hero-text);
  --hs-hero-sub: var(--cv-hero-sub);
}

/* ---- Page base ---- */
body.page-id-787 {
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.75;
}
.page-id-787 a {
  color: var(--hs-accent);
  text-decoration: none;
}
.page-id-787 a:hover {
  text-decoration: underline;
}

/* 道具棚らしく抑えめの見出し（legacy インラインの font-weight:400 と整合）
   font-size は harness 依存（.verify-section h2:1.4rem）だったため検証 CSS 側に定義。[6-4] */
.page-id-787 h2 {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--hs-text);
}

/* ---- cv-hero（暫定）：legacy インライングラデを置き換え、トークン化 ---- */
.page-id-787 .cv-hero {
  background: linear-gradient(160deg, var(--hs-hero-from) 0%, var(--hs-hero-to) 100%);
  color: var(--hs-hero-text);
  padding: 48px 24px;
  text-align: center;
}
.page-id-787 .cv-hero h1 {
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: var(--hs-hero-text);
  line-height: 1.25;
}
.page-id-787 .cv-hero__sub {
  font-size: 0.85rem;
  color: var(--hs-hero-sub);
  margin: 0 auto 14px;
  letter-spacing: 0.02em;
}
.page-id-787 .cv-hero__lead {
  font-size: 0.95rem;
  color: var(--hs-hero-sub);
  margin: 0 auto 14px;
  max-width: 640px;
  line-height: 1.7;
}
.page-id-787 .cv-hero__badge {
  margin: 8px 0 0;
}

/* ---- cv-tool-status バッジ（メモ調・outlined） ---- */
.page-id-787 .cv-tool-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--hs-text-muted);
  color: var(--hs-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
/* Hero 内に置く場合は Hero のサブ色に同調させ、より控えめに */
.page-id-787 .cv-hero .cv-tool-status {
  border-color: var(--hs-hero-sub);
  color: var(--hs-hero-sub);
}

/* ---- cv-page-nav（5 項目想定・チェックリスト風にしない） ---- */
.page-id-787 ul.cv-page-nav {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: var(--hs-nav-bg);
  border: 1px solid var(--hs-border);
  border-radius: 10px;
  font-size: 0.92rem;
}
.page-id-787 ul.cv-page-nav li {
  margin: 0;
}
.page-id-787 ul.cv-page-nav li a {
  color: var(--hs-nav-link);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.page-id-787 ul.cv-page-nav li a:hover {
  background: var(--hs-accent-soft);
  color: var(--hs-accent);
  text-decoration: none;
}

/* ---- cv-grid（暫定・章ごとの最小列幅を --cv-min-col で指定） ---- */
.page-id-787 .cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--cv-min-col, 280px), 100%), 1fr));
  gap: 20px;
  margin: 18px 0;
}

/* ---- cv-section-soft（暫定・章単位の soft 背景。legacy の inline #f9f9f9 を置換） ---- */
.page-id-787 .cv-section-soft {
  background: var(--hs-bg-soft);
  padding: 32px 24px;
  border-radius: 12px;
}

/* ---- cv-card--usage（アイコン付きカード・[4] いまの構成） ----
 * shell は cv-card 基底へ委譲。usage 固有の差分のみ移送：
 *  - flex レイアウト（icon + body 横並び）
 *  - padding は 20px（基底 18px 20px と異なるため上書き）
 * flex/gap/align は基底に無いので .cv-card--usage (0,2,0) で持つ。
 * ★ padding だけは基底(0,2,0)と競合し、usage が基底より前に位置するため
 *   .cv-card.cv-card--usage (0,3,0) で order 非依存に上書きする。
 *   resting gap を (0,2,0) のままにするのは、@media(768px) の gap 上書き（同 (0,2,0)・後方）
 *   を効かせるため（(0,3,0) にすると mobile で gap が戻らない）。 */
.page-id-787 .cv-card--usage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.page-id-787 .cv-card.cv-card--usage {
  padding: 20px;
}
.page-id-787 .cv-card__icon {
  flex-shrink: 0;
  width: 40px;
  font-size: 1.9rem;
  line-height: 1;
}
.page-id-787 .cv-card__body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hs-text);
}
.page-id-787 .cv-card__body p {
  margin: 0;
  color: var(--hs-text-muted);
  line-height: 1.7;
}

/* ---- cv-card--service（他ツール導線カード・[5] 何が動いているか） ----
 * shell は cv-card 基底へ委譲。ただし service は resting で影なし（基底の
 * box-shadow を打ち消す）＋ hover で影を出す（移動なし・[6-8]）。
 * ★ base (.cv-card 0,2,0) と service の物理位置が前後するため、resting の影制御は
 *   .cv-card.cv-card--service (0,3,0) で order 非依存に上書きする。
 *   hover (.cv-card--service:hover 0,3,0) はこの後に置き、影を shadow-hover に。 */
.page-id-787 .cv-card.cv-card--service {
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-id-787 .cv-card--service:hover {
  border-color: var(--hs-accent);
  box-shadow: var(--hs-shadow-hover);
}
.page-id-787 .cv-card--service h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--hs-text);
}
.page-id-787 .cv-card--service p {
  margin: 0 0 10px;
  color: var(--hs-text-muted);
  line-height: 1.65;
}
/* cv-card__link: カード内リンク導線（service-link 由来）。
   旧 read-btn と同値で、検証ハーネスのリンク導線はこれに一本化済み
   （未使用の a.read-btn は 8-3 後クリーンアップで削除）。 */
.page-id-787 a.cv-card__link {
  color: var(--hs-accent);
  font-weight: 600;
  font-size: 0.92rem;
}
.page-id-787 a.cv-card__link:hover {
  text-decoration: underline;
}

/* ---- cv-card 基底（共通シェル・8-3a 導入） ----
 * 固有カードが重複して持っていたシェル（bg/border/radius/padding/shadow）を集約。
 * 値は lessons-card のシェルと同一。padding 18px 20px・shadow は多数派の既定。
 * 当面この基底を持つのは lessons カードのみ（パイロット）。usage/service/log/aff は
 * 8-3b 以降で段階移行し、既定と異なる箇所は各 modifier 側で上書きする。 */
.page-id-787 .cv-card {
  background: var(--hs-bg-card);
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--hs-shadow);
}

/* ---- cv-card--lesson（[6] 運用でわかったこと・当面 style-less modifier） ----
 * カードレベルの差分は持たない（シェルは cv-card 基底に委譲）。
 * 中身の見出し/本文タイポグラフィのみ（旧 .lessons-card h4/p から値そのまま移送）。 */
.page-id-787 .cv-card--lesson h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hs-text);
}
.page-id-787 .cv-card--lesson p {
  margin: 0;
  color: var(--hs-text-muted);
  line-height: 1.7;
}

/* ---- cv-note-panel（ノート風パネル・情報整理として機能） ----
 * 旧 .callout / .step-box を統合。両者は元から同一スタイル（視覚的に同一）。
 * 用途差（callout=補足/注記、step-box=手順）は --step modifier で意味のみ保持。
 * --step は当面スタイル無し（見た目不変）。将来の手順差別化はここに追加する。 */
.page-id-787 .cv-note-panel {
  background: var(--hs-note-bg);
  border: 1px solid var(--hs-note-border);
  border-left: 4px solid var(--hs-note-border);
  border-radius: 8px;
  padding: 14px 18px;
  color: var(--hs-note-text);
  line-height: 1.7;
}
/* block-plan §7 の <h4> + <p> パターンに対応 */
.page-id-787 .cv-note-panel h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hs-note-text);
  line-height: 1.4;
}
.page-id-787 .cv-note-panel > p {
  margin: 0;
  color: var(--hs-note-text);
}
.page-id-787 .cv-note-panel > p + p {
  margin-top: 6px;
}
/* legacy の <strong>＋<br> 表記にも当面対応 */
.page-id-787 .cv-note-panel strong {
  color: var(--hs-note-text);
}
.page-id-787 .cv-note-panel em {
  font-style: normal;
  font-weight: 600;
  opacity: 0.85;
  margin-right: 4px;
}

/* ---- cv-card--aff / aff-disclosure（[8] 使ったもの） ---- */
.page-id-787 .aff-disclosure {
  font-size: 0.88rem;
  color: var(--hs-text-muted);
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--hs-bg-soft);
  border-left: 3px solid var(--hs-border);
  border-radius: 4px;
  line-height: 1.6;
}
/* ---- cv-card--aff（[8] 使ったもの・icon+body+meta 型を流用） ----
 * shell は cv-card 基底（padding 18px 20px は基底既定と一致＝上書き不要）。
 * flex は aff 固有（gap 14px）。@media(768px) の gap 上書きを効かせるため (0,2,0) に置く。
 * __icon/__body/__meta は usage(8-3b)/log(8-3d) のグローバル値と異なるため、
 * .cv-card--aff スコープ(0,3,x)で aff の既存値に上書きする。 */
.page-id-787 .cv-card--aff {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* icon: usage の __icon(1.9rem/40px) を aff 値に上書き（flex-shrink/line-height は共通） */
.page-id-787 .cv-card--aff .cv-card__icon {
  font-size: 1.6rem;
  width: 32px;
}
/* aff の body は伸長する（usage の __body には無い） */
.page-id-787 .cv-card--aff .cv-card__body {
  flex: 1;
}
/* h4 は 1rem（usage の __body h4 1.05rem を上書き。weight/margin/color は共通） */
.page-id-787 .cv-card--aff .cv-card__body h4 {
  font-size: 1rem;
}
.page-id-787 .cv-card--aff .cv-card__body > p {
  margin: 0 0 8px;
  color: var(--hs-text-muted);
  line-height: 1.65;
  font-size: 0.92rem;
}
/* aff の meta は本文段落と同じ見え方（.cv-card--aff .cv-card__body > p が
 * font-size/color/margin/line-height を供給）。汎用 .cv-card__meta は中立化され
 * 等幅/字間を持たない（log 固有は .cv-card--log .cv-card__meta へ分離）ため、
 * aff 側の中和指定（旧 letter-spacing:normal / font-family:inherit）は不要となり削除。 */

/* ---- cv-card__meta（汎用 meta 要素・中立定義） ----
 * 小さめ・subtle の素朴な meta 行。等幅やカード別の装飾は持たない（責務分離）。
 * log 固有の等幅/字間は下の .cv-card--log .cv-card__meta に置く。
 * 注: log/aff とも color/margin は各カードの p 規則（.cv-card--log p /
 *     .cv-card--aff .cv-card__body > p）が詳細度で勝つため、ここの color/margin は
 *     実表示には出ない（中立既定として保持）。 */
.page-id-787 .cv-card__meta {
  font-size: 0.78rem;
  color: var(--hs-text-subtle);
  margin: 0 0 4px;
}

/* ---- cv-card--log（[9] 関連ログ・shell は cv-card 基底へ委譲） ----
 * cv-card--log は当面 style-less（シェルは基底）。中身 typography は旧 .log-card-* の値。
 * __note は modifier を被せず (0,2,0) を保ち、.cv-card--log p が勝つ既存挙動を再現。 */
/* log の meta は等幅タイムスタンプ調。汎用 __meta から分離した log 固有装飾。
 * letter-spacing/font-family は .cv-card--log p が設定しないため (0,3,0) でも
 * 旧 base __meta(0,2,0) と同じく適用＝見た目不変。 */
.page-id-787 .cv-card--log .cv-card__meta {
  letter-spacing: 0.05em;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
}
.page-id-787 .cv-card--log h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hs-text);
}
.page-id-787 .cv-card--log p {
  margin: 0 0 10px;
  color: var(--hs-text-muted);
  line-height: 1.65;
}
/* （旧 a.read-btn は検証ハーネスで未使用のため 8-3 後のクリーンアップで削除。
    カード内リンク導線は cv-card__link が担う。legacy テンプレの read-btn は
    live 統合時に別途対応＝docs/cv-readbtn-cleanup-2026-06.md 参照。） */
/* 個別記事 URL が未確定の cv-card--log 内に置く小さな注記 */
.page-id-787 .cv-card__note {
  font-size: 0.82rem;
  color: var(--hs-text-subtle);
  margin: 0;
  font-style: italic;
}
/* 関連ログ章末尾の Logs 抜け口リンク（grid の下に余白を取る） */
.page-id-787 .logs-out {
  margin-top: 18px;
}

/* ---- cv-bridge-section / cv-bridge-card（[10] 他の机へ） ---- */
.page-id-787 .cv-bridge-section {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--hs-border);
}
.page-id-787 .cv-bridge-section > h2 {
  margin: 0 0 18px;
}
.page-id-787 .cv-bridge-card {
  background: var(--hs-bg-card);
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* cv-card--service と同一の hover（border 強調 + --hs-shadow-hover、移動なし）に統一。[6-8] */
.page-id-787 .cv-bridge-card:hover {
  border-color: var(--hs-accent);
  box-shadow: var(--hs-shadow-hover);
}
.page-id-787 .cv-bridge-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--hs-text);
}
.page-id-787 .cv-bridge-card p {
  margin: 0 0 8px;
  color: var(--hs-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.page-id-787 .cv-bridge-card a {
  font-size: 0.9rem;
  color: var(--hs-accent);
  font-weight: 600;
}
.page-id-787 .cv-bridge-card a:hover {
  text-decoration: underline;
}

/* ---- cv-timeline（[11] 更新履歴・8-7a 新設） ----
 * Home Server 787 のページ更新履歴（日付＋一行メモ）専用の極小コンポーネント。
 * live インライン <style> の timeline 3 ルールを token 参照化して移植したもので、
 * 汎用部品ではない（log-card への寄せは意味・構造・見た目の不一致で不採用＝
 * docs/inline-style-inventory-8-7-2026-06.md §3）。他ページで履歴表現が必要に
 * なった時に汎用化を別 PR で判断する。
 * 旧ハードコード（線・点 #2c3e50 / 日付 #999）は token 化により light/dark
 * 両対応となる。最終的な色味は 8-7c の HUMAN 目視で確認。 */
.page-id-787 .cv-timeline-item {
  border-left: 2px solid var(--hs-border);
  padding-left: 20px;
  padding-bottom: 16px;
  margin-left: 8px;
  position: relative;
}
.page-id-787 .cv-timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--hs-text-muted);
  border-radius: 50%;
}
.page-id-787 .cv-timeline-date {
  font-size: 0.8rem;
  color: var(--hs-text-subtle);
  margin-bottom: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .page-id-787 .cv-card--usage,
  .page-id-787 .cv-card--aff {
    flex-direction: column;
    gap: 8px;
  }
  .page-id-787 ul.cv-page-nav {
    font-size: 0.85rem;
  }
  .page-id-787 .cv-hero {
    padding: 36px 20px;
  }
  .page-id-787 .cv-hero h1 {
    font-size: 1.5rem;
  }
  .page-id-787 .cv-section-soft {
    padding: 24px 16px;
  }
}