/* Project overview — the per-project landing page (frontend/js/project-overview.js).
     Reuses .stat-tiles/.stat-tile from dashboard.css for the summary row, and
     the work-item/goal badge classes from work-items.css/goals.css so rows
     read consistently with their full-tab counterparts. */
  #project-overview { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
  #po-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .po-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    animation: list-row-in 0.28s ease both;
  }
  #po-grid .po-card:nth-child(1) { animation-delay: 0ms; }
  #po-grid .po-card:nth-child(2) { animation-delay: 25ms; }
  #po-grid .po-card:nth-child(3) { animation-delay: 50ms; }
  #po-grid .po-card:nth-child(4) { animation-delay: 75ms; }
  #po-grid .po-card:nth-child(5) { animation-delay: 100ms; }
  #po-grid .po-card:nth-child(n+6) { animation-delay: 120ms; }
  @media (prefers-reduced-motion: reduce) {
    .po-card { animation: none; }
  }
  .po-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
  }
  .po-card-head h3 {
    margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 7px; color: var(--text);
  }
  .po-card-head h3 .icon-svg { width: 14px; height: 14px; }
  .po-card-head .po-view-all { font-size: 11px; }
  .po-card-body { display: flex; flex-direction: column; }
  .po-card-body-clickable { cursor: pointer; }
  .po-card-body-clickable:hover { background: var(--panel-2); }
  .po-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-size: 12px; border-bottom: 1px solid var(--border);
  }
  .po-row:last-child { border-bottom: none; }
  .po-work-item-row, .po-workspace-row { cursor: pointer; transition: background 0.15s ease; }
  .po-work-item-row:hover, .po-workspace-row:hover { background: var(--panel-2); }
  .po-row-title {
    flex: 1; min-width: 0; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .po-row-meta { flex-shrink: 0; font-size: 10.5px; color: var(--text-dim); }
  .po-overdue { color: var(--red); font-weight: 600; }
  .po-empty { padding: 14px; font-size: 12px; color: var(--text-dim); }
  .po-status-label { flex-shrink: 0; font-size: 10.5px; font-weight: 700; }
  .po-status-label.dim { color: var(--text-dim); }
  .po-status-label.accent { color: var(--accent); }
  .po-status-label.accent-2 { color: var(--accent-2); }
  .po-status-label.amber { color: var(--amber); }
  .po-status-label.green { color: var(--green); }
  .po-details-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 14px; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text);
  }
  .po-details-row:last-child { border-bottom: none; }
  .po-details-label { flex-shrink: 0; color: var(--text-dim); }
  .po-details-path {
    font-family: var(--mono); font-size: 11px; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }