/* ── Project Overview Card ── */
.v10-po { flex-shrink: 0; padding: 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
/* Identity row (S2 finalize §4.2.1) — label-pill pairs left, primer
   link right. Name + description live in the persistent
   ProjectHeaderStrip. The role glyph (◆) is applied here in CSS via
   `data-role` so the data string stays semantic-free; same for the
   curator marker on a participant row. */
.v10-po-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-po-identity-pairs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}
.v10-po-identity-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v10-po-identity-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.v10-po-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.v10-po-badge[data-role="curator"]::before {
  content: "◆";
  margin-right: 4px;
  font-weight: 700;
  color: var(--text-success);
}
.v10-po-badge[data-role="curator"] {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
  color: var(--text-success);
}
.v10-po-badge[data-role="participant"] {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-primary);
}
.v10-po-badge[data-role="viewer"],
.v10-po-badge[data-role="unknown"] {
  color: var(--text-secondary);
}
.v10-po-badge[data-cg-type="public"] {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
  color: var(--text-success);
}
.v10-po-badge[data-cg-type="curated"] {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
  color: var(--text-warning);
}
.v10-po-badge[data-cg-type="unknown"] {
  color: var(--text-secondary);
}
.v10-po-identity-primer {
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  min-height: 28px;
  padding: 0 12px;
}
.v10-po-identity-primer:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-hover);
}
.v10-po-stat-strip { margin-bottom: 12px; }
/* ui-lead item 3 — section title above the At-a-glance grid so it
   matches the structure of the other peer regions (Knowledge
   Pipeline, Participant agents, Pending join requests). */
.v10-po-stat-block { margin-bottom: 12px; }
.v10-po-stat-block > .v10-po-section-title { margin-bottom: 8px; }
/* Participant agents list */
.v10-po-people { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.v10-po-people > .v10-po-section-title { margin-bottom: 8px; }
.v10-po-people-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}
.v10-po-participants-list { display: flex; flex-wrap: wrap; gap: 6px; }
.v10-po-participant {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);
}
/* Glyph is rendered in CSS so the data string the test reads stays
   unambiguous (just the suffix). Default participants get the
   hollow ◯ glyph in `--text-secondary`. */
.v10-po-participant::before {
  content: "◯ ";
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}
/* §4.2.1 Delta 1 (locked) — `.is-self` carries TWO signals only:
   weight (you-ness, paired with the ` · you` suffix in the data
   string) + the filled ◆ glyph in `--text-info`. No border or
   background override — three signals for one fact would be the
   M4 VM-hero regression pattern. */
.v10-po-participant.is-self { font-weight: 700; }
.v10-po-participant.is-self::before {
  content: "◆ ";
  color: var(--text-info);
}
/* A non-self curator also carries the filled ◆ glyph (canonical
   role glyph), tinted with the verified-trust color. No bold, no
   chip-level tint — the glyph + ` · curator` suffix carry the
   meaning. */
.v10-po-participant.is-curator:not(.is-self)::before {
  content: "◆ ";
  color: var(--text-success);
}
/* When the current user IS the curator, success color wins over
   info so curator role reads first. The .is-self bold is retained. */
.v10-po-participant.is-self.is-curator::before {
  color: var(--text-success);
}
.v10-po-participant-name {
  white-space: nowrap;
}
/* ui-lead item 2 — suffix tags render as separate spans with a
   CSS-driven `·` separator. Keeps the data string semantic-free
   (the tag text is just "you" / "curator" — no glyphs or
   punctuation in the DOM textContent). */
.v10-po-participant-tag {
  font-weight: 500;
  color: var(--text-secondary);
}
.v10-po-participant-tag::before {
  content: "·";
  margin: 0 6px;
  color: var(--text-ghost);
  font-weight: 400;
}
/* Pending join requests — peer section under Participant agents,
   curator-only. */
.v10-po-join { margin: 12px 0 0; padding: 12px 16px 0; border-top: 1px solid var(--border-subtle); }
.v10-po-join-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.v10-po-join-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.16);
  color: var(--text-warning);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.v10-po-join-count[data-empty="true"] {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border-color: var(--border-default);
}
.v10-po-join-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}
.v10-po-join-list { display: flex; flex-direction: column; gap: 6px; }
.v10-po-join-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}
.v10-po-join-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v10-po-join-name { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.v10-po-join-addr { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-po-join-actions { display: flex; gap: 6px; flex-shrink: 0; }
.v10-po-join-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.v10-po-join-btn.approve { background: rgba(34, 197, 94, 0.12); color: var(--text-success); border: 1px solid rgba(34, 197, 94, 0.32); }
.v10-po-join-btn.approve:hover { background: rgba(34, 197, 94, 0.2); }
.v10-po-join-btn.reject { background: rgba(239, 68, 68, 0.12); color: var(--text-danger); border: 1px solid rgba(239, 68, 68, 0.32); padding: 4px 8px; }
.v10-po-join-btn.reject:hover { background: rgba(239, 68, 68, 0.2); }
.v10-po-join-btn:disabled { opacity: 0.5; cursor: default; }
.v10-po-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
/* §4.2.1 ui-lead review finding #1 — even divider rhythm across all
   7 peer regions. The two boundaries that were previously missing
   borders (at-a-glance ↔ pipeline above; join-requests ↔ activity
   below) get them via `[data-section]` attribute selectors, which
   are the stable hook regardless of inner wrapper class. */
[data-section="activity"] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.v10-po-pipeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.v10-po-section-title {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}
.v10-po-section-desc {
  max-width: 760px;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.v10-po-pipeline-track {
  display: flex;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-elevated);
}
.v10-po-pipeline-seg {
  min-width: 0;
}
.v10-po-pipeline-empty {
  width: 100%;
  background: var(--border-subtle);
}
.v10-po-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.v10-po-pipeline-step {
  --po-layer-color: var(--border-strong);
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--po-layer-color) 28%, var(--border-default));
  border-radius: 8px;
  background: color-mix(in srgb, var(--po-layer-color) 6%, var(--bg-surface));
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}
.v10-po-pipeline-step:hover {
  border-color: color-mix(in srgb, var(--po-layer-color) 48%, var(--border-strong));
  background: color-mix(in srgb, var(--po-layer-color) 10%, var(--bg-hover));
}
.v10-po-pipeline-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--po-layer-color) 20%, transparent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.v10-po-pipeline-step-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.v10-po-pipeline-step-label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.v10-po-pipeline-step-desc {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.3;
}
.v10-po-pipeline-step-count {
  flex: 0 0 auto;
  max-width: 42%;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: right;
}

/* Primer footer (§4.2.1) — quiet last-row escape hatch. No card
   chrome; sits flush in the Overview's panel padding. */
.v10-po-primer-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}
.v10-po-primer-footer-lede {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.v10-po-primer-footer-arrow {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.v10-po-primer-footer-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-link);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 650;
}
.v10-po-primer-footer-link:hover { text-decoration: underline; }
.v10-po-primer-footer-sub {
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
}

@media (max-width: 1500px) {
  .v10-layer-switch-label-full { display: none; }
  .v10-layer-switch-label-compact { display: inline; }
  .v10-layer-action-label { display: none; }
  .v10-layer-action-btn {
    min-width: 30px;
    padding-left: 9px;
    padding-right: 9px;
  }
}

@media (max-width: 1320px) {
  .v10-layer-switch-label-full { display: none; }
  .v10-layer-switch-label-compact { display: inline; }
}

@media (max-width: 1180px) {
  .v10-layer-switch-btn { padding: 0 9px; gap: 5px; font-size: 11px; }
  .v10-layer-switch-count { display: none; }
  .v10-layer-switch-separator { margin: 0 4px; }
}

@media (max-width: 920px) {
  .v10-layer-switcher { padding: 0 2px; }
  .v10-layer-switch-btn {
    width: 30px;
    min-width: 30px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .v10-layer-switch-label { display: none; }
  .v10-layer-switch-separator { margin: 0 2px; }
  .v10-layer-switcher-spacer { flex: 0 0 2px; min-width: 2px; }
  .v10-layer-switcher-actions { gap: 2px; padding-right: 2px; }
  .v10-layer-action-btn {
    min-width: 28px;
    width: 28px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  .v10-po-identity,
  .v10-po-pipeline-head {
    flex-direction: column;
    align-items: stretch;
  }
  .v10-po-identity-pairs {
    flex-wrap: wrap;
  }
  .v10-po-identity-primer {
    align-self: flex-start;
  }
  .v10-po-pipeline-steps {
    grid-template-columns: 1fr;
  }
  .v10-po-primer-footer {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
