/* onboarding-schedule-2026-05.html 専用の追加スタイル
 * nanco.css + overview.css + onboarding-master.css の上に重ねる
 * 設計方針: 「いつ・誰が・何を・どれだけ」を視覚的に詰めて見せる
 */

/* ============================================================
   1. 容量ゲージ (週ごとの充足率)
   ============================================================ */

.capacity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 32px;
}
@media (max-width: 800px) { .capacity-grid { grid-template-columns: 1fr; } }

.capacity-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.capacity-card.is-over { border-color: rgba(199, 90, 74, 0.4); background: rgba(199, 90, 74, 0.03); }
.capacity-card.is-tight { border-color: rgba(180, 134, 42, 0.4); background: rgba(180, 134, 42, 0.03); }
.capacity-card.is-ok { border-color: rgba(74, 143, 106, 0.4); background: rgba(74, 143, 106, 0.03); }

.capacity-week {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}
.capacity-card.is-over .capacity-week { color: var(--bad); }
.capacity-card.is-tight .capacity-week { color: var(--warn); }
.capacity-card.is-ok .capacity-week { color: var(--good); }

.capacity-range {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.capacity-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  margin-bottom: 8px;
}
.capacity-row:last-child { margin-bottom: 0; }

.capacity-name { color: var(--ink); font-weight: 600; }

.capacity-bar {
  position: relative;
  height: 8px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.capacity-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 999px;
  background: var(--teal);
}
.capacity-bar-fill.over { background: var(--bad); }
.capacity-bar-fill.tight { background: var(--warn); }
.capacity-bar-fill.ok { background: var(--good); }

/* 容量上限ライン */
.capacity-bar::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink-mute);
  opacity: 0.35;
}
.capacity-bar.cap-50::after { left: 50%; }
.capacity-bar.cap-60::after { left: 60%; }
.capacity-bar.cap-67::after { left: 66.67%; }
.capacity-bar.cap-75::after { left: 75%; }
.capacity-bar.cap-100::after { left: 100%; }

.capacity-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-mute);
}
.capacity-row.is-over .capacity-value { color: var(--bad); }
.capacity-row.is-tight .capacity-value { color: var(--warn); }

.capacity-verdict {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.capacity-verdict b {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.capacity-card.is-over .capacity-verdict b { background: var(--bad); color: #fff; }
.capacity-card.is-tight .capacity-verdict b { background: var(--warn); color: #fff; }
.capacity-card.is-ok .capacity-verdict b { background: var(--good); color: #fff; }

/* ============================================================
   2. 依存チェーン図
   ============================================================ */

.dep-chains {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
}

.dep-chain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.dep-chain-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 4px;
}

.dep-chain-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.dep-chain.is-critical .dep-chain-label { color: var(--bad); }
.dep-chain.is-critical .dep-chain-title { color: var(--ink); }

.dep-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.dep-node {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font-mono);
}
.dep-chain.is-critical .dep-node { border-color: rgba(199, 90, 74, 0.4); background: rgba(199, 90, 74, 0.05); }

.dep-node-id {
  font-size: 10px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 0.04em;
}
.dep-chain.is-critical .dep-node-id { color: var(--bad); }

.dep-node-name {
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.dep-arrow {
  color: var(--teal);
  font-weight: 700;
  font-size: 16px;
  padding: 0 4px;
}
.dep-chain.is-critical .dep-arrow { color: var(--bad); }

.dep-branch {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}

/* ============================================================
   3. 週次カンバン (3レーン × 日付)
   ============================================================ */

.week-grid {
  margin: 0 0 28px;
}

.week-head {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
  align-items: center;
}

.week-head-day {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-head-owner {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  letter-spacing: -0.01em;
}
.week-head-owner.is-anezaki { color: var(--teal-dark); }
.week-head-owner.is-fukaishi { color: var(--ink); }
.week-head-owner.is-maro { color: var(--ink-mute); }

.week-day-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  align-items: stretch;
}
.week-day-row:last-child { border-bottom: 0; }
.week-day-row.is-pivot { background: rgba(54, 121, 118, 0.04); border-radius: 4px; padding: 10px 6px; border-bottom-style: solid; border-bottom-color: var(--teal); }

@media (max-width: 700px) {
  .week-head, .week-day-row { grid-template-columns: 1fr; }
  .week-head-owner { display: none; }
  .week-day-row > .task-cell { padding-top: 4px; }
  .week-day-row > .task-cell:not(:empty)::before {
    content: attr(data-owner);
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
}

.week-day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.week-day-label sup { font-size: 9px; color: var(--ink-faint); margin-left: 1px; font-weight: 600; }
.week-day-label.is-pivot { color: var(--teal-dark); }
.week-day-label .star { color: var(--bad); font-size: 11px; margin-left: 4px; }

.task-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-pill {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}
.task-pill.is-priority { border-left-color: var(--bad); background: rgba(199, 90, 74, 0.03); }
.task-pill.is-soon { border-left-color: var(--warn); background: rgba(180, 134, 42, 0.03); }
.task-pill.is-done { border-left-color: var(--good); background: rgba(74, 143, 106, 0.03); }
.task-pill.is-meta { border-left-color: var(--ink-mute); background: var(--bg); opacity: 0.85; }

.task-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-tint);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.task-pill.is-priority .task-id { color: var(--bad); background: rgba(199, 90, 74, 0.12); }
.task-pill.is-soon .task-id { color: var(--warn); background: rgba(180, 134, 42, 0.12); }
.task-pill.is-done .task-id { color: var(--good); background: rgba(74, 143, 106, 0.12); }

.task-h {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0.02em;
}

/* ============================================================
   4. 削減提案テーブル (元→変更後)
   ============================================================ */

.reduce-row {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 100px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
}
@media (max-width: 700px) { .reduce-row { grid-template-columns: 1fr; } .reduce-arrow { display: none; } }

.reduce-side-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.reduce-side-content {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.reduce-side.is-before .reduce-side-content { color: var(--ink-mute); }
.reduce-side.is-after .reduce-side-content { color: var(--teal-dark); font-weight: 600; }

.reduce-arrow {
  text-align: center;
  font-size: 18px;
  color: var(--teal);
  font-weight: 700;
}

.reduce-save {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--good);
}

/* ============================================================
   5. 5月 Top 5 ステータスバー
   ============================================================ */

.top5-row {
  display: grid;
  grid-template-columns: 24px 1fr 100px 100px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 6px;
}

.top5-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
  text-align: center;
  background: var(--teal-tint);
  border-radius: 4px;
  padding: 2px 0;
}

.top5-name {
  font-size: 13px;
  color: var(--ink);
}
.top5-name code { font-size: 12px; }

.top5-due {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.top5-status {
  text-align: right;
}

/* ============================================================
   6. リスクテーブル (severity 軸)
   ============================================================ */

.risk-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.risk-item.is-high { border-left-color: var(--bad); background: rgba(199, 90, 74, 0.03); }
.risk-item.is-mid { border-left-color: var(--warn); background: rgba(180, 134, 42, 0.03); }
.risk-item.is-low { border-left-color: var(--teal-light); }

.risk-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.risk-impact, .risk-mitigation {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 2px 0;
  line-height: 1.5;
}
.risk-impact b { color: var(--bad); font-weight: 700; }
.risk-mitigation b { color: var(--good); font-weight: 700; }

/* ============================================================
   7. AI 委任マップ
   ============================================================ */

.delegate-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 80px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
}
@media (max-width: 700px) { .delegate-row { grid-template-columns: 1fr; } }

.delegate-task {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.delegate-task .task-id { margin-right: 6px; }

.delegate-plan {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}

.delegate-save {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--good);
  text-align: right;
}

/* ============================================================
   8. ヘッダー強調
   ============================================================ */

.schedule-hero {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  margin: 0 0 32px;
  position: relative;
  overflow: hidden;
}
.schedule-hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.schedule-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 8px;
  position: relative;
}
.schedule-hero-title {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  position: relative;
}
.schedule-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: 13px;
  opacity: 0.92;
  position: relative;
}
.schedule-hero-meta span b { font-weight: 700; opacity: 0.85; margin-right: 6px; }