/* TASK 4 · 项目主页。所有覆盖限定在 project-detail，避免影响其余详情页。 */
#view-project-detail.project-redesign {
  width: min(100%, 1620px);
  max-width: none;
  margin: 0 auto;
}

#view-project-detail.project-redesign [hidden] {
  display: none !important;
}

#view-project-detail .plaza-project-page {
  width: 100%;
  gap: 18px;
  padding: 4px clamp(18px, 2.2vw, 38px) 54px;
}

#view-project-detail .plaza-project-back {
  min-height: 28px;
  padding: 0;
  color: #5656c5;
  font-size: 13px;
  font-weight: 650;
}

#view-project-detail .detail-layout {
  display: block;
  margin: 0;
}

#view-project-detail .detail-main {
  display: grid;
  gap: 30px;
}

/* 首屏：真实封面与项目信息并列，而不是把文字压在背景图上。 */
#view-project-detail .plaza-project-hero {
  isolation: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(390px, 1fr);
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 56px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-project-detail .plaza-project-hero::before,
#view-project-detail .plaza-project-hero::after {
  content: none;
  display: none;
}

#view-project-detail .plaza-project-cover {
  min-height: clamp(320px, 25vw, 430px);
  overflow: hidden;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#view-project-detail .plaza-project-cover.has-cover-img {
  background-color: #e8ebf6;
}

#view-project-detail .plaza-project-hero-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0;
}

#view-project-detail .plaza-project-status-row {
  display: flex;
  min-height: 24px;
  gap: 7px;
}

#view-project-detail .plaza-project-hero .badge,
#view-project-detail .plaza-project-hero .position-tag {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #dfe1e9;
  border-radius: 999px;
  color: #5b5bc2;
  background: #f4f4ff;
  font-size: 11px;
  font-weight: 650;
  backdrop-filter: none;
}

#view-project-detail .plaza-project-hero h1 {
  max-width: 19ch;
  margin: 16px 0 12px;
  color: #1d2030;
  font-family: var(--font) !important;
  font-size: clamp(30px, 2.25vw, 38px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-shadow: none;
}

#view-project-detail .plaza-project-hero > .plaza-project-hero-info > p#pd-desc {
  max-width: 46ch;
  margin: 0;
  color: #596071;
  font-size: 16px;
  line-height: 1.75;
}

#view-project-detail .plaza-project-people {
  margin: 16px 0 0;
  color: #687083;
  font-size: 13px;
}

#view-project-detail .plaza-project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
}

#view-project-detail .plaza-project-actions .btn {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #d9dce6;
  border-radius: 9px;
  color: #41485a;
  background: #fff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  backdrop-filter: none;
}

#view-project-detail .plaza-project-actions .btn-primary {
  border-color: #5e5ddd;
  color: #fff;
  background: #5e5ddd;
  box-shadow: none;
}

#view-project-detail .plaza-project-hero .plaza-project-actions .btn.btn-soft {
  border-color: transparent;
  color: #5a5ac7;
  background: transparent;
}

#view-project-detail .plaza-project-actions .btn:hover,
#view-project-detail .plaza-project-actions .btn:first-child:hover,
#view-project-detail .plaza-project-actions .btn-primary:hover {
  border-color: #7776e8;
  color: #4d4cbd;
  background: #f6f6ff;
  transform: none;
}

#view-project-detail .plaza-project-actions .btn-primary:hover {
  color: #fff;
  background: #5150ca;
}

/* 互动只保留轻量入口；原能力计算与规则 DOM 继续存在，不占阅读位置。 */
#view-project-detail .plaza-project-engage {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid #e8e9ef;
}

#view-project-detail .plaza-project-engage .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#view-project-detail .plaza-project-engage .engage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  order: 1;
}

#view-project-detail .plaza-project-engage .engage-toolbar .btn {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #73798a;
  background: transparent;
  font-size: 12px;
  font-weight: 550;
}

#view-project-detail .plaza-project-engage .engage-toolbar .btn:hover,
#view-project-detail .plaza-project-engage .engage-toolbar .btn.is-liked {
  color: #5656c6;
  background: #f3f3ff;
}

#view-project-detail .plaza-project-engage .pd-score-strip {
  display: none;
}

#view-project-detail .plaza-project-engage .engage-toast-line {
  order: 2;
  margin-left: 2px;
  color: #9a9faf;
  font-size: 11px;
}

/* Owner controls remain functional but sit below the visitor-facing actions. */
#view-project-detail .plaza-project-hero > :is(.pd-open-recruit-row, .pd-status-row, .pd-edit-row) {
  grid-column: 2;
  width: min(100%, 500px);
  margin: -13px 0 0;
  border: 1px solid #e2e3ea;
  border-radius: 9px;
  color: #505769;
  background: #fbfbfd;
  box-shadow: none;
  backdrop-filter: none;
}

#view-project-detail .plaza-project-hero > .pd-open-recruit-row {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
}

#view-project-detail .plaza-project-hero .pd-open-recruit-copy strong,
#view-project-detail .plaza-project-hero .pd-open-recruit-copy small,
#view-project-detail .plaza-project-hero .pd-status-label {
  color: #5f6677;
}

#view-project-detail .plaza-project-hero .pd-status-row {
  display: grid;
  grid-template-columns: auto minmax(132px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 12px;
}

#view-project-detail .plaza-project-hero #pd-status-select {
  min-height: 32px;
  border: 1px solid #dedfe7;
  border-radius: 7px;
  color: #3f4658;
  background: #fff;
}

#view-project-detail .plaza-project-hero > .pd-edit-row {
  overflow: hidden;
}

#view-project-detail .plaza-project-hero .pd-edit-row > summary,
#view-project-detail .plaza-project-hero .pd-edit-row > summary small {
  color: #4d5465;
}

#view-project-detail .plaza-project-hero .pd-edit-row :is(input, textarea) {
  border-color: #dedfe7;
  color: #303746;
  background: #fff;
}

/* 页面正文是连续阅读流，用 divider 和留白代替卡片堆叠。 */
#view-project-detail .project-detail-sheet {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-project-detail .project-detail-sheet > .panel {
  margin: 0;
  padding: 34px 0;
  border: 0;
  border-top: 1px solid #e5e6eb;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#view-project-detail .project-detail-sheet > .panel:first-child {
  border-top: 1px solid #e5e6eb;
}

#view-project-detail .project-detail-sheet .pd-section-head {
  margin: 0 0 16px;
}

#view-project-detail .project-detail-sheet .pd-section-head h3 {
  color: #252a38;
  font-family: var(--font) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

#view-project-detail .plaza-project-intro #pd-intro {
  max-width: 76ch;
  margin: 0;
  color: #495163;
  font-size: 16px;
  line-height: 1.85;
  white-space: pre-line;
}

#view-project-detail #pd-download-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

#view-project-detail #pd-download-panel .pd-section-head,
#view-project-detail #pd-download-panel .hint {
  margin: 0;
}

#view-project-detail #pd-download-panel .hint {
  color: #737b8d;
  font-size: 13px;
}

#view-project-detail #pd-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

#view-project-detail #pd-download-actions .btn,
#view-project-detail #pd-go-download {
  min-height: 36px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
}

#view-project-detail #pd-focus-panel {
  display: block;
  background: transparent;
}

#view-project-detail #pd-focus-panel .pd-section-head h3::before {
  content: none;
}

#view-project-detail .pd-focus-extra .tags {
  display: grid;
  gap: 0;
  max-width: 900px;
}

#view-project-detail .pd-focus-extra .tags span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #ececf0;
  border-radius: 0;
  color: #50586a;
  background: transparent;
  font-size: 14px;
}

#view-project-detail .pd-focus-extra .tags span:last-child {
  border-bottom: 0;
}

#view-project-detail .plaza-project-team .hint {
  margin: -8px 0 10px;
  color: #788093;
  font-size: 13px;
}

#view-project-detail .plaza-project-team .people-list {
  max-width: 760px;
}

#view-project-detail .plaza-project-team .people-list li {
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ececf0;
}

#view-project-detail .plaza-project-team .people-list b {
  color: #333a49;
  font-size: 14px;
}

#view-project-detail .plaza-project-team .people-list small {
  margin-top: 3px;
  color: #82899a;
  font-size: 12px;
}

#view-project-detail .plaza-project-team .people-list .empty-slot {
  color: #6666bd;
  background: transparent;
}

#view-project-detail .plaza-project-requests {
  max-width: 850px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e5e6eb;
}

#view-project-detail .pd-join-requests-title {
  margin: 0 0 8px;
  color: #383f50;
  font-size: 14px;
}

#view-project-detail .pd-join-request-item {
  padding: 12px 0;
  border-bottom: 1px solid #ececf0;
  border-radius: 0;
  background: transparent;
}

#view-project-detail .pd-join-request-actions .btn {
  min-height: 32px;
  border-radius: 7px;
  box-shadow: none;
}

#view-project-detail .timeline {
  position: relative;
  max-width: 900px;
  margin: 0;
}

#view-project-detail .timeline::before {
  content: "";
  position: absolute;
  left: 73px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #e2e3eb;
}

#view-project-detail .timeline li {
  position: relative;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 24px;
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 0;
  color: #4f5768;
  font-size: 14px;
  line-height: 1.65;
}

#view-project-detail .timeline li::after {
  content: "";
  position: absolute;
  left: 69px;
  top: 18px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #6a69d7;
}

#view-project-detail .timeline li time {
  color: #8a90a0;
  font-size: 12px;
}

#view-project-detail .update-compose textarea {
  min-height: 76px;
  border: 1px solid #dedfe7;
  border-radius: 9px;
  background: #fbfbfd;
}

#view-project-detail .pd-comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  max-width: 900px;
}

#view-project-detail .pd-comment-compose textarea {
  min-height: 78px;
  border-radius: 9px;
  font-size: 14px;
}

#view-project-detail .pd-comment-compose .btn {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 8px;
  box-shadow: none;
}

#view-project-detail .pd-comment-list {
  max-width: 900px;
  margin-top: 18px;
}

#view-project-detail .pd-comment-item {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid #e9e9ed;
  border-radius: 0;
  background: transparent;
}

#view-project-detail .pd-comment-item p {
  color: #50586a;
  font-size: 14px;
  line-height: 1.75;
}

#view-project-detail .pd-comment-empty {
  max-width: 900px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e9e9ed;
}

#view-project-detail .pd-backlink-details {
  padding: 18px 0 !important;
  background: transparent !important;
}

#view-project-detail .pd-backlink-summary {
  color: #777e8e;
}

/* 下半部分采用阅读主列 + 连续信息侧栏，避免 1920 宽屏空置。 */
#view-project-detail .plaza-project-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  align-items: start;
  gap: clamp(42px, 4vw, 64px);
}

#view-project-detail .plaza-project-main-column { min-width: 0; }

#view-project-detail .plaza-project-main-column > .panel { padding-block: 28px; }
#view-project-detail .plaza-project-main-column .pd-section-head h3 { font-size: 19px; }

#view-project-detail .plaza-project-sidebar {
  position: sticky;
  top: 92px;
  min-width: 0;
}

#view-project-detail .plaza-project-side-section {
  padding: 0 0 24px;
  border: 0;
  border-bottom: 1px solid #e5e6eb;
  background: transparent;
  box-shadow: none;
}

#view-project-detail .plaza-project-side-section + .plaza-project-side-section { padding-top: 24px; }
#view-project-detail .plaza-project-sidebar .pd-section-head { margin-bottom: 12px; }
#view-project-detail .plaza-project-sidebar .pd-section-head h3 { color: #303646; font-size: 16px; }
#view-project-detail .plaza-project-sidebar .hint { margin: -4px 0 9px; color: #7b8394; font-size: 12px; line-height: 1.65; }

#view-project-detail .plaza-project-team .people-list { max-width: none; }
#view-project-detail .plaza-project-team .people-list li { padding-block: 10px; }

#view-project-detail #pd-download-panel { display: block; }
#view-project-detail #pd-download-actions { display: grid; gap: 7px; margin: 10px 0 0; }
#view-project-detail #pd-download-actions .btn { width: fit-content; min-height: 34px; border-radius: 7px; font-size: 12px; }
#view-project-detail #pd-download-actions .btn-primary { color: #5656cf; border-color: transparent; background: transparent; }
#view-project-detail #pd-go-download { min-height: 28px; padding: 0; border: 0; color: #6b70bb; background: transparent; font-size: 12px; }

#view-project-detail .plaza-project-meta-list { display: flex; flex-wrap: wrap; gap: 7px; }
#view-project-detail .plaza-project-meta-list span { padding: 4px 8px; border: 1px solid #e3e5ec; border-radius: 6px; color: #687083; background: #fafbfc; font-size: 11px; }

#view-project-detail #pd-focus-panel { display: block; }
#view-project-detail .pd-focus-extra { max-width: none; }
#view-project-detail .plaza-project-need-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #ececf0; }
#view-project-detail .plaza-project-need-row b { display: block; color: #353b4a; font-size: 14px; }
#view-project-detail .plaza-project-need-row small { display: block; margin-top: 4px; color: #7b8292; font-size: 12px; }
#view-project-detail .plaza-project-need-count { flex: 0 0 auto; color: #5e60c6; font-size: 12px; font-weight: 650; }
#view-project-detail .plaza-project-gate { margin: 12px 0 0; color: #737b8c; font-size: 12px; }

#view-project-detail .plaza-project-requests { max-width: none; margin: 0; padding-top: 24px !important; }
#view-project-detail .plaza-project-main-column .timeline,
#view-project-detail .plaza-project-main-column .pd-comment-compose,
#view-project-detail .plaza-project-main-column .pd-comment-list,
#view-project-detail .plaza-project-main-column .pd-comment-empty { max-width: none; }

/* 互动只是一行操作，能力分与每日额度继续留在 JS / 隐藏 DOM 中。 */
#view-project-detail .plaza-project-engage { min-height: 0; padding: 14px 0 0; border: 0; border-top: 1px solid #e8e9ef; background: transparent !important; box-shadow: none !important; }
#view-project-detail .plaza-project-engage .engage-toast-line { display: none; }
#view-project-detail .plaza-project-engage .engage-toolbar .btn { min-height: 26px; padding: 0 7px; }

#view-project-detail .pd-backlink-details { margin-top: 0; }

@media (max-width: 1440px) {
  body:has(#view-project-detail.active) #main-topbar.plaza-redesign-topbar .plaza-redesign-topbar-inner { width: min(calc(100% - 40px), 1800px); }
  #view-project-detail .plaza-project-body-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 42px; }
}

@media (max-width: 1180px) {
  #view-project-detail .plaza-project-body-layout { grid-template-columns: 1fr; gap: 0; }
  #view-project-detail .plaza-project-sidebar { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 28px; border-top: 1px solid #e5e6eb; }
  #view-project-detail .plaza-project-side-section,
  #view-project-detail .plaza-project-side-section + .plaza-project-side-section { padding: 0; border: 0; }
}

@media (max-width: 1040px) {
  #view-project-detail .plaza-project-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    gap: 28px;
  }
}

@media (max-width: 820px) {
  #view-project-detail .plaza-project-page {
    padding-inline: 8px;
  }

  #view-project-detail .plaza-project-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  #view-project-detail .plaza-project-cover {
    min-height: min(58vw, 370px);
  }

  #view-project-detail .plaza-project-hero h1 {
    font-size: 30px;
  }

  #view-project-detail .plaza-project-hero > :is(.pd-open-recruit-row, .pd-status-row, .pd-edit-row) {
    grid-column: auto;
    width: 100%;
    margin-top: -10px;
  }

  #view-project-detail #pd-download-panel,
  #view-project-detail .pd-comment-compose {
    display: grid;
    grid-template-columns: 1fr;
  }

  #view-project-detail #pd-download-actions {
    margin-left: 0;
  }

  #view-project-detail .timeline::before {
    left: 61px;
  }

  #view-project-detail .timeline li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 20px;
  }

  #view-project-detail .timeline li::after {
    left: 57px;
  }
}

/* TASK 4.2：以更清晰的冷灰 divider 组织白底项目主页。 */
#view-project-detail.project-redesign {
  --project-divider: #d2d7e0;
  --project-column-divider: #e0e3e9;
}

/* 仅中和旧详情页壳的 12px 顶部偏移；其余 Header 完全沿用 plaza-task3 共用规则。 */
body:has(#view-project-detail.active) #main-topbar.plaza-redesign-topbar {
  top: 0;
}

.app:has(#view-project-detail.active) {
  gap: 0;
  padding: 0 0 48px;
}

#view-project-detail .project-detail-sheet > .panel,
#view-project-detail .project-detail-sheet > .panel:first-child {
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid var(--project-divider);
}

#view-project-detail .plaza-project-body-layout {
  gap: clamp(48px, 3.2vw, 56px);
}

#view-project-detail .plaza-project-sidebar {
  box-sizing: border-box;
  padding-left: 32px;
  border-left: 1px solid var(--project-column-divider);
}

#view-project-detail .plaza-project-side-section {
  border-bottom-color: var(--project-divider);
}

#view-project-detail .plaza-project-side-section + .plaza-project-side-section {
  padding-top: 20px;
}

#view-project-detail .plaza-project-sidebar .pd-section-head h3,
#view-project-detail .plaza-project-main-column .pd-section-head h3 {
  color: #272d3b;
  font-weight: 700;
}

#view-project-detail #pd-download-panel .hint {
  max-width: 26ch;
  margin: 0 0 10px;
  color: #687284;
  line-height: 1.55;
}

#view-project-detail #pd-download-actions {
  margin: 0 0 7px;
}

#view-project-detail #pd-download-actions .btn,
#view-project-detail #pd-download-actions .btn-primary,
#view-project-detail #pd-download-actions .plaza-project-resource-action {
  min-height: 30px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  color: #565fe1;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

#view-project-detail #pd-download-actions .btn:hover,
#view-project-detail #pd-go-download:hover {
  color: #424ac8;
  background: transparent;
  text-decoration: underline;
}

#view-project-detail #pd-go-download {
  min-height: 24px;
  color: #666fc9;
  font-size: 12px;
  font-weight: 650;
}

#view-project-detail .plaza-project-main-column .timeline li {
  min-height: 0;
  padding-block: 8px;
}

#view-project-detail .plaza-project-main-column .pd-comment-compose {
  gap: 14px;
}

@media (max-width: 1180px) {
  #view-project-detail .plaza-project-sidebar {
    padding-left: 0;
    border-left: 0;
  }
}