/* Project 产品演示组件
 * 结构对照 Electron 的 ProjectSidebarContent、ProjectHeader、
 * ProjectWorkspaceNavigation 与 ProjectTasksPane。
 */

.tt-product-demo--project {
  background: #ffffff;
}

.tt-project-shell {
  display: grid;
  grid-template-columns: 17.2cqw minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tt-project-sidebar {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.62cqw 0.58cqw 0.9cqw;
  border-right: 1px solid var(--tt-line);
  background: #fafafa;
  color: #4c4945;
}

.tt-project-sidebar__current {
  display: flex;
  align-items: center;
  gap: 0.52cqw;
  height: 2.62cqw;
  padding: 0 0.62cqw;
  border-radius: 0.62cqw;
  background: #efeeec;
}

.tt-project-sidebar__current strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #302e2b;
  font-size: var(--tt-text-message);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-folder-icon {
  display: grid;
  place-items: center;
  width: 1.42cqw;
  height: 1.42cqw;
  border-radius: 0.38cqw;
  background: rgba(221, 122, 32, 0.1);
  color: var(--tt-accent);
}

.tt-project-folder-icon svg,
.tt-project-sidebar__exit {
  width: 0.82cqw;
  height: 0.82cqw;
}

.tt-project-sidebar__exit {
  color: #a09c96;
}

.tt-project-sidebar__section {
  margin-top: 0.9cqw;
}

.tt-project-sidebar__heading {
  display: flex;
  align-items: center;
  height: 1.65cqw;
  padding: 0 0.48cqw;
  color: #5c5853;
  font-size: var(--tt-text-message);
}

.tt-project-sidebar__heading strong {
  font-weight: 500;
}

.tt-project-sidebar__heading span {
  margin-left: 0.28cqw;
  color: #aaa6a0;
}

.tt-project-sidebar__heading svg {
  width: 0.72cqw;
  height: 0.72cqw;
  margin-left: auto;
  color: #aaa6a0;
}

.tt-project-side-task {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 0.25cqw;
  min-width: 0;
  padding: 0.43cqw 0.48cqw 0.34cqw;
  border-radius: 0.4cqw;
}

.tt-project-side-task__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.44cqw;
  overflow: hidden;
  color: #4c4945;
  font-size: var(--tt-text-meta);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-side-task__title svg {
  width: 0.86cqw;
  height: 0.86cqw;
  flex: 0 0 auto;
}

.tt-project-side-task__badge {
  margin-left: 0.38cqw;
  padding: 0.08cqw 0.34cqw;
  border-radius: 0.28cqw;
  background: #f0efed;
  color: #8a857e;
  font-size: var(--tt-text-micro);
}

.tt-project-side-task__run {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  min-width: 0;
  padding-left: 0.28cqw;
  overflow: hidden;
  color: #6f6a64;
  font-size: var(--tt-text-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-side-task__run i {
  width: 0.38cqw;
  height: 0.38cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--tt-accent);
}

.tt-project-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 2.05cqw 2.25cqw 1.15cqw;
  background: #ffffff;
}

.tt-project-header {
  flex: 0 0 auto;
}

.tt-project-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
}

.tt-project-title-icon {
  display: grid;
  place-items: center;
  width: 3.35cqw;
  height: 3.35cqw;
  flex: 0 0 auto;
  border-radius: 0.82cqw;
  background: rgba(221, 122, 32, 0.075);
  color: var(--tt-accent);
}

.tt-project-title-icon svg {
  width: 1.45cqw;
  height: 1.45cqw;
}

.tt-project-title-copy {
  display: grid;
  min-width: 0;
  gap: 0.18cqw;
  margin-left: 0.9cqw;
}

.tt-project-title-copy strong {
  overflow: hidden;
  color: #2f2c29;
  font-size: var(--tt-text-subtitle);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-title-copy small {
  overflow: hidden;
  color: #aaa6a0;
  font-size: var(--tt-text-meta);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-manage {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  margin-left: auto;
  padding: 0.4cqw 0.78cqw;
  border-radius: 0.5cqw;
  background: #f3f2f0;
  color: #4f4b46;
  font-size: var(--tt-text-meta);
  font-weight: 500;
}

.tt-project-manage svg {
  width: 0.82cqw;
  height: 0.82cqw;
}

.tt-project-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.48cqw;
  margin-top: 0.75cqw;
  color: #a19d97;
  font-size: var(--tt-text-caption);
  font-weight: 500;
  white-space: nowrap;
}

.tt-project-breadcrumb svg {
  width: 0.74cqw;
  height: 0.74cqw;
  color: var(--tt-accent);
}

.tt-project-breadcrumb b {
  color: #d0ccc7;
  font-weight: 400;
}

.tt-project-breadcrumb em {
  color: var(--tt-accent);
  font-style: normal;
}

.tt-project-presence {
  display: flex;
  align-items: center;
  gap: 0.46cqw;
  margin-top: 0.48cqw;
  color: #a19d97;
  font-size: var(--tt-text-caption);
}

.tt-project-presence > i {
  width: 0.18cqw;
  height: 0.18cqw;
  border-radius: 50%;
  background: #bbb7b1;
}

.tt-project-presence span:last-child {
  display: flex;
  align-items: center;
  gap: 0.34cqw;
}

.tt-project-presence span:last-child b {
  width: 0.34cqw;
  height: 0.34cqw;
  border-radius: 50%;
  background: var(--tt-green);
}

.tt-project-tabs {
  display: flex;
  height: 3.05cqw;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0.22cqw;
  margin-top: 1.25cqw;
  border-bottom: 1px solid rgba(42, 38, 33, 0.065);
}

.tt-project-tabs span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.42cqw;
  padding: 0 0.62cqw;
  color: #a29e98;
  font-size: var(--tt-text-meta);
  white-space: nowrap;
}

.tt-project-tabs span.is-active {
  color: #393632;
  font-weight: 500;
}

.tt-project-tabs span.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 0.1cqw;
  background: var(--tt-accent);
}

.tt-project-tabs svg {
  width: 0.83cqw;
  height: 0.83cqw;
}

.tt-project-tabs .is-active svg {
  color: var(--tt-accent);
}

.tt-project-content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding-top: 1.15cqw;
}

.tt-project-content-head {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 1cqw;
}

.tt-project-content-head > div:first-child {
  min-width: 0;
  flex: 1;
}

.tt-project-content-head > div:first-child > span {
  color: #9b9690;
  font-size: var(--tt-text-caption);
  text-transform: uppercase;
}

.tt-project-content-head h4 {
  margin: 0.12cqw 0 0;
  color: #2f2c29;
  font-size: var(--tt-text-subtitle);
  font-weight: 600;
  line-height: 1.35;
}

.tt-project-content-head p {
  max-width: 52cqw;
  margin: 0.18cqw 0 0;
  overflow: hidden;
  color: #77726c;
  font-size: var(--tt-text-caption);
  line-height: 1.55;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.48cqw;
}

.tt-project-actions span {
  display: flex;
  align-items: center;
  gap: 0.34cqw;
  padding: 0.36cqw 0.58cqw;
  border-radius: 0.42cqw;
  color: #6c6761;
  font-size: var(--tt-text-caption);
  font-weight: 500;
}

.tt-project-actions span.is-primary {
  background: #f3f2f0;
  color: #3d3935;
}

.tt-project-actions svg {
  width: 0.78cqw;
  height: 0.78cqw;
}

.tt-project-actions b {
  font-size: var(--tt-text-message);
  font-weight: 400;
}

.tt-project-orchestrator {
  display: flex;
  min-width: 0;
  height: 3.75cqw;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.72cqw;
  margin-top: 1.02cqw;
  padding: 0 0.95cqw;
  border: 1px solid rgba(221, 122, 32, 0.12);
  border-radius: 0.72cqw;
  background: rgba(221, 122, 32, 0.035);
  color: #423e39;
}

.tt-project-orchestrator strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: var(--tt-text-meta);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-orchestrator > svg {
  width: 0.78cqw;
  height: 0.78cqw;
  color: #77726c;
}

.tt-project-bot {
  display: grid;
  place-items: center;
  width: 1.72cqw;
  height: 1.72cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(221, 122, 32, 0.1);
  color: var(--tt-accent);
}

.tt-project-bot svg {
  width: 0.88cqw;
  height: 0.88cqw;
}

.tt-project-board {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72cqw;
  margin-top: 1.02cqw;
}

.tt-project-lane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0.66cqw;
  border-radius: 0.72cqw;
  background: #f8f8f7;
}

.tt-project-lane header {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 0.14cqw;
  padding: 0 0.18cqw;
}

.tt-project-lane header > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.4cqw;
}

.tt-project-lane header i {
  width: 0.42cqw;
  height: 0.42cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #aaa6a0;
}

.tt-project-lane.is-progress header i { background: var(--tt-accent); }
.tt-project-lane.is-done header i { background: var(--tt-green); }
.tt-project-lane.is-cancelled header i { background: #aaa6a0; }

.tt-project-lane header strong {
  overflow: hidden;
  color: #45413d;
  font-size: var(--tt-text-meta);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-lane header b {
  color: #aaa6a0;
  font-size: var(--tt-text-caption);
  font-weight: 400;
}

.tt-project-lane header em {
  color: #77726c;
  font-size: var(--tt-text-message);
  font-style: normal;
}

.tt-project-lane header small {
  width: 100%;
  overflow: hidden;
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-task-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin-top: 0.58cqw;
  padding: 0.72cqw;
  border-radius: 0.66cqw;
  background: rgba(255, 255, 255, 0.94);
}

.tt-project-priority {
  color: #a19d97;
  font-size: var(--tt-text-micro);
  font-weight: 500;
}

.tt-project-priority.is-high,
.tt-project-priority.is-urgent {
  color: #d75750;
}

.tt-project-task-card > strong {
  display: -webkit-box;
  margin-top: 0.18cqw;
  overflow: hidden;
  color: #3c3935;
  font-size: var(--tt-text-caption);
  font-weight: 600;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tt-project-task-card > p {
  overflow: hidden;
  margin: 0.18cqw 0 0;
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-task-card > small {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.3cqw;
  margin-top: 0.48cqw;
  overflow: hidden;
  color: #aaa6a0;
  font-size: var(--tt-text-micro);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tt-project-task-card > small i {
  display: grid;
  place-items: center;
  width: 1.08cqw;
  height: 1.08cqw;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f0efed;
  color: #77726c;
  font-style: normal;
  font-weight: 600;
}

.tt-project-task-card--accepted {
  min-height: 7.4cqw;
}

.tt-project-deliverable {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.32cqw;
  margin-top: 0.55cqw;
  padding: 0.38cqw 0.45cqw;
  border-radius: 0.38cqw;
  background: rgba(54, 166, 106, 0.07);
  color: #418467;
  font-size: var(--tt-text-micro);
  font-weight: 500;
  line-height: 1.35;
}

.tt-project-deliverable svg {
  width: 0.72cqw;
  height: 0.72cqw;
  flex: 0 0 auto;
}

.tt-project-empty {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45cqw;
  color: #b8b4ae;
  font-size: var(--tt-text-caption);
}

.tt-project-empty svg {
  width: 1.05cqw;
  height: 1.05cqw;
}

@media (prefers-reduced-motion: no-preference) {
  .feat__media .tt-product-demo--project .tt-project-content-head,
  .feat__media .tt-product-demo--project .tt-project-orchestrator,
  .feat__media .tt-product-demo--project .tt-project-lane,
  .feat__media .tt-product-demo--project .tt-project-task-card,
  .feat__media .tt-product-demo--project .tt-project-deliverable {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }

  .feat__media.is-demo-active .tt-product-demo--project .tt-project-content-head {
    animation: tt-project-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--project .tt-project-orchestrator {
    animation: tt-project-step-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms both;
  }

  .feat__media.is-demo-active .tt-product-demo--project .tt-project-lane {
    animation: tt-project-step-in 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(650ms + var(--tt-lane-index) * 90ms);
  }

  .feat__media.is-demo-active .tt-product-demo--project .tt-project-task-card {
    animation: tt-project-card-in 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(920ms + var(--tt-card-index) * 90ms);
  }

  .feat__media.is-demo-active .tt-product-demo--project .tt-project-deliverable {
    animation: tt-project-delivery-in 720ms ease-out 1580ms both;
  }

  .tt-product-demo--project .tt-project-presence span:last-child b {
    animation: tt-project-presence 2.8s ease-in-out infinite;
  }
}

@keyframes tt-project-step-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.32cqw, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tt-project-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.42cqw, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tt-project-delivery-in {
  0% {
    opacity: 0;
    background: rgba(54, 166, 106, 0.02);
    transform: translate3d(0, 0.22cqw, 0);
  }
  55% {
    opacity: 1;
    background: rgba(54, 166, 106, 0.13);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    background: rgba(54, 166, 106, 0.07);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tt-project-presence {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}