.mp-project-create-dialog {
  width: min(100%, 520px);
  padding: 0;
  overflow: hidden;
}

.mp-customer-modal {
  z-index: 90;
}

.mp-customer-create-dialog {
  width: min(100%, 460px);
  padding: 0;
  overflow: hidden;
}

.mp-customer-create-dialog > .mp-form-error {
  margin: 16px 24px 0;
}

.mp-customer-create-dialog form {
  padding: 18px 24px 22px;
}

.mp-project-create-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 17px;
  border-bottom: 1px solid var(--border);
}

.mp-project-create-dialog__head .mp-modal__title {
  margin: 3px 0 5px;
  font-size: 1.35rem;
}

.mp-project-create-dialog__head p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.mp-project-create-dialog__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.mp-project-create-dialog > .mp-form-error {
  margin: 16px 24px 0;
}

.mp-project-create-dialog form {
  padding: 18px 24px 22px;
}

.mp-project-create-dialog .mp-form-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.mp-project-sow {
  margin: 0;
  padding: 0;
  border: 0;
}

.mp-project-sow legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-project-sow > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mp-project-sow label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.mp-project-sow input {
  accent-color: var(--accent, #ff5a00);
}

.mp-project-detail-panel .mp-panel__head {
  align-items: center;
}

.mp-project-detail-panel .mp-panel__head > [data-project-edit] {
  margin-left: auto;
}

.mp-project-edit {
  margin-top: 16px;
}

.mp-project-edit .mp-modal__actions {
  padding-top: 18px;
}

.mp-location-field {
  position: relative;
}

.mp-city-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.18);
}

.mp-city-results button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mp-city-results button:hover,
.mp-city-results button:focus-visible {
  background: var(--surface2);
}

.mp-team {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.mp-team__title,
.mp-team-edit legend {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-team__dl {
  margin-bottom: 0;
}

.mp-team-edit {
  margin: 0;
  padding: 0;
  border: 0;
}

.mp-team-edit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.mp-person-field {
  position: relative;
}

.mp-person-field[hidden] {
  display: none;
}

.mp-person-input {
  display: flex;
  gap: 6px;
}

.mp-person-input input {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-person-clear {
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.mp-person-results button strong {
  display: block;
}

.mp-person-email {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.mp-person-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
}

.mp-team-people {
  margin: 0;
  padding-left: 18px;
}

.mp-team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.mp-team-member {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.mp-team-member button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.mp-lc-documents {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.mp-lc-documents__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mp-lc-documents__head h4,
.mp-lc-documents__head span {
  margin: 0;
}

.mp-lc-documents__head p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-lc-documents__head span,
.mp-lc-doc-module__head span,
.mp-lc-doc-list span {
  color: var(--muted);
  font-size: 0.78rem;
}

.mp-lc-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mp-lc-doc-module {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
}

.mp-lc-doc-module__head,
.mp-lc-doc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mp-lc-doc-module__head h4,
.mp-lc-doc-module__head p {
  margin: 0;
}

.mp-lc-doc-module__head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.mp-lc-task-state {
  flex: 0 0 auto;
  color: #a16207;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.mp-lc-task-state.is-complete {
  color: #15803d;
}

.mp-lc-task-state.is-na,
.mp-lc-requirements li.is-na {
  border-color: #cbd1d6;
  background: #eef1f4;
  color: #59636d;
}

.mp-lc-doc-na {
  align-self: flex-start;
}

.mp-lc-doc-na-note {
  margin: 4px 0 0;
  color: #5f6871;
  font-size: 0.78rem;
}

.mp-lc-task-state.is-review,
.mp-lc-requirements li.is-review > span,
.mp-lc-requirements li.is-review > em {
  color: #a16207;
}

.mp-lc-doc-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.mp-lc-doc-list li > div:first-child,
.mp-lc-doc-list li strong,
.mp-lc-doc-list li span {
  display: block;
  min-width: 0;
}

.mp-lc-doc-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.mp-lc-doc-list li:last-child {
  border-bottom: 0;
}

.mp-lc-doc-list li.is-review {
  padding: 10px;
  border: 1px solid rgba(217, 119, 6, 0.32);
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.06);
}

.mp-lc-doc-list li em {
  display: block;
  margin-top: 4px;
  color: #a16207;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.mp-lc-doc-list li strong {
  overflow-wrap: anywhere;
}

.mp-lc-doc-file {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mp-lc-doc-detail {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mp-lc-doc-detail b {
  color: var(--text);
  font-weight: 750;
}

.mp-lc-doc-detail.is-review {
  color: #a16207;
}

.mp-lc-doc-editor {
  margin-top: 9px;
}

.mp-lc-doc-editor summary {
  width: fit-content;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.mp-lc-doc-editor[open] summary {
  margin-bottom: 8px;
}

.mp-lc-doc-controls {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.mp-lc-doc-upload,
.mp-lc-doc-link,
.mp-lc-doc-meta {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.mp-lc-doc-upload label,
.mp-lc-doc-link label,
.mp-lc-doc-meta label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
}

.mp-lc-doc-link input,
.mp-lc-doc-upload textarea,
.mp-lc-doc-meta textarea,
.mp-lc-assign select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.mp-lc-sow-select {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.mp-lc-sow-select legend {
  width: 100%;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.mp-lc-sow-select label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}

.mp-lc-sow-select input {
  margin: 0;
}

.mp-lc-scope-planning,
.mp-lc-readiness {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.mp-lc-readiness-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 18px;
}

.mp-lc-readiness-grid h5,
.mp-lc-readiness-scopes h5 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-lc-readiness-scopes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.mp-lc-readiness-scopes article {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
}

.mp-lc-readiness-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: #a16207;
  font-size: 0.78rem;
}

.mp-lc-readiness-line.is-complete {
  color: #15803d;
}

.mp-lc-readiness-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border-radius: 10px;
  background: var(--surface2);
}

.mp-lc-policy-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 9px;
  background: rgba(217, 119, 6, 0.06);
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 650;
}

@media (max-width: 560px) {
  .mp-project-create-dialog,
  .mp-customer-create-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .mp-project-sow > div {
    grid-template-columns: 1fr;
  }

  .mp-team-edit__grid {
    grid-template-columns: 1fr;
  }

  .mp-lc-doc-grid {
    grid-template-columns: 1fr;
  }

  .mp-lc-documents__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mp-lc-readiness-grid {
    grid-template-columns: 1fr;
  }

  .mp-lc-readiness-action,
  .mp-lc-doc-module__head,
  .mp-lc-doc-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ===================================================================
   Project detail: header identity row, lifecycle stepper and the
   grouped Project Detail card with in-place edit mode.
   Theme tokens only (Manage Light / Dark); literals are fallbacks.
   =================================================================== */

.mp-pd-hero {
  margin-bottom: 18px;
}

.mp-pd-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 14px;
}

.mp-pd-identity__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary, var(--muted));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.mp-pd-identity__number {
  color: var(--text-primary, var(--text));
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mp-pd-identity__item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mp-pd-identity__location a,
.mp-pd-view a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong, var(--border));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mp-pd-identity__location a:hover,
.mp-pd-view a:hover {
  color: var(--text-primary, var(--text));
  text-decoration-color: currentColor;
}

.mp-pd-sep {
  color: var(--text-muted, var(--muted));
  font-weight: 700;
}

.mp-pd-identity .mp-status {
  margin-left: 0;
}

.mp-pd-identity .mp-hero__actions {
  padding-top: 0;
}

.mp-pd-identity .mp-action {
  margin: 0;
}

/* Full content width (manage.css caps .mp-page--detail at 1080px). */
#mp-detail-root.mp-page--detail {
  max-width: none;
}

/* The header carries its own "← Projects" once the project has rendered. */
#mp-detail-root:has(> #mp-detail:not([hidden])) > .mp-back-row {
  display: none;
}

.mp-pd-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 32px;
}

.mp-pd-hero__main {
  min-width: 0;
}

.mp-pd-back {
  margin: 0 0 8px;
}

.mp-pd-hero .mp-pd-identity {
  margin: 0;
}

/* Lifecycle stepper: compact, clickable, right of the identity row. */
.mp-pd-stepper {
  box-sizing: border-box;
  justify-self: end;
  width: min(100%, 1040px);
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.mp-pd-stepper[hidden] {
  display: none;
}

.mp-pd-stepper__placeholder {
  width: min(720px, 56vw);
  height: 52px;
}

.mp-pd-stepper .mp-lc-stepper {
  display: flex;
  align-items: stretch;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  /* Stage names never truncate; below their total width the host scrolls. */
  min-width: min-content;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
  overflow: visible;
}

.mp-pd-stepper .mp-lc-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.mp-pd-stepper .mp-lc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--border-strong, var(--border));
}

.mp-pd-stepper .mp-lc-step.is-complete:not(:last-child)::after {
  background: var(--st-ready-for-payment-text, #237a4e);
}

.mp-lc-step__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 6px 12px 6px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.mp-lc-step__btn:hover {
  background: var(--surface-hover, var(--surface2));
}

.mp-lc-step__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-pd-stepper .mp-lc-step.is-current .mp-lc-step__btn {
  background: var(--accent-soft);
}

.mp-lc-step.is-selected .mp-lc-step__btn {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.mp-pd-stepper .mp-lc-step__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mp-pd-stepper .mp-lc-step strong,
.mp-pd-stepper .mp-lc-step em {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.mp-pd-stepper .mp-lc-step,
.mp-pd-stepper .mp-lc-step__btn,
.mp-pd-stepper .mp-lc-step__copy {
  min-width: auto;
}

/* Other stages' sub-labels shrink with ellipsis (full text in the tooltip);
   width:0 + min-width:100% keeps them out of the min-content width. */
.mp-pd-stepper .mp-lc-step:not(.is-current) em {
  width: 0;
  min-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-pd-stepper .mp-lc-step strong {
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.mp-pd-stepper .mp-lc-step em {
  margin-top: 1px;
  color: var(--text-muted, var(--muted));
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
}

.mp-pd-stepper .mp-lc-step.is-current strong {
  color: var(--text-primary, var(--text));
}

.mp-pd-stepper .mp-lc-step.is-current em,
.mp-pd-stepper .mp-lc-step.is-complete em {
  color: var(--text-secondary, var(--muted));
}

.mp-lc-step__blocked {
  color: var(--st-rejected-text, #b4372e);
  font-weight: 600;
}

@media (max-width: 1280px) {
  .mp-pd-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-pd-stepper {
    justify-self: stretch;
  }

  .mp-pd-stepper__placeholder {
    width: auto;
  }
}

/* Stage marks: empty circle (waiting), accent dot (current), green check (done). */
.mp-lc-stepper .mp-lc-step__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-strong, rgba(17, 17, 17, 0.2));
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
}

.mp-lc-stepper .mp-lc-step.is-current .mp-lc-step__mark {
  border: 2px solid var(--accent);
}

.mp-lc-stepper .mp-lc-step.is-current .mp-lc-step__mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.mp-lc-stepper .mp-lc-step.is-complete .mp-lc-step__mark {
  border: 0;
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}

/* Project Detail card. */
.mp-pd-card {
  position: relative;
  box-sizing: border-box;
  padding: 18px 22px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.mp-pd-card.is-editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.mp-pd-card.is-resizing {
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, height 220ms ease;
}

.mp-pd-card.is-instant,
.mp-pd-card.is-instant * {
  transition: none !important;
}

.mp-pd-form {
  margin: 0;
}

.mp-pd-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin: 0 0 6px;
}

.mp-pd-head h2 {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-secondary, var(--muted));
}

.mp-pd-head > [data-project-edit],
.mp-pd-edit-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.mp-project-detail-panel .mp-pd-head > [data-project-edit] {
  margin-left: 0;
}

.mp-pd-edit-actions {
  display: flex;
  gap: 8px;
}

.mp-pd-btn {
  position: relative;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.mp-pd-btn:hover:not(:disabled) {
  border-color: var(--border-strong, var(--border));
  background: var(--surface-hover, var(--surface2));
}

.mp-pd-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-pd-btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}

.mp-pd-btn--primary:hover:not(:disabled) {
  border-color: var(--accent-hover, var(--accent));
  background: var(--accent-hover, var(--accent));
}

.mp-pd-btn--danger {
  border-color: var(--st-rejected-border, rgba(180, 55, 46, 0.3));
  color: var(--st-rejected-text, #b4372e);
}

.mp-pd-btn--danger:hover:not(:disabled) {
  border-color: var(--st-rejected-text, #b4372e);
  background: var(--st-rejected-chip, rgba(180, 55, 46, 0.1));
}

.mp-pd-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mp-pd-spin 700ms linear infinite;
}

.mp-pd-btn.is-saving .mp-pd-btn__label {
  visibility: hidden;
}

.mp-pd-btn.is-saving .mp-pd-spinner {
  display: block;
}

.mp-pd-btn.is-saving:disabled {
  opacity: 1;
  cursor: progress;
}

@keyframes mp-pd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Header buttons swap in place: [Edit] <-> [Cancel][Save changes]. */
.mp-pd-head > [data-project-edit] {
  transition: opacity 180ms ease, visibility 0s;
}

.mp-pd-edit-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.mp-pd-card.is-editing .mp-pd-head > [data-project-edit] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.mp-pd-card.is-editing .mp-pd-edit-actions {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s;
}

.mp-pd-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin: 8px 0 4px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--st-rejected-border, rgba(180, 55, 46, 0.25));
  border-radius: 12px;
  background: var(--st-rejected-bg, #fdf3f2);
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 600;
}

.mp-pd-confirm[hidden] {
  display: none;
}

.mp-pd-confirm__actions {
  display: flex;
  gap: 8px;
}

.mp-pd-error {
  margin: 8px 0 4px;
}

/* Sections and the 4-column field grid. */
.mp-pd-section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.mp-pd-section:first-child {
  padding-top: 8px;
  border-top: 0;
}

.mp-pd-section:last-child {
  padding-bottom: 0;
}

.mp-pd-section__label {
  margin: 0 0 14px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.mp-pd-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 20px;
  margin: 0;
}

.mp-pd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mp-pd-field[hidden] {
  display: none;
}

.mp-pd-field--full {
  grid-column: 1 / -1;
}

.mp-pd-field--half {
  grid-column: span 2;
}

.mp-pd-field__label {
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-pd-field__label label {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.mp-pd-field__body {
  min-width: 0;
  margin: 0;
}

/* Value and input share one grid cell. The value is always in flow; the
   input leaves the flow while hidden, so view mode has no reserved space,
   and every simple field is 40px tall in both modes (no row jump). */
.mp-pd-stack {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 40px;
}

.mp-pd-view,
.mp-pd-edit {
  grid-area: 1 / 1;
  min-width: 0;
}

.mp-pd-view {
  color: var(--text-primary, var(--text));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: opacity 180ms ease var(--pd-delay, 0ms), visibility 0s;
}

.mp-pd-view .mp-status {
  margin-left: 0;
}

.mp-pd-edit {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.mp-pd-card.is-editing .mp-pd-field:not(.mp-pd-field--static) .mp-pd-view {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

.mp-pd-card.is-editing .mp-pd-edit {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 180ms ease var(--pd-delay, 0ms),
    transform 180ms ease var(--pd-delay, 0ms),
    visibility 0s;
}

.mp-pd-empty {
  color: var(--text-muted, var(--muted));
  font-weight: 600;
}

.mp-pd-hint {
  display: inline-block;
  margin-left: 8px;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.mp-pd-hint.is-overdue {
  color: var(--st-rejected-text, #b4372e);
}

.mp-pd-chips,
.mp-pd-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-pd-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card, var(--surface2));
  color: var(--text-primary, var(--text));
  font-size: 13px;
  font-weight: 600;
}

.mp-pd-person,
.mp-pd-card .mp-team-member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  height: 30px;
  padding: 0 10px 0 3px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card, var(--surface2));
  color: var(--text-primary, var(--text));
  font-size: 13px;
  font-weight: 600;
}

.mp-pd-person__avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text-primary, var(--text));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mp-pd-person__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Long labels (e.g. "CM / Field Supervisor (Placement)") wrap instead of
   truncating; with subgrid every field spans a label row + a value row, so
   values in one grid row stay aligned even when one label takes two lines. */
@supports (grid-template-rows: subgrid) {
  .mp-pd-grid {
    row-gap: 6px;
    margin-bottom: -14px;
  }

  .mp-pd-field {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }

  .mp-pd-field__label {
    align-self: end;
    white-space: normal;
  }

  .mp-pd-field__body {
    padding-bottom: 14px;
  }
}

/* Inputs (edit layer). */
.mp-pd-card .mp-pd-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mp-pd-card select.mp-pd-input {
  padding-right: 8px;
}

.mp-pd-card .mp-pd-input::placeholder {
  color: var(--text-muted, var(--muted));
  font-weight: 500;
}

.mp-pd-card .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-pd-field.has-error .mp-pd-input {
  border-color: var(--st-rejected-text, #b4372e);
}

.mp-pd-field__error {
  margin: 6px 0 0;
  color: var(--st-rejected-text, #b4372e);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.mp-pd-field__error[hidden] {
  display: none;
}

.mp-pd-card .mp-location-field {
  position: relative;
}

.mp-pd-card .mp-city-results {
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  box-shadow: var(--shadow-lg, 0 14px 35px rgba(15, 23, 42, 0.18));
}

.mp-pd-card .mp-city-results button {
  color: var(--text-primary, var(--text));
}

.mp-pd-card .mp-city-results button:hover,
.mp-pd-card .mp-city-results button:focus-visible {
  background: var(--surface-hover, var(--surface2));
}

/* Scope of Work: checkbox chips. */
.mp-pd-sow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-pd-sow-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 999px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.mp-pd-sow-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mp-pd-sow-option:has(input:focus-visible) {
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-pd-sow-option input {
  margin: 0;
  accent-color: var(--accent, #ff5a00);
}

/* Project Team pickers: chips + "Add person". */
.mp-pd-card .mp-team-members {
  gap: 6px;
  margin-bottom: 6px;
}

.mp-pd-card .mp-team-members:empty {
  display: none;
}

.mp-pd-card .mp-team-member {
  padding-right: 6px;
}

.mp-pd-card .mp-team-member button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--text-muted, var(--muted));
}

.mp-pd-card .mp-team-member button:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-pd-card .mp-person-results button strong {
  color: var(--text-primary, var(--text));
}

@media (max-width: 1100px) {
  .mp-pd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mp-pd-card {
    padding: 16px;
  }

  .mp-pd-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-pd-field--half {
    grid-column: 1 / -1;
  }

  .mp-pd-btn {
    padding: 0 12px;
  }

  .mp-pd-sow {
    gap: 6px;
  }

  .mp-pd-sow-option {
    gap: 6px;
    padding: 0 11px 0 9px;
  }

  .mp-pd-identity__number {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-pd-card,
  .mp-pd-card *,
  .mp-pd-stepper * {
    transition: none !important;
  }

  .mp-pd-card .mp-pd-edit {
    transform: none !important;
  }

  .mp-pd-spinner {
    animation-duration: 1.6s;
  }
}

/* ===================================================================
   Stage panel (below Project Detail): Pre-Construction tasks, or the
   selected stage's existing panel. Solid raised cards, tokens only.
   =================================================================== */

.mp-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mp-sp-host {
  position: relative;
  margin: 0 0 18px;
  --sp-seg-empty: #eeebe7;
  --sp-fill: linear-gradient(90deg, #f29a62, #ee7a3b);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-host {
  --sp-seg-empty: #34303a;
}

.mp-sp-host[hidden] {
  display: none;
}

.mp-sp-host.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: 14px;
  cursor: progress;
}

.mp-sp-host > .mp-lc-notice {
  margin-bottom: 12px;
}

.mp-sp-host > .mp-lc-notice[hidden] {
  display: none;
}

.mp-sp {
  display: grid;
  gap: 16px;
}

.mp-sp-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  container-type: inline-size;
  transition: border-color 200ms ease, box-shadow 250ms ease, background-color 150ms ease;
}

.mp-sp-card.is-flash,
.mp-sp-sow.is-flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.mp-sp-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary, var(--muted));
  font-size: 14px;
  font-weight: 600;
}

.mp-sp-placeholder p {
  margin: 0;
}

.mp-sp-placeholder__mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: 50%;
}

.mp-sp-placeholder.is-complete .mp-sp-placeholder__mark {
  border: 0;
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}

/* Chips (status tokens). */
.mp-sp-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-sp-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mp-sp-chip.is-ready {
  border-color: var(--st-ready-for-payment-border, transparent);
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sp-chip.is-blocked {
  border-color: var(--st-rejected-border, transparent);
  background: var(--st-rejected-chip, rgba(180, 55, 46, 0.12));
  color: var(--st-rejected-text, #b4372e);
}

.mp-sp-chip.is-progress {
  border-color: var(--st-in-progress-border, transparent);
  background: var(--st-in-progress-chip, rgba(47, 91, 183, 0.12));
  color: var(--st-in-progress-text, #2f5bb7);
}

.mp-sp-chip.is-warn {
  border-color: var(--st-manager-approval-border, transparent);
  background: var(--st-manager-approval-chip, rgba(154, 90, 18, 0.12));
  color: var(--st-manager-approval-text, #9a5a12);
}

.mp-sp-chip.is-neutral {
  border-color: var(--st-neutral-border, var(--border));
  background: var(--st-neutral-chip, var(--surface-hover, var(--surface2)));
  color: var(--st-neutral-text, var(--text-secondary, var(--muted)));
}

/* Summary: title, percentage, segmented bar, requirement chips. */
.mp-sp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.mp-sp-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mp-sp-head__title h2 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

.mp-sp-progress__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.mp-sp-pct-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.mp-sp-pct {
  color: var(--text-primary, var(--text));
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mp-sp-pct-block span,
.mp-sp-count {
  color: var(--text-secondary, var(--muted));
  font-weight: 600;
}

.mp-sp-pct-block span {
  font-size: 14px;
}

.mp-sp-count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.mp-sp-bar {
  display: flex;
  gap: 3px;
  height: 10px;
}

.mp-sp-seg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--sp-seg-empty);
}

.mp-sp-seg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sp-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms ease;
}

.mp-sp-seg.is-done::before {
  transform: scaleX(1);
}

.mp-sp-bar.is-complete .mp-sp-seg::before {
  background: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sp-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.mp-sp-req {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--st-neutral-border, var(--border));
  border-radius: 999px;
  background: var(--st-neutral-chip, var(--surface-hover, var(--surface2)));
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.mp-sp-req:hover {
  border-color: var(--border-strong, var(--border));
}

.mp-sp-req:focus-visible,
.mp-sp-add:focus-visible,
.mp-sp-link:focus-visible,
.mp-sp-chip-x:focus-visible,
.mp-sp-menu__list button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-req.is-complete {
  border-color: var(--st-ready-for-payment-border, var(--border));
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sp-req__mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: 50%;
}

.mp-sp-req.is-complete .mp-sp-req__mark {
  border: 0;
}

.mp-sp-req__na {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-secondary, var(--muted));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mp-sp-gate {
  margin: 12px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 500;
}

/* Document cards. */
.mp-sp-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}

.mp-sp-doc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mp-sp-doc__title h3 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 15px;
  font-weight: 700;
}

.mp-sp-doc__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-sp-subtle {
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 500;
}

.mp-sp-upload-btn {
  gap: 6px;
}

.mp-sp-doc.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.mp-sp-drop-hint {
  display: none;
}

.mp-sp-doc.is-dragover .mp-sp-drop-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent-text, var(--accent));
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.mp-sp-doc.is-dragover > :not(.mp-sp-drop-hint) {
  opacity: 0.35;
}

.mp-sp-empty {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 10px;
  color: var(--text-muted, var(--muted));
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-files {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mp-sp-file {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.mp-sp-file:last-child {
  padding-bottom: 0;
}

.mp-sp-file__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mp-sp-file__icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-card, var(--surface2));
  color: var(--text-secondary, var(--muted));
}

.mp-sp-file__icon.is-pdf {
  color: var(--st-rejected-text, #b4372e);
}

.mp-sp-file__icon.is-image {
  color: var(--st-in-progress-text, #2f5bb7);
}

.mp-sp-file__body {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-sp-file__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.mp-sp-file__name strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-sp-file__size,
.mp-sp-file__status {
  flex: none;
  color: var(--text-muted, var(--muted));
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mp-sp-file__meta {
  margin: 2px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.mp-sp-file__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 3px 0 0;
  font-size: 12px;
}

.mp-sp-file__tag {
  color: var(--text-secondary, var(--muted));
  font-weight: 600;
}

.mp-sp-file__tag.is-warn {
  color: var(--st-manager-approval-text, #9a5a12);
}

.mp-sp-file__error {
  margin: 3px 0 0;
  color: var(--st-rejected-text, #b4372e);
  font-size: 12px;
  font-weight: 600;
}

.mp-sp-upbar {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sp-seg-empty);
}

.mp-sp-upbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 150ms ease;
}

.mp-sp-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

.mp-sp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.mp-sp-action:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-sp-action.is-danger:hover {
  background: var(--st-rejected-chip, rgba(180, 55, 46, 0.12));
  color: var(--st-rejected-text, #b4372e);
}

.mp-sp-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-action__label {
  display: none;
}

@container (min-width: 760px) {
  .mp-sp-action__label {
    display: inline;
  }
}

.mp-sp-confirm {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--text-primary, var(--text));
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-confirm .mp-pd-btn {
  min-height: 30px;
  padding: 0 12px;
}

.mp-sp-link {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mp-sp-menu {
  position: relative;
}

.mp-sp-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 170px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised, var(--surface));
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
}

.mp-sp-menu__list[hidden] {
  display: none;
}

.mp-sp-menu__list button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mp-sp-menu__list button:hover {
  background: var(--surface-hover, var(--surface2));
}

/* N/A state and inline forms. */
.mp-sp-na {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-card, var(--surface2));
}

.mp-sp-na__comment {
  margin: 0 0 4px;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-style: italic;
}

.mp-sp-na__meta {
  margin: 0 0 4px;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-inline-form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mp-sp-inline-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.mp-sp-inline-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-textarea span:not(.mp-sr-only) {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-sp-inline-form__hint {
  margin: 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
}

.mp-sp-inline-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mp-sp-inline-form .mp-lc-sow-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.mp-sp-inline-form .mp-lc-sow-select legend {
  margin-bottom: 6px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* SOW schedule. */
.mp-sp-sows {
  margin-top: 6px;
}

.mp-sp-sow {
  display: grid;
  grid-template-columns: 110px minmax(150px, 1fr) minmax(150px, 1fr) minmax(200px, 1.5fr) 150px;
  align-items: start;
  gap: 12px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-radius: 6px;
  transition: box-shadow 250ms ease;
}

.mp-sp-sow:last-child {
  padding-bottom: 0;
}

.mp-sp-sow__name,
.mp-sp-sow__status {
  padding-top: 25px;
}

.mp-sp-sow__field label,
.mp-sp-sow__label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.mp-sp-sow .mp-pd-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.mp-sp-sow .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-sow .mp-pd-input:disabled {
  background: var(--surface-input-disabled, var(--surface2));
  color: var(--text-secondary, var(--muted));
}

.mp-sp-sow .mp-pd-input[aria-invalid="true"] {
  border-color: var(--st-rejected-text, #b4372e);
}

.mp-sp-field-error {
  margin: 4px 0 0;
  color: var(--st-rejected-text, #b4372e);
  font-size: 12px;
  font-weight: 600;
}

.mp-sp-field-error[hidden] {
  display: none;
}

.mp-sp-duration {
  display: block;
  min-height: 16px;
  margin-top: 4px;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-team {
  min-height: 30px;
}

.mp-sp-team .mp-pd-person {
  padding-right: 4px;
}

.mp-sp-chip-x {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted, var(--muted));
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.mp-sp-chip-x:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-sp-add {
  height: 30px;
  padding: 0 12px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mp-sp-add:hover {
  border-color: var(--accent);
  color: var(--text-primary, var(--text));
}

.mp-sp-team-select {
  margin-top: 6px;
}

.mp-sp-team-crew {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.mp-sp-sow__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.mp-sp-sow__state.is-ready {
  color: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sp-sow__state.is-warn {
  color: var(--st-manager-approval-text, #9a5a12);
}

.mp-sp-saved {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  margin-top: 4px;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease;
}

.mp-sp-saved.is-visible,
.mp-sp-saved.is-error {
  opacity: 1;
}

.mp-sp-saved.is-error {
  display: block;
  color: var(--st-rejected-text, #b4372e);
}

@container (max-width: 820px) {
  .mp-sp-sow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mp-sp-sow__name,
  .mp-sp-sow__status {
    padding-top: 0;
  }

  .mp-sp-sow__team {
    grid-column: 1 / -1;
  }

  .mp-sp-sow__name {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@container (max-width: 460px) {
  .mp-sp-sow {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-sp-file__row {
    flex-wrap: wrap;
  }

  .mp-sp-file__body {
    flex-basis: calc(100% - 48px);
  }

  .mp-sp-actions,
  .mp-sp-confirm {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Undo toast (solid raised, like the portal toast). */
.mp-sp-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--toast-border, var(--border));
  border-radius: 12px;
  background: var(--modal-solid, var(--surface-raised, #fff));
  color: var(--glass-text, var(--text-primary, #24211e));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.mp-sp-toast[hidden] {
  display: none;
}

.mp-sp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.mp-sp-toast.is-error .mp-sp-toast__text {
  color: var(--st-rejected-text, #b4372e);
}

.mp-sp-toast__undo {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.mp-sp-toast__undo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

/* Existing stage panels (Construction, Closeout, ...) inside the host. */
.mp-sp-host > .mp-lc-panel {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
}

@media (prefers-reduced-motion: reduce) {
  .mp-sp-host *,
  .mp-sp-host *::before,
  .mp-sp-toast,
  .mp-lc-step__btn {
    transition: none !important;
  }
}

/* ===================================================================
   Project detail — Dark (page opts into .mp-main--dark-content).
   Every rule is Dark-only, so Light is unchanged. Base tokens come from
   the shared dark-content scope in manage_theme.css (#2A262C cards,
   #232026 inner rows, #302C33 hover/chips, #1F1C21 inputs, text, status
   palette); the few extra values below are page tokens.
   =================================================================== */

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content {
  --pd-chip-bg: var(--surface-hover);            /* #302C33 */
  --pd-chip-line: rgba(255, 255, 255, 0.10);
  --pd-avatar-bg: rgba(255, 255, 255, 0.10);
  --pd-btn-bg: var(--surface-hover);             /* #302C33 */
  --pd-btn-line: rgba(255, 255, 255, 0.12);
  --pd-btn-hover: #3a353d;
  --pd-ring-line: rgba(255, 255, 255, 0.25);     /* empty circles */
  --pd-connector: rgba(255, 255, 255, 0.12);
  --pd-link-line: rgba(255, 255, 255, 0.35);
  --pd-overlay: rgba(10, 8, 12, 0.45);
  color: var(--text-primary);
}

/* Cards: solid raised surface, hairline border, no shadow. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-pd-stepper, .mp-pd-card, .mp-sp-card, .mp-lc-shell, .mp-sp-host > .mp-lc-panel,
  .mp-panel, .mp-kpi
) {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: none;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-card.is-editing,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-sp-card.is-flash, .mp-sp-sow.is-flash) {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-doc.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Inner rows: #232026, hover #302C33. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-lc-shell .mp-lc-panel, .mp-lc-summary article, .mp-lc-scope, .mp-lc-notice, .mp-sp-na
) {
  border-color: var(--border);
  background: var(--surface-card);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file {
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 0;
  border-radius: 10px;
  background: var(--surface-card);
  transition: background-color 150ms ease;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file:hover {
  background: var(--surface-hover);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file__icon {
  background: var(--surface-hover);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file:hover .mp-sp-file__icon,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file:hover .mp-sp-action:hover {
  background: var(--pd-btn-hover);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-file:hover .mp-sp-action.is-danger:hover {
  background: var(--st-rejected-chip);
}

/* Links. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-view a, .mp-pd-identity__location a) {
  color: var(--text-primary);
  text-decoration-color: var(--pd-link-line);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-view a, .mp-pd-identity__location a):hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

/* Person and scope chips. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-chip, .mp-pd-person, .mp-team-member) {
  border-color: var(--pd-chip-line);
  background: var(--pd-chip-bg);
  color: var(--text-primary);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-person__avatar {
  background: var(--pd-avatar-bg);
  color: var(--text-primary);
}

/* Buttons: secondary, accent primary, readable disabled primary. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn, .mp-lc-btn, .mp-lc-btn--quiet) {
  border-color: var(--pd-btn-line);
  background: var(--pd-btn-bg);
  color: var(--text-primary);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn, .mp-lc-btn):hover:not(:disabled) {
  border-color: var(--pd-btn-line);
  background: var(--pd-btn-hover);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn--primary, .mp-lc-btn--primary),
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn--primary, .mp-lc-btn--primary):hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn--primary, .mp-lc-btn--primary):disabled {
  opacity: 1;
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: rgba(255, 255, 255, 0.7);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-btn--primary.is-saving:disabled {
  background: var(--accent);
  color: var(--text-on-accent, #fff);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn--danger, .mp-lc-btn--danger) {
  border-color: var(--st-rejected-border);
  background: transparent;
  color: var(--st-rejected-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-btn--danger, .mp-lc-btn--danger):hover:not(:disabled) {
  border-color: var(--st-rejected-text);
  background: var(--st-rejected-chip);
}

/* Stepper. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-stepper .mp-lc-step.is-current .mp-lc-step__btn {
  border-color: var(--accent);
  background: var(--accent-soft);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-stepper .mp-lc-step:not(.is-current):not(.is-complete) .mp-lc-step__mark,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-req__mark,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-placeholder__mark {
  border-color: var(--pd-ring-line);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-req.is-complete .mp-sp-req__mark,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-placeholder.is-complete .mp-sp-placeholder__mark {
  border-color: transparent;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-stepper .mp-lc-step:not(:last-child)::after {
  background: var(--pd-connector);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-stepper .mp-lc-step.is-complete:not(:last-child)::after {
  background: var(--st-ready-for-payment-text);
}

/* Status chip in the header (and legacy views): status tokens. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-status, .mp-status.is-restore, .mp-chip, .mp-chip--muted, .mp-badge) {
  background: var(--st-neutral-chip);
  color: var(--st-neutral-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-status.is-progress {
  background: var(--st-in-progress-chip);
  color: var(--st-in-progress-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-status.is-done {
  background: var(--st-ready-for-payment-chip);
  color: var(--st-ready-for-payment-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-status.is-hold {
  background: var(--st-manager-approval-chip);
  color: var(--st-manager-approval-text);
}

/* Operational Workflow: states, notices, banners. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-lc-rollout.is-pilot, .mp-lc-state.is-ready, .mp-lc-state.is-complete, .mp-lc-state.is-completed,
  .mp-lc-completed > span, .mp-life__tile.is-done
) {
  background: var(--st-ready-for-payment-chip);
  color: var(--st-ready-for-payment-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-lc-rollout.is-enabled, .mp-lc-state.is-in_progress) {
  background: var(--accent-soft);
  color: var(--accent-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-lc-state.is-blocked, .mp-lc-state.is-planned, .mp-lc-state.is-scheduled, .mp-lc-blockers li > span
) {
  background: var(--st-manager-approval-chip);
  color: var(--st-manager-approval-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-lc-summary strong.is-good, .mp-lc-empty--success, .mp-lc-scope__blocker.is-clear,
  .mp-lc-checklist li.is-complete .mp-lc-checklist__mark, .mp-lc-step.is-complete .mp-lc-step__mark
) {
  color: var(--st-ready-for-payment-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-lc-summary strong.is-warn, .mp-lc-scope__blocker, .mp-lc-step.is-blocked .mp-lc-step__mark
) {
  color: var(--st-manager-approval-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-lc-disabled, .mp-lc-hold-banner) {
  border-color: var(--st-manager-approval-border);
  background: var(--st-manager-approval-bg);
  color: var(--st-manager-approval-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-completed {
  border-color: var(--st-ready-for-payment-border);
  background: var(--st-ready-for-payment-bg);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-completion-card {
  border-left-color: var(--st-manager-approval-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-completion-card.is-complete {
  border-left-color: var(--st-ready-for-payment-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-notice.is-success {
  border-color: var(--st-ready-for-payment-border);
  color: var(--st-ready-for-payment-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-notice.is-warning {
  border-color: var(--st-manager-approval-border);
  color: var(--st-manager-approval-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-lc-notice.is-error, .mp-form-error) {
  border: 1px solid var(--st-rejected-border);
  background: var(--st-rejected-bg);
  color: var(--st-rejected-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-file-actions button {
  color: var(--st-rejected-text);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-lc-shell.is-busy, .mp-sp-host.is-busy)::after {
  background: var(--pd-overlay);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-modal__backdrop {
  background: rgba(0, 0, 0, 0.55);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-modal__dialog {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-muted, .mp-lc-empty, .mp-lc-empty-inline) {
  color: var(--text-muted);
}

/* Inputs (edit mode, lifecycle forms, N/A comment, SOW dates). */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-pd-input, .mp-sp-inline-form textarea,
  .mp-lc-assign input, .mp-lc-date-grid input, .mp-lc-closeout-form input, .mp-lc-closeout-form textarea,
  .mp-lc-invoice-form input, .mp-lc-upload input, .mp-lc-upload select,
  .mp-lc-modal__dialog textarea, .mp-lc-modal__dialog select, .mp-lc-modal__dialog input
) {
  border-color: var(--border-strong);
  background: var(--surface-input);
  color: var(--text-primary);
  color-scheme: dark;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-input, .mp-sp-inline-form textarea, .mp-lc-modal__dialog textarea)::placeholder {
  color: var(--text-muted);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(
  .mp-pd-input, .mp-sp-inline-form textarea, .mp-lc-assign input, .mp-lc-date-grid input,
  .mp-lc-closeout-form input, .mp-lc-invoice-form input, .mp-lc-modal__dialog textarea
):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-sow .mp-pd-input:disabled {
  background: var(--surface-input-disabled);
  color: var(--text-secondary);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-pd-sow-option, .mp-sp-add) {
  border-color: var(--border-strong);
  background: var(--surface-input);
  color: var(--text-primary);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-pd-sow-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Dropdowns rendered inside the page. */
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content :is(.mp-city-results, .mp-sp-menu__list) {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Undo toast lives on <body>, outside the content scope. */
html[data-portal="manage"][data-theme="dark"] .mp-sp-toast {
  border-color: rgba(255, 255, 255, 0.14);
  background: #2a262c;
  color: #f3efea;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

html[data-portal="manage"][data-theme="dark"] .mp-sp-toast.is-error .mp-sp-toast__text {
  color: #ff8f84;
}

html[data-portal="manage"][data-theme="dark"] .mp-sp-toast__undo {
  background: rgba(238, 122, 59, 0.18);
  color: #f29a62;
}

/* SOW dates inside the project dates (auto-complete round). */
.mp-sp-sow__hint {
  grid-column: 1 / -1;
  margin-top: -6px;
}

.mp-sp-range {
  margin: 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-range.is-open {
  color: var(--text-muted, var(--muted));
}

.mp-sp-sow.is-out-of-range .mp-pd-input {
  border-color: var(--st-manager-approval-border, #f3e1c8);
}

.mp-sp-req.is-out_of_range {
  border-color: var(--st-manager-approval-border, var(--border));
  background: var(--st-manager-approval-chip, rgba(154, 90, 18, 0.12));
  color: var(--st-manager-approval-text, #9a5a12);
}

.mp-sp-sow .mp-dp-field .mp-pd-input,
.mp-pd-card .mp-dp-field .mp-pd-input {
  padding-right: 34px;
}

.mp-pd-stepper .mp-lc-step.is-progress em {
  color: var(--text-secondary, var(--muted));
}

@container (max-width: 820px) {
  .mp-sp-sow__hint {
    margin-top: 0;
  }
}

/* ===================================================================
   Project detail, 2026-11-09: two-column layout + Lifecycle History,
   one Documents card (+ Materials status), calm notes for stages without
   requirements, Completed (close project) panel. Theme tokens only; the
   tokens resolve to their Dark values inside .mp-main--dark-content.
   =================================================================== */

/* ---------------------------------------------------------- Layout */
.mp-pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 20px;
}

.mp-pd-main {
  min-width: 0;
}

.mp-pd-history {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  min-height: 420px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
}

.mp-pd-history-open {
  display: none;
  gap: 6px;
}

/* The workflow card is gone; the shell only holds notices and dialogs. */
.mp-lc-shell.is-empty {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-lc-shell.is-empty {
  border: 0;
  background: none;
}

/* Project Detail inside the narrower column: 5 -> 3 (-> 2) columns. */
.mp-pd-card {
  container-type: inline-size;
}

@container (max-width: 899px) {
  .mp-pd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 560px) {
  .mp-pd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .mp-pd-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-pd-history {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: 600px;
  }

  .mp-pd-history .mp-hx {
    max-height: 600px;
  }
}

@media (max-width: 768px) {
  .mp-pd-history-open {
    display: inline-flex;
    justify-self: start;
  }

  .mp-pd-history {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    height: min(86dvh, 760px);
    max-height: none;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
    transform: translateY(104%);
    visibility: hidden;
    transition: transform 240ms ease, visibility 0s linear 240ms;
  }

  .mp-pd-history.is-sheet-open {
    transform: none;
    visibility: visible;
    transition: transform 240ms ease;
  }

  .mp-pd-history .mp-hx {
    max-height: none;
  }

  .mp-pd-history .mp-hx__close {
    display: inline-grid;
  }

  .mp-pd-history .mp-hx__head::before {
    content: "";
    justify-self: center;
    width: 36px;
    height: 4px;
    margin: -6px 0 2px;
    border-radius: 2px;
    background: var(--border-strong, var(--border));
  }
}

.mp-hx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(20, 16, 12, 0.4);
}

.mp-hx-backdrop[hidden] {
  display: none;
}

html.mp-hx-sheet-lock .mp-main {
  overflow: hidden;
}

/* ------------------------------------------------- Lifecycle History */
.mp-hx {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.mp-hx__head {
  display: grid;
  flex: none;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.mp-hx__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mp-hx__titlebar h2 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mp-hx__count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--st-neutral-chip, var(--surface-hover));
  color: var(--st-neutral-text, var(--text-secondary));
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-hx__close {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mp-hx__close:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-hx__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-muted, var(--muted));
}

.mp-hx__search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-hx__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
}

.mp-hx__search input::placeholder {
  color: var(--text-muted, var(--muted));
}

.mp-hx__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-hx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.mp-hx-chip:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-hx-chip.is-on {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-weight: 700;
}

.mp-hx-chip:focus-visible,
.mp-hx-ev__more:focus-visible,
.mp-hx__close:focus-visible,
.mp-hx-textbtn:focus-visible,
.mp-hx__people select:focus-visible,
.mp-hx__scroll:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-hx-chip__dot,
.mp-hx-ev__dot {
  border-radius: 50%;
  background: var(--hx-dot, var(--text-muted));
}

.mp-hx-chip__dot {
  width: 7px;
  height: 7px;
}

/* Category colors: Stages accent, Documents blue, SOW violet, Team teal,
   Project details neutral, Materials amber. */
.is-stages { --hx-dot: var(--accent); }
.is-documents { --hx-dot: var(--st-in-progress-text, #2f5bb7); }
.is-sow { --hx-dot: var(--st-resubmitted-text, #6a45b8); }
.is-team { --hx-dot: var(--st-new-production-text, #1f6b68); }
.is-details { --hx-dot: var(--text-muted, #8e8882); }
.is-materials { --hx-dot: var(--st-manager-approval-text, #9a5a12); }

.mp-hx__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mp-hx__people select {
  box-sizing: border-box;
  max-width: 220px;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 8px;
  background-color: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
}

.mp-hx__matched {
  margin-left: auto;
  color: var(--text-muted, var(--muted));
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mp-hx__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 16px;
}

.mp-hx-day__head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 0 6px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-hx-day__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Thin vertical timeline line behind the dots. */
.mp-hx-day__list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 1px;
  background: var(--border);
}

.mp-hx-ev {
  position: relative;
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-radius: 8px;
}

.mp-hx-ev__dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  box-shadow: 0 0 0 3px var(--surface-raised, var(--surface));
}

.mp-hx-ev.is-child .mp-hx-ev__dot {
  transform: scale(0.64);
}

.mp-hx-ev__body {
  min-width: 0;
}

.mp-hx-ev__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 13px;
  line-height: 1.35;
}

.mp-hx-ev__title strong {
  font-weight: 700;
}

.mp-hx-ev__target {
  min-width: 0;
  color: var(--text-secondary, var(--muted));
  font-weight: 600;
  overflow-wrap: anywhere;
}

.mp-hx-ev__more {
  align-self: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card, var(--surface2));
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mp-hx-ev__more[aria-expanded="true"] {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
}

.mp-hx-ev__change {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mp-hx-ev__old {
  color: var(--text-muted, var(--muted));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.mp-hx-ev__arrow {
  margin: 0 6px;
  color: var(--text-muted, var(--muted));
}

.mp-hx-ev__new {
  color: var(--text-primary, var(--text));
  font-weight: 600;
}

.mp-hx-ev__meta {
  margin: 3px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
}

.mp-hx-ev__who.is-auto {
  font-style: italic;
}

.mp-hx-ev__note {
  margin: 4px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mp-hx-ev.is-new {
  animation: mp-hx-new 2.4s ease-out;
}

@keyframes mp-hx-new {
  0%, 35% { background: var(--accent-soft); }
  100% { background: transparent; }
}

.mp-hx-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 12px;
  color: var(--text-muted, var(--muted));
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.mp-hx-empty p {
  margin: 0;
}

.mp-hx-textbtn,
.mp-sp-textbtn {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mp-hx-textbtn:hover,
.mp-sp-textbtn:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-sp-textbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-hx-end {
  margin: 14px 0 0;
  color: var(--text-muted, var(--muted));
  font-size: 12px;
  text-align: center;
}

.mp-hx-skeleton {
  display: grid;
  gap: 14px;
  padding: 14px 0;
}

.mp-hx-skeleton__row {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  gap: 12px;
}

.mp-hx-skeleton__row > span {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface-hover, var(--surface2));
}

.mp-hx-skeleton__row div {
  display: grid;
  gap: 6px;
}

.mp-hx-skeleton__row i {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-card, #f6f4f1) 0%, var(--surface-hover, #f1eeea) 50%, var(--surface-card, #f6f4f1) 100%);
  background-size: 200% 100%;
  animation: mp-hx-shimmer 1.2s linear infinite;
}

.mp-hx-skeleton__row i:first-child {
  width: 62%;
}

.mp-hx-skeleton__row i:last-child {
  width: 38%;
}

@keyframes mp-hx-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* ------------------------------------------------- Documents card */
.mp-sp-docs {
  padding: 0;
}

.mp-sp-docs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 16px 20px 14px;
}

.mp-sp-docs__head h2 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mp-sp-docs__summary {
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 500;
}

.mp-sp-docsec {
  position: relative;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.mp-sp-docsec.is-compact {
  padding-top: 12px;
  padding-bottom: 12px;
}

.mp-sp-docsec__name {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 15px;
  font-weight: 700;
}

.mp-sp-docsec.is-flash {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* File lines: inset rows (Light #F6F4F1 / Dark #232026). */
.mp-sp-docs .mp-sp-file {
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 0;
  border-radius: 10px;
  background: var(--surface-card, var(--surface2));
  transition: background-color 150ms ease;
}

.mp-sp-docs .mp-sp-file:last-child {
  padding-bottom: 10px;
}

.mp-sp-docs .mp-sp-file__icon {
  background: var(--surface-raised, var(--surface));
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-docs .mp-sp-file__icon {
  background: var(--surface-hover);
}

/* Drag & drop: only the section under the pointer lights up. */
.mp-sp-docsec.is-dragover::before {
  content: "";
  position: absolute;
  inset: 4px 8px;
  z-index: 0;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  pointer-events: none;
}

.mp-sp-docsec.is-dragover > :not(.mp-sp-drop-hint) {
  opacity: 0.35;
}

.mp-sp-docsec.is-dragover .mp-sp-drop-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--accent-text, var(--accent));
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

/* N/A: one compact line. */
.mp-sp-docsec__na {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.mp-sp-na-line {
  display: inline-flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.mp-sp-na-line__meta {
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-na-line__comment {
  max-width: 32ch;
  overflow: hidden;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-sp-menu__note {
  margin: 0;
  padding: 8px 10px;
  color: var(--text-muted, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

/* ------------------------------------------------ Materials status */
.mp-sp-mat__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.mp-sp-mat__seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card, var(--surface2));
}

.mp-sp-mat__opt,
.mp-sp-mat__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}

.mp-sp-mat__opt {
  background: transparent;
  color: var(--text-secondary, var(--muted));
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.mp-sp-mat__opt:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-sp-mat__opt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-mat__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mat-text);
}

.mp-sp-mat__opt.is-ordered,
.mp-sp-mat__chip.is-ordered {
  --mat-text: var(--st-in-progress-text, #2f5bb7);
  --mat-chip: var(--st-in-progress-chip, #e1eafb);
  --mat-border: var(--st-in-progress-border, #d7e3f8);
}

.mp-sp-mat__opt.is-partially_delivered,
.mp-sp-mat__chip.is-partially_delivered {
  --mat-text: var(--st-manager-approval-text, #9a5a12);
  --mat-chip: var(--st-manager-approval-chip, #fbe9d3);
  --mat-border: var(--st-manager-approval-border, #f3e1c8);
}

.mp-sp-mat__opt.is-delivered,
.mp-sp-mat__chip.is-delivered {
  --mat-text: var(--st-ready-for-payment-text, #237a4e);
  --mat-chip: var(--st-ready-for-payment-chip, #ddf1e4);
  --mat-border: var(--st-ready-for-payment-border, #d3eadb);
}

.mp-sp-mat__opt.is-missing,
.mp-sp-mat__chip.is-missing {
  --mat-text: var(--st-rejected-text, #b4372e);
  --mat-chip: var(--st-rejected-chip, #fbe3e0);
  --mat-border: var(--st-rejected-border, #f5d9d6);
}

.mp-sp-mat__opt.is-selected,
.mp-sp-mat__chip {
  border-color: var(--mat-border);
  background: var(--mat-chip);
  color: var(--mat-text);
  font-weight: 700;
}

.mp-sp-mat__hint {
  color: var(--text-muted, var(--muted));
  font-size: 12px;
  font-weight: 600;
}

.mp-sp-mat__saved {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--st-ready-for-payment-text, #237a4e);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease;
}

.mp-sp-mat__saved.is-visible {
  opacity: 1;
}

.mp-sp-mat__note {
  margin: 10px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.mp-sp-mat__note .mp-sp-textbtn {
  margin-left: 6px;
  font-style: normal;
}

.mp-sp-mat__noteform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.mp-sp-mat__noteform .mp-pd-input {
  flex: 1 1 220px;
  min-width: 0;
  height: 34px;
}

.mp-sp-mat__meta {
  margin: 8px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-mat__error {
  margin: 8px 0 0;
  color: var(--st-rejected-text, #b4372e);
  font-size: 12px;
  font-weight: 600;
}

/* ---------------------------- Stages without requirements: calm note */
.mp-sp-calm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--surface-card, var(--surface2));
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-calm__mark {
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--text-muted, var(--muted));
  border-radius: 50%;
}

/* ---------------------------------------- Completed (close project) */
.mp-sp-close__stages {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.mp-sp-close__stage {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-card, var(--surface2));
  font-size: 13px;
}

.mp-sp-close__stage strong {
  min-width: 0;
  color: var(--text-primary, var(--text));
  font-weight: 700;
}

.mp-sp-close__stage > span:last-child {
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

.mp-sp-close__mark {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: 50%;
}

.mp-sp-close__stage.is-completed .mp-sp-close__mark {
  border: 0;
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sp-close__stage.is-in_progress .mp-sp-close__mark {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px);
}

.mp-sp-close__stage.is-final {
  margin-top: 4px;
}

.mp-sp-close__warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--st-manager-approval-border, #f3e1c8);
  border-radius: 10px;
  background: var(--st-manager-approval-bg, #fdf6ee);
  color: var(--st-manager-approval-text, #9a5a12);
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-close__warn > span {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--st-manager-approval-chip, #fbe9d3);
  font-size: 12px;
  font-weight: 800;
}

.mp-sp-close__hint,
.mp-sp-close__closed {
  margin: 14px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-close__note {
  margin: 4px 0 0;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.mp-sp-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mp-sp-close__primary {
  min-width: 150px;
}

.mp-sp-close__confirm {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card, var(--surface2));
}

.mp-sp-close__question {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 700;
}

.mp-sp-close__confirm textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.mp-sp-close__confirm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

@media (prefers-reduced-motion: reduce) {
  .mp-pd-history,
  .mp-hx-ev.is-new,
  .mp-hx-skeleton__row i,
  .mp-sp-mat__opt,
  .mp-sp-mat__saved {
    animation: none !important;
    transition: none !important;
  }
}

.mp-lc-panel > .mp-sp-calm {
  margin: 12px 0 14px;
}

/* Phones keep the single-column Project Detail (after the container rules). */
@media (max-width: 640px) {
  .mp-pd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================================================================
   2026-11-09 (2): stages as collapsible groups + SOW schedule cards.
   Stage colors come from the status palette (Light / Dark values).
   =================================================================== */

.mp-sg-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--text-muted, var(--muted));
  font-size: 12px;
}

.mp-sg-toolbar__btn {
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-secondary, var(--muted));
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.mp-sg-toolbar__btn:hover {
  color: var(--text-primary, var(--text));
}

.mp-sg-toolbar__btn:focus-visible,
.mp-sg__head:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sg-list {
  display: grid;
  gap: 12px;
}

.mp-sg {
  --grp: var(--st-manager-approval-text, #9a5a12);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--border);
  border-left: 4px solid var(--grp);
  border-radius: 14px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  scroll-margin-top: 16px;
}

.mp-sg.is-pre_construction { --grp: var(--st-manager-approval-text, #9a5a12); }
.mp-sg.is-construction { --grp: var(--st-in-progress-text, #2f5bb7); }
.mp-sg.is-closeout { --grp: var(--st-resubmitted-text, #6a45b8); }
.mp-sg.is-post_closeout { --grp: var(--st-new-production-text, #1f6b68); }
.mp-sg.is-completed { --grp: var(--st-ready-for-payment-text, #237a4e); }

.mp-sg.is-flash {
  animation: mp-sg-flash 600ms ease-out;
}

@keyframes mp-sg-flash {
  0%, 40% { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.mp-sg__h {
  margin: 0;
  font: inherit;
}

.mp-sg__head {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px 8px 12px;
  border: 0;
  border-radius: 0 13px 13px 0;
  background: color-mix(in srgb, var(--grp) 8%, var(--surface-raised, #fff));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-radius 150ms ease;
}

.mp-sg.is-open .mp-sg__head {
  border-radius: 0 13px 0 0;
}

.mp-sg__head:hover {
  background: color-mix(in srgb, var(--grp) 12%, var(--surface-raised, #fff));
}

.mp-sg__chevron {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-secondary, var(--muted));
  transition: transform 200ms ease;
}

.mp-sg.is-open .mp-sg__chevron {
  transform: rotate(90deg);
}

.mp-sg__name {
  flex: none;
  color: var(--grp);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mp-sg__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mp-sg__summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-sg__bar {
  display: block;
  width: 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--grp) 16%, var(--surface-card, #f6f4f1));
}

.mp-sg__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grp);
  transition: width 250ms ease;
}

.mp-sg__bar.is-full > span {
  background: var(--st-ready-for-payment-text, #237a4e);
}

.mp-sg__auto {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--st-neutral-chip, var(--surface-hover));
  color: var(--st-neutral-text, var(--text-secondary));
  font-size: 11px;
  font-weight: 700;
}

/* Body: 0fr <-> 1fr height animation; overflow visible once settled so
   menus / pickers inside are not clipped. */
.mp-sg__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}

.mp-sg.is-open .mp-sg__body {
  grid-template-rows: 1fr;
}

.mp-sg__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 220ms ease;
}

.mp-sg.is-open .mp-sg__inner {
  opacity: 1;
}

.mp-sg.is-open.is-settled .mp-sg__inner {
  overflow: visible;
}

.mp-sg:not(.is-open) .mp-sg__inner {
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.mp-sg__content {
  padding: 16px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 13px 0;
}

/* Stage content inside a group: the group is the card. */
.mp-sg__content > .mp-lc-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sg {
  border-color: var(--border);
  border-left-color: var(--grp);
  background: var(--surface-raised);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sg__content > .mp-lc-panel {
  border: 0;
  background: none;
}

@media (max-width: 640px) {
  .mp-sg__head {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .mp-sg__summary {
    flex-basis: 100%;
    margin-left: 34px;
  }

  .mp-sg__content {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-sg__body,
  .mp-sg__inner,
  .mp-sg__chevron,
  .mp-sg__bar > span {
    transition: none !important;
  }

  .mp-sg.is-flash {
    animation: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
}

/* ------------------------------------------------ SOW schedule cards */
.mp-sp-schedule {
  padding: 16px;
}

.mp-sp-schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.mp-sp-schedule__head h3 {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 15px;
  font-weight: 700;
}

.mp-sp-schedule__hint {
  color: var(--text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 500;
}

.mp-sp-sowgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

@container (max-width: 599px) {
  .mp-sp-sowgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mp-sp-sowc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card, #f6f4f1);
  scroll-margin-top: 16px;
  transition: border-color 200ms ease, box-shadow 250ms ease;
}

.mp-sp-sowc.is-flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.mp-sp-sowc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mp-sp-sowc__name {
  margin: 0;
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 800;
}

.mp-sp-sowc__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mp-sp-sowc__status .mp-sp-saved {
  min-height: 0;
  margin: 0;
}

.mp-sp-sowc__dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.mp-sp-sowc__field {
  min-width: 0;
}

.mp-sp-sowc__field label,
.mp-sp-sowc__label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-sp-sowc .mp-pd-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 9px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.mp-sp-sowc .mp-dp-field .mp-pd-input {
  padding-right: 30px;
}

.mp-sp-sowc .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-sowc .mp-pd-input:disabled {
  background: var(--surface-input-disabled, var(--surface2));
  color: var(--text-secondary, var(--muted));
}

.mp-sp-sowc .mp-pd-input[aria-invalid="true"] {
  border-color: var(--st-rejected-text, #b4372e);
}

.mp-sp-sowc.is-out-of-range .mp-pd-input {
  border-color: var(--st-manager-approval-border, #f3e1c8);
}

/* One line under the dates: the error when there is one, else the duration. */
.mp-sp-sowc__line {
  min-height: 16px;
  margin-top: -6px;
}

.mp-sp-sowc__line .mp-sp-field-error,
.mp-sp-sowc__line .mp-sp-duration {
  margin: 0;
  font-size: 12px;
}

.mp-sp-sowc__line:has(.mp-sp-field-error:not([hidden])) .mp-sp-duration {
  display: none;
}

.mp-sp-sowc .mp-sp-team {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-sp-sowc .mp-sp-team .mp-pd-person {
  height: 28px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.mp-sp-sowc .mp-sp-team .mp-pd-person__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-sp-sowc .mp-sp-add {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.mp-sp-sowc .mp-sp-team-select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 34px;
}

.mp-sp-sowc .mp-sp-team-crew .mp-pd-input {
  flex: 1 1 auto;
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-sowc {
  border-color: var(--border);
  background: var(--surface-card);
}

html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sp-sowc .mp-pd-input:disabled {
  background: var(--surface-input-disabled);
}

.mp-sg__body[hidden] {
  display: none;
}

.mp-sp-sowc .mp-pd-input::placeholder {
  font-size: 12px;
}

/* ===================================================================
   2026-11-09 (3): group header polish + Project Detail top row.
   =================================================================== */

/* No colored edge on the rounded card: an inset marker pill instead. */
.mp-sg,
html[data-portal="manage"][data-theme="dark"] .mp-main--dark-content .mp-sg {
  border: 1px solid var(--border);
}

.mp-sg__h {
  display: block;
  margin: 0;
  padding: 0;
}

/* The button is the whole header row: padding inside it, identical in both
   states (only the corner radius and the chevron transform change). */
.mp-sg__head {
  margin: 0;
  padding: 8px 16px;
  border-radius: 13px;
}

.mp-sg.is-open .mp-sg__head {
  border-radius: 13px 13px 0 0;
}

.mp-sg__head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.mp-sg__marker {
  flex: none;
  width: 4px;
  height: 22px;
  margin-right: 2px;   /* + 10px flex gap = 12px to the stage name */
  border-radius: 2px;
  background: var(--grp);
}

.mp-sg__content {
  border-radius: 0 0 13px 13px;
  background: var(--surface-raised, var(--surface));
}

/* A scrollbar appearing (taller content) must not move the page sideways. */
.mp-main:has(#mp-detail-root),
.mp-hx__scroll {
  scrollbar-gutter: stable;
}

/* Project Detail: Project # · Customer · Location · Scope of work · Start · Due
   in one row; the team grid uses the same columns. */
.mp-pd-card .mp-pd-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 24px;
}

@container (max-width: 1055px) {   /* card < 1100px (content box + 2 x 22px padding) */
  .mp-pd-card .mp-pd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 595px) {    /* card < 640px */
  .mp-pd-card .mp-pd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .mp-pd-card .mp-pd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mp-pd-field--sow .mp-pd-chips {
  gap: 4px;
}

.mp-pd-field--sow .mp-pd-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 26px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
}

.mp-pd-field--sow .mp-pd-sow {
  flex-wrap: wrap;
  gap: 4px;
}

.mp-pd-field--sow .mp-pd-sow-option {
  box-sizing: border-box;
  height: 26px;
  min-height: 26px;
  gap: 5px;
  padding: 0 8px 0 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Team labels: one line each (full title in the tooltip / aria-label). */
.mp-pd-field--team .mp-pd-field__label,
.mp-pd-card .mp-pd-field--team .mp-pd-field__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================================================
   2026-11-09 (4): stage header press fix + sticky project header.
   =================================================================== */

/* The global press effect (press_effects.css: button.is-pressed /
   :active -> scale(0.96)) shrank the header by 4% on mouse-down; the edges
   moved ~19px inward, so the press looked like a shift and the mouse-up at
   the outer edges landed outside the button (no click). Not for this row. */
.mp-sg .mp-sg__head,
.mp-sg .mp-sg__head:active,
.mp-sg .mp-sg__head.is-pressed {
  transform: none;
  filter: none;
}

.mp-sg__chevron,
.mp-sg__marker,
.mp-sg__chips,
.mp-sg__summary,
.mp-sg__name {
  pointer-events: none;
}

/* ------------------------------------------------- Sticky header */
:root {
  --project-header-h: 0px;
  --project-header-top: 0px;
}

/* The first 24px of scroll (absolute: takes no space, no margin collapsing). */
#mp-detail {
  position: relative;
}

.mp-pd-sentinel {
  position: absolute;
  top: 0;                 /* #mp-detail starts at the scrollport top (collapsed -16px margin) */
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

/* Condensing the header must not make the browser "anchor" the scroll
   position (it would scroll back up by the shrink and bounce). */
.mp-main:has(#mp-detail-root),
html:has(#mp-detail-root),
html:has(#mp-detail-root) body {
  overflow-anchor: none;
}

.mp-pd-sticky {
  position: sticky;
  /* Chrome sticks to the scroll container's content edge: -16px reaches the
     top of .mp-main's padding; on <= 960px the portal bar sits above it. */
  top: calc(var(--project-header-top) + var(--pd-sticky-shift, -16px));
  z-index: 30;            /* above page content; below menus (popovers), modals, toasts */
  isolation: isolate;
  margin: -16px -24px 18px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid transparent;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: var(--glass-blur, blur(28px) saturate(140%));
  backdrop-filter: var(--glass-blur, blur(28px) saturate(140%));
  transition: padding 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

html[data-theme="dark"] .mp-pd-sticky {
  background: rgba(28, 24, 30, 0.85);
}

.mp-pd-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: var(--grain-display, block);
  border-radius: inherit;
  background: var(--glass-grain, none);
  opacity: var(--grain-opacity, 0.4);
  pointer-events: none;
}

.mp-pd-sticky.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .mp-pd-sticky.is-scrolled {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.mp-pd-sticky .mp-pd-hero {
  margin-bottom: 0;
}

/* Breadcrumb and "← Projects" collapse; the back icon takes their place. */
.mp-pd-sticky .mp-topbar,
.mp-pd-sticky .mp-pd-back {
  max-height: 48px;
  overflow: hidden;
  transition: max-height 200ms ease, margin 200ms ease, opacity 200ms ease;
}

.mp-pd-backicon {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 0;
  height: 32px;
  margin-right: -10px;    /* cancels the row gap while hidden */
  overflow: hidden;
  border-radius: 8px;
  color: var(--text-secondary, var(--muted));
  opacity: 0;
  pointer-events: none;
  transition: width 200ms ease, margin 200ms ease, opacity 200ms ease, background-color 150ms ease;
}

.mp-pd-backicon:hover {
  background: var(--surface-hover, var(--surface2));
  color: var(--text-primary, var(--text));
}

.mp-pd-backicon:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-pd-identity__number {
  transition: font-size 200ms ease;
}

.mp-pd-sticky.is-compact {
  padding-top: 12px;
  padding-bottom: 10px;
}

.mp-pd-sticky.is-compact .mp-topbar,
.mp-pd-sticky.is-compact .mp-pd-back {
  max-height: 0;
  margin: 0;
  opacity: 0;
}

.mp-pd-sticky.is-compact .mp-pd-backicon {
  width: 32px;
  margin-right: 0;
  opacity: 1;
  pointer-events: auto;
}

.mp-pd-sticky.is-compact .mp-pd-identity__number {
  font-size: 17px;
}

/* Identity and stepper on one line, the stepper reduced to stage names. */
.mp-pd-sticky.is-compact .mp-pd-hero {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px 20px;
}

.mp-pd-sticky.is-compact .mp-pd-identity__row {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mp-pd-sticky.is-compact .mp-pd-identity__item {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-pd-sticky.is-compact .mp-pd-identity .mp-hero__actions {
  display: none;
}

.mp-pd-sticky.is-compact .mp-pd-stepper {
  justify-self: end;
}

.mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-stepper {
  padding: 3px;
}

.mp-pd-sticky.is-compact .mp-lc-step__btn {
  min-height: 32px;
  padding: 4px 10px 4px 8px;
}

.mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-step em {
  display: none;
}

/* While condensing on scroll, the space the header gives up stays in the
   flow as margin: content below never moves and the scroll height is
   constant (no state bouncing). */
#mp-detail-root.is-header-compact .mp-pd-sticky {
  margin-bottom: calc(18px + var(--pd-header-delta, 0px));
}

/* Offsets: nothing hides under the sticky header. */
.mp-pd-history {
  /* Sticks relative to .mp-main's content edge (16px below the header's
     edge): this puts it 16px under the sticky header. */
  top: calc(var(--project-header-h) + 16px + var(--pd-sticky-shift-history, -16px));
  height: calc(100vh - var(--project-header-h) - 56px);
  height: calc(100dvh - var(--project-header-h) - 56px);
}

.mp-sg,
.mp-sp-sowc,
[data-sp-section] {
  scroll-margin-top: calc(var(--project-header-top) + var(--project-header-h) + 16px);
}

@media (max-width: 1280px) {
  .mp-pd-history {
    top: auto;
    height: auto;
  }
}

@media (max-width: 960px) {
  .mp-pd-sticky {
    --pd-sticky-shift: 0px;
    margin: -16px -16px 16px;
    padding: 12px 16px 10px;
    border-radius: 18px 18px 0 0;
  }
}

/* Phones: only the compact header (back · Project # · status · History)
   with the stepper as a 40px horizontally scrolling strip. */
@media (max-width: 768px) {
  .mp-pd-sticky.is-compact .mp-pd-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main history" "steps steps";
    align-items: center;
    gap: 8px 10px;
  }

  .mp-pd-sticky.is-compact .mp-pd-hero__main { grid-area: main; }
  .mp-pd-sticky.is-compact .mp-pd-stepper { grid-area: steps; justify-self: stretch; }
  .mp-pd-sticky.is-compact .mp-pd-history-open { grid-area: history; }

  .mp-pd-sticky.is-compact .mp-pd-identity__item,
  .mp-pd-sticky.is-compact .mp-pd-identity__row > .mp-pd-sep {
    display: none;
  }

  .mp-pd-sticky.is-compact .mp-pd-identity__number {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mp-pd-sticky.is-compact .mp-pd-stepper {
    height: 40px;
    border-radius: 10px;
  }

  .mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-stepper {
    gap: 10px;
  }

  .mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-step {
    flex: none;
  }

  .mp-pd-sticky.is-compact .mp-pd-history-open {
    min-height: 32px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-pd-sticky,
  .mp-pd-sticky .mp-topbar,
  .mp-pd-sticky .mp-pd-back,
  .mp-pd-backicon,
  .mp-pd-identity__number {
    transition: none !important;
  }
}

/* Compact stepper: all five stage names fit next to the identity. */
.mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-stepper {
  gap: 8px;
}

.mp-pd-sticky.is-compact .mp-pd-stepper .mp-lc-step:not(:last-child)::after {
  width: 8px;
}

@media (max-width: 768px) {
  /* Project # first: the status chip shrinks, History is icon-only. */
  .mp-pd-sticky.is-compact .mp-pd-identity__row {
    gap: 4px 8px;
  }

  .mp-pd-sticky.is-compact .mp-pd-identity__number {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .mp-pd-sticky.is-compact .mp-pd-identity .mp-status {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mp-pd-sticky.is-compact .mp-pd-history-open {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    justify-content: center;
  }

  .mp-pd-sticky.is-compact .mp-pd-history-open__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Long customer / location names truncate in the compact line. */
.mp-pd-sticky.is-compact .mp-pd-identity__item {
  max-width: 22ch;
  white-space: nowrap;
}

/* ===================================================================
   2026-11-09 (5): document links (Drive, SharePoint, customer portals).
   =================================================================== */

.mp-sp-addlink-btn {
  gap: 6px;
}

.mp-sp-addmenu {
  display: none;
}

.mp-sp-addmenu > [data-sp-menu] {
  gap: 6px;
}

.mp-sp-addmenu__caret {
  font-size: 11px;
  opacity: 0.7;
}

/* Narrow Documents card: Upload + Add link collapse into "Add ▾". */
@container (max-width: 560px) {
  .mp-sp-docs .mp-sp-upload-btn,
  .mp-sp-docs .mp-sp-addlink-btn {
    display: none;
  }

  .mp-sp-docs .mp-sp-addmenu {
    display: block;
  }
}

.mp-sp-file__icon.is-link {
  color: var(--text-secondary, var(--muted));
}

.mp-sp-file__icon.is-drive {
  color: var(--st-in-progress-text, #2f5bb7);
}

.mp-sp-file__domain {
  flex: none;
  max-width: 45%;
  overflow: hidden;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted, var(--muted));
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-sp-file.is-link .mp-sp-file__name {
  align-items: center;
}

/* Inline "Add link" / "Edit link" form. */
.mp-sp-linkform__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px 10px;
}

@container (max-width: 520px) {
  .mp-sp-linkform__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mp-sp-linkform__field span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mp-sp-linkform .mp-pd-input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 9px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
}

.mp-sp-linkform .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}

.mp-sp-linkform .mp-pd-input[aria-invalid="true"] {
  border-color: var(--st-rejected-text, #b4372e);
}

.mp-sp-linkform .mp-sp-field-error {
  margin: 0;
}

.mp-sp-file .mp-sp-linkform {
  margin-top: 10px;
}

.mp-sp-docsec.is-compact .mp-sp-linkform {
  margin-top: 10px;
}

/* ------------------------------------------------------------------
   Closeout deliverables (stage group body). Theme tokens only, solid
   surfaces; rows separated by dividers like the Documents card.
   ------------------------------------------------------------------ */
.mp-co { display: grid; gap: 16px; }
.mp-co-card { padding: 0; overflow: visible; }
.mp-co-list { margin: 0; padding: 0; list-style: none; }
.mp-co-row {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.mp-co-row.is-flash { box-shadow: inset 0 0 0 2px var(--accent); }
.mp-co-row__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-co-row__name strong {
  color: var(--text-primary, var(--text));
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.mp-co-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.mp-co-row__side { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mp-co-naform { grid-column: 1 / -1; }
.mp-co-state {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
}
.mp-co-state.is-missing { border: 1.5px solid var(--border-strong, var(--border)); }
.mp-co-state.is-done {
  background: var(--st-ready-for-payment-chip, rgba(22, 163, 74, 0.14));
  color: var(--st-ready-for-payment-text, #237a4e);
}
.mp-co-state.is-na {
  width: auto;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-secondary, var(--muted));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.mp-co-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--text-muted, var(--muted)); }
.mp-co-dot.is-bore { background: var(--st-in-progress-text, #2f5bb7); }
.mp-co-dot.is-placing { background: var(--st-resubmitted-text, #6b46c1); }
.mp-co-dot.is-splicing { background: var(--st-new-production-text, #1f7f7a); }
.mp-co-meta { color: var(--text-secondary, var(--muted)); font-size: 12px; white-space: nowrap; }
.mp-co-empty { margin: 0; color: var(--text-muted, var(--muted)); font-size: 13px; }
.mp-co-checks { display: inline-flex; gap: 12px; }
.mp-co-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary, var(--text));
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mp-co-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: inherit; }
.mp-co-check input:disabled { cursor: default; }
.mp-co-check:has(input:disabled) { cursor: default; }
.mp-co-linkform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1 1 240px; min-width: 0; }
.mp-co-linkform .mp-pd-input {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 14px;
}
.mp-co-linkform .mp-pd-input::placeholder { color: var(--text-muted, var(--muted)); }
.mp-co-linkform .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}
.mp-co-linkform .mp-pd-input[aria-invalid="true"] { border-color: var(--st-rejected-text, #b4372e); }
.mp-co-linkform .mp-btn { flex: none; }
.mp-co-linkform .mp-sp-field-error { flex-basis: 100%; margin: 0; }
.mp-co-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  padding: 6px 8px 6px 6px;
  border-radius: 10px;
  background: var(--surface-card, var(--surface2));
}
.mp-co-link .mp-sp-file__icon { flex-basis: 30px; width: 30px; height: 30px; background: var(--surface-raised, var(--surface)); }
.mp-co-link .mp-sp-file__name { flex: 1 1 auto; min-width: 0; margin: 0; }
.mp-co-link__title {
  overflow: hidden;
  color: var(--text-primary, var(--text));
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-co-link__title:hover { text-decoration: underline; }
.mp-co-na { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.mp-co-row__main > .mp-sp-linkform { flex: 1 1 100%; margin: 0; }
.mp-co-sent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
}
.mp-co-sent__check { font-weight: 600; }
.mp-co-files { padding: 14px 20px; }
.mp-co-files h4 { margin: 0 0 8px; }
@container (max-width: 760px) {
  .mp-co-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-co-row__main { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .mp-co-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-co-row__main { grid-column: 1 / -1; grid-row: 2; }
}

/* ------------------------------------------------------------------
   Post-Closeout: readiness summary + blocks (Punch list; QC reports can
   be added as another .mp-sp-card block). Theme tokens only.
   ------------------------------------------------------------------ */
.mp-pl-stage { display: grid; gap: 16px; }
.mp-pl { padding: 0; overflow: visible; }
.mp-pl__head { align-items: center; }
.mp-pl__add { margin-left: auto; }
.mp-pl > .mp-pl-form { margin: 0 20px 14px; }
.mp-pl > .mp-sp-empty { margin: 0; padding: 4px 20px 14px; }
.mp-pl.is-flash, .mp-pl-item.is-flash, .mp-pl-none.is-flash { box-shadow: inset 0 0 0 2px var(--accent); }
.mp-pl-list { margin: 0; padding: 0; list-style: none; }
.mp-pl-item {
  display: grid;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.mp-pl-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.mp-pl-item__tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mp-pl-item__tools .mp-cq-sowdone-btn { margin-top: 0; }
.mp-pl-type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--st-neutral-chip);
  color: var(--st-neutral-text);
  font-size: 12px;
  font-weight: 700;
}
.mp-pl-type.is-customer { background: var(--st-in-progress-chip); color: var(--st-in-progress-text); }
.mp-pl-due {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary, var(--text));
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mp-pl-due.is-overdue {
  border-color: var(--st-rejected-border);
  background: var(--st-rejected-bg);
  color: var(--st-rejected-text);
  font-weight: 700;
}
.mp-pl-due.is-done {
  border-color: var(--st-ready-for-payment-border);
  background: var(--st-ready-for-payment-bg);
  color: var(--st-ready-for-payment-text);
}
.mp-pl-done { margin: 0; align-items: center; }
.mp-pl-done .mp-cq-link { margin-left: auto; }
.mp-pl-comment { margin: 0; }
.mp-pl-confirm { justify-content: flex-start; }
.mp-pl-atts { margin: 0; }
.mp-pl-att__name {
  overflow: hidden;
  color: var(--text-primary, var(--text));
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-pl-att__name:hover { text-decoration: underline; }
.mp-pl-attach { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-pl-attach__btn { display: inline-flex; align-items: center; gap: 6px; }
.mp-pl-item .mp-sp-linkform { margin: 0; }
.mp-pl-form__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.mp-pl-form__field { display: grid; gap: 6px; min-width: 0; }
.mp-pl-form__label {
  color: var(--text-secondary, var(--muted));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mp-pl-form .mp-pd-input {
  box-sizing: border-box;
  width: 180px;
  max-width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 9px;
  background: var(--surface-input, var(--surface));
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 13px;
}
.mp-pl-form .mp-dp-field .mp-pd-input { padding-right: 34px; }
.mp-pl-form .mp-pd-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft));
}
.mp-pl-form .mp-pd-input[aria-invalid="true"] { border-color: var(--st-rejected-text); }
.mp-pl-form .mp-sp-field-error { margin: 0; }
.mp-pl-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-input, var(--surface));
}
.mp-pl-seg__opt { position: relative; display: inline-flex; cursor: pointer; }
.mp-pl-seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.mp-pl-seg__opt span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 700;
}
.mp-pl-seg__opt input:checked + span { background: var(--accent); color: var(--text-on-accent, var(--surface)); }
.mp-pl-seg__opt input:focus-visible + span { box-shadow: var(--focus-ring, 0 0 0 3px var(--accent-soft)); }
.mp-pl-none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
}
.mp-pl-noneform { margin: 0; padding: 12px 20px 14px; border-top: 1px solid var(--border); }
.mp-pl-legacy { margin: 0; }
@media (max-width: 600px) {
  .mp-pl-item, .mp-pl-none, .mp-pl-noneform { padding-left: 14px; padding-right: 14px; }
  .mp-pl > .mp-pl-form { margin: 0 14px 14px; }
  .mp-pl-item__tools { margin-left: 0; }
  .mp-pl-form .mp-pd-input { width: 100%; }
  .mp-pl-form__field { flex: 1 1 100%; }
}