/* ─────────────────────────────────────────────────────────────────────────────
   Project Setup (create new / update existing) — Layout/SetupLayout.razor and the
   step pages under Pages/ProjectSetup. Line-for-line port of React
   NewProjectWizardPage.css (.npw-*): standalone full-screen surface with its own
   chrome, Landmark blue accent #5b9bd5, "black" = #222.
   Blazor-only addition: .npw-footer-left (Cancel + edit mode's Save & Close).
   Step-body rules are added here as each step page is ported.
   ───────────────────────────────────────────────────────────────────────────── */

.npw-shell {
  position: fixed;
  inset: 0;
  display: flex;
  background: #f4f6f9;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #222;
  z-index: 1000;
}

.npw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Left stepper rail ---------- */
.npw-stepper {
  width: 224px;
  flex-shrink: 0;
  background: #1c2b38;
  color: #cdd6df;
  display: flex;
  flex-direction: column;
}

/* Title bar matches the topbar height (51.2px) so the two dividers read as one rule. */
.npw-stepper-title {
  height: 51.2px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 22.4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 10.4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f93a6;
  font-weight: 600;
}

.npw-stepper-list {
  list-style: none;
  margin: 0;
  padding: 11.2px 0;
  flex: 1;
  overflow-y: auto;
}

/* Landmark logo footer pinned to the bottom. */
.npw-stepper-footer {
  flex-shrink: 0;
  min-height: 52.8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.npw-stepper-logo {
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.npw-step {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 9.6px 22.4px;
  font-size: 11.2px;
  color: #9fb0c0;
  border-left: 2.4px solid transparent;
}

.npw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19.2px;
  height: 19.2px;
  border-radius: 50%;
  background: #2c3e4e;
  color: #9fb0c0;
  font-size: 9.6px;
  font-weight: 600;
  flex-shrink: 0;
}

.npw-step-label {
  flex: 1;
}

/* Current step — blue. */
.npw-step-active {
  color: #fff;
  background: #243542;
  border-left-color: #5b9bd5;
}
.npw-step-active .npw-step-num {
  background: #5b9bd5;
  color: #fff;
}

/* Visited and complete — green. */
.npw-step-done .npw-step-num {
  background: #3f8f5b;
  color: #fff;
}
.npw-step-done .npw-step-label {
  color: #cdd6df;
}

/* Visited but currently incomplete (an upstream change broke it) — orange. */
.npw-step-incomplete .npw-step-num {
  background: #c98a3c;
  color: #fff;
}
.npw-step-incomplete .npw-step-label {
  color: #cdd6df;
}

.npw-step-clickable {
  cursor: pointer;
}
.npw-step-clickable:hover {
  background: #243542;
  color: #fff;
}

/* Not visited yet. */
.npw-step-disabled {
  opacity: 0.5;
}

.npw-step-soon {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #2c3e4e;
  color: #7f93a6;
  border-radius: 3.2px;
  padding: 1.6px 4.8px;
  margin-left: 6.4px;
}

/* ---------- Main column ---------- */
.npw-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.npw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 51.2px;
  padding: 0 28.8px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e3e8ee;
}
.npw-topbar-title {
  font-size: 14.4px;
  font-weight: 600;
  color: #222;
}

.npw-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Top padding lines the step heading up with the first rail step row. */
  padding: 20.8px 28.8px 28.8px;
}

/* ---------- Step body ---------- */
.npw-step-heading {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.16px;
  margin: 0 0 4.8px;
}
.npw-step-sub {
  color: #6b7280;
  font-size: 12px;
  margin: 0 0 22.4px;
}

/* Phase cards (step 1) */
.npw-phase-options {
  display: flex;
  flex-direction: column;
  gap: 11.2px;
  max-width: 448px;
}
.npw-phase-card {
  display: flex;
  align-items: flex-start;
  gap: 11.2px;
  padding: 12.8px 14.4px;
  background: #fff;
  border: 1.2px solid #d9d9d9;
  border-radius: 4.8px;
  cursor: pointer;
}
.npw-phase-card input {
  margin-top: 2.4px;
  accent-color: #5b9bd5;
}
.npw-phase-selected {
  border-color: #5b9bd5;
  box-shadow: 0 0 0 2.4px rgba(91, 155, 213, 0.15);
}
.npw-phase-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.npw-phase-main {
  display: flex;
  flex-direction: column;
  gap: 3.2px;
}
.npw-phase-label {
  font-weight: 600;
  font-size: 12.8px;
  color: #222;
  display: flex;
  align-items: center;
}
.npw-phase-label .npw-step-soon {
  background: #eef2f6;
  color: #8a99a8;
}
.npw-phase-blurb {
  font-size: 12px;
  color: #6b7280;
}

/* Project Info form (step 2) */
.npw-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20.8px 19.2px;
  max-width: 608px;
}
.npw-field {
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}
.npw-field-wide {
  grid-column: 1 / -1;
}
.npw-field-label {
  font-size: 11.2px;
  font-weight: 600;
  color: #222;
}
.npw-input {
  font-family: inherit;
  font-size: 11.2px;
  font-weight: 500;
  color: #333;
  height: 27.2px;
  padding: 0 6.4px;
  border: 1px solid #d9d9d9;
  border-radius: 2.4px;
  background: #fff;
  box-sizing: border-box;
}
.npw-input:focus {
  outline: none;
  border-color: #5b9bd5;
  box-shadow: 0 0 0 1.6px rgba(91, 155, 213, 0.15);
}
.npw-input:disabled {
  background: #f0f3f7;
  color: #6b7280;
}
/* Placeholder text — the StyledSelect empty-state grey (#b0b0b0). */
.npw-input::placeholder {
  color: #b0b0b0;
  opacity: 1;
}
/* Multi-line variant (Project Description): no drag-to-resize, ~5 lines then scrolls. */
.npw-textarea {
  height: auto;
  padding: 4.8px 6.4px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
}
.npw-field-hint {
  font-size: 10.4px;
  color: #8a99a8;
  /* Lines the hint up with the text inside the input (1px border + 6.4px padding). */
  padding-left: 7.2px;
}
/* The StyledSelect (Client / Project Type) trigger at the wizard's input size. */
.npw-content .styled-select-trigger-form {
  font-size: 12px;
  height: 27.2px;
}

/* ---------- Project Theme (step 3) ---------- */
/* On the Theme step the divider runs down to ~9.6px above the footer. */
.npw-content:has(> .npw-step-theme) {
  padding-bottom: 9.6px;
}
.npw-step-theme {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.npw-step-theme .npw-theme-layout {
  flex: 1 1 auto;
  min-height: 0;
}
.npw-theme-layout {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.npw-theme-controls {
  /* The divider lands at the viewport centre: the body starts at 224px (stepper) +
     28.8px (content padding) = 252.8px, so the column is (50vw − 252.8px) wide. */
  flex: 0 0 calc(50vw - 252.8px);
  min-width: 272px;
  box-sizing: border-box;
  padding-right: 28.8px;
  border-right: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  gap: 19.2px;
}
/* Blazor-only: the Live Preview isn't ported yet, so no divider before it. */
.npw-theme-layout-nopreview .npw-theme-controls {
  border-right: none;
}
.npw-theme-colors {
  display: flex;
  gap: 25.6px;
}
/* Content-width so the two color controls sit side by side. */
.npw-theme-colors .npw-field {
  flex: 0 0 auto;
}

/* Color control: native swatch + editable hex field */
.npw-color-row {
  display: flex;
  align-items: center;
  gap: 6.4px;
}
.npw-color-swatch {
  width: 30.4px;
  height: 27.2px;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 2.4px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.npw-color-swatch::-webkit-color-swatch-wrapper {
  padding: 2.4px;
}
.npw-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 1.6px;
}
.npw-color-hex {
  width: 80px;
  text-transform: lowercase;
}

/* Asset fields (banner / logo / images) */
.npw-asset-field {
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

/* Project Images — thumbnail grid + add tile */
.npw-images-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6.4px;
}
.npw-image-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--npw-image-aspect, 1.78);
  border-radius: 3.2px;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  background: #f0f3f7;
}
.npw-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.npw-image-remove {
  position: absolute;
  top: 1.6px;
  right: 1.6px;
  width: 12.8px;
  height: 12.8px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10.4px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.npw-image-remove:hover {
  background: rgba(192, 57, 43, 0.9);
}
.npw-image-add {
  width: 100%;
  aspect-ratio: var(--npw-image-aspect, 1.78);
  border-radius: 3.2px;
  border: 1px dashed #b0b0b0;
  background: #fafafa;
  color: #8a99a8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.npw-image-add span {
  display: block;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}
.npw-image-add:hover {
  border-color: #5b9bd5;
  color: #5b9bd5;
}

/* Logo / Banner attachment boxes — the form-slideout attachment chrome: a styled
   file picker when empty; a doc-icon filename link + × when filled. */
.npw-attach-row {
  display: flex;
  align-items: center;
  gap: 6.4px;
  width: 100%;
}
.npw-attach-file {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6.4px;
  cursor: pointer;
  margin: 0;
}
.npw-attach-choose {
  flex-shrink: 0;
  background: #5b9bd5;
  color: #fff;
  border-radius: 2.4px;
  padding: 3.2px 8px;
  font-size: 8.8px;
  font-weight: 500;
  line-height: 1.4;
}
.npw-attach-noname {
  font-size: 9.6px;
  color: #b0b0b0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.npw-attach-display {
  display: flex;
  align-items: center;
  gap: 4.8px;
  flex: 1;
  min-width: 0;
}
.npw-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  flex: 1;
  min-width: 0;
  color: #1565c0;
  text-decoration: underline;
  font-size: 10.4px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.npw-attach-link:hover {
  color: #0d47a1;
}
.npw-attach-icon {
  flex-shrink: 0;
}
.npw-attach-clear {
  background: transparent;
  border: none;
  padding: 0 1.6px;
  font-size: 14.4px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  flex-shrink: 0;
}
.npw-attach-clear:hover {
  color: #c0392b;
}
/* Locked logo box (Landmark client): "view" link + a "Default" badge. */
.npw-attach-badge {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5b9bd5;
  background: #eef5fc;
  border-radius: 7.2px;
  padding: 1.6px 6.4px;
}
/* Required-field error outline on the attachment boxes + the add-image tile. */
.npw-asset-err .npw-attach-display,
.npw-asset-err .npw-attach-file {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}
.npw-asset-err .npw-image-add {
  border-color: #c0392b;
  color: #c0392b;
}

/* ---------- Crop dialogs (banner band picker + logo crop) ---------- */
.npw-crop-modal {
  width: 512px;
  max-width: 92vw;
}
.npw-crop-modal .add-doc-modal-close {
  font-size: 20.8px;
}
/* Banner band picker — full image with a highlighted full-width band. */
.npw-band-area {
  position: relative;
  width: 100%;
  background: #222;
  border-radius: 3.2px;
  overflow: hidden;
  line-height: 0;
}
.npw-band-img {
  display: block;
  width: 100%;
  height: auto;
}
.npw-band-dim {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.npw-band-window {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  border-top: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* Logo crop — freeform resize box over the full logo (checkerboard shows transparency). */
.npw-logo-area {
  position: relative;
  width: 100%;
  border-radius: 3.2px;
  overflow: hidden;
  line-height: 0;
  user-select: none;
  background-color: #e9e9e9;
  background-image:
    linear-gradient(45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(-45deg, #cfcfcf 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #cfcfcf 75%),
    linear-gradient(-45deg, transparent 75%, #cfcfcf 75%);
  background-size: 12.8px 12.8px;
  background-position: 0 0, 0 6.4px, 6.4px -6.4px, -6.4px 0;
}
/* Dark backdrop while White-Scale is on so the white logo shows. */
.npw-logo-area-dark {
  background-image: none;
  background-color: #2a2a2a;
}
.npw-logo-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.npw-logo-cropbox {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 7999.2px rgba(0, 0, 0, 0.45);
  cursor: move;
  touch-action: none;
}
.npw-logo-handle {
  position: absolute;
  width: 9.6px;
  height: 9.6px;
  background: #fff;
  border: 1px solid #5b9bd5;
  border-radius: 1.6px;
  touch-action: none;
}
.npw-logo-handle-nw { top: -4.8px; left: -4.8px; cursor: nwse-resize; }
.npw-logo-handle-ne { top: -4.8px; right: -4.8px; cursor: nesw-resize; }
.npw-logo-handle-sw { bottom: -4.8px; left: -4.8px; cursor: nesw-resize; }
.npw-logo-handle-se { bottom: -4.8px; right: -4.8px; cursor: nwse-resize; }
/* Crop tools, stacked: hint, Remove Background, White-Scale. */
.npw-logo-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6.4px;
}
.npw-logo-tools-hint {
  font-size: 10.4px;
  color: #8a99a8;
  margin-bottom: 6.4px;
}
.npw-logo-check {
  display: flex;
  align-items: center;
  gap: 7.2px;
  font-size: 11.2px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  margin: 0;
}
.npw-logo-check input[type='checkbox'] {
  width: 13.6px;
  height: 13.6px;
  margin: 0;
  accent-color: #5b9bd5;
  cursor: pointer;
}
.npw-crop-zoom {
  display: flex;
  align-items: center;
  gap: 9.6px;
  margin-top: 11.2px;
  font-size: 10.4px;
  color: #555;
}
.npw-crop-zoom input[type='range'] {
  flex: 1;
  accent-color: #5b9bd5;
}

/* ---------- Internal Users (step 4) — two directory boxes + an empty third ---------- */
.npw-content:has(> .npw-step-access) {
  padding-bottom: 9.6px;
}
.npw-step-access {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.npw-access-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  /* Same 57.6px-gap model as External Users so the boxes are identical thirds. */
  column-gap: 57.6px;
  margin-top: 0;
}
.npw-access-col {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Single divider centred in the gap between the two boxes. */
.npw-access-col-left::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -28.8px;
  width: 1px;
  background: #d9d9d9;
}
.npw-access {
  margin-top: 14.4px;
  width: 400px;
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
  background: #fff;
  overflow: hidden;
}
.npw-access-col > .npw-access {
  margin-top: 0;
  width: 100%;
}
/* Landmark-Associated box: grey header (Landmark Users is accent blue). */
.npw-access-grey .npw-access-head {
  background: #6b7785;
}
.npw-access-error {
  border-color: #c0392b;
}
.npw-access-head {
  height: 35.2px;
  padding: 0 12.8px;
  display: flex;
  align-items: center;
  background: #5b9bd5;
}
.npw-access-count {
  font-size: 11.2px;
  font-weight: 600;
  color: #fff;
}
.npw-access-foot {
  height: 35.2px;
  padding: 0 12.8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef1f4;
  background: #f7f9fb;
  font-size: 9.6px;
  font-weight: 500;
  color: #555;
}
.npw-access-toggle {
  border: none;
  background: none;
  padding: 0;
  font-size: 9.6px;
  font-weight: 600;
  color: #5b9bd5;
  cursor: pointer;
}
.npw-access-toggle:hover {
  text-decoration: underline;
}
.npw-access-toggle:disabled {
  cursor: default;
  text-decoration: none;
}
.npw-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Height (15 rows × 55px) is set inline from the page, as React does. */
  overflow-y: auto;
}
.npw-access-row {
  display: flex;
  align-items: center;
  gap: 9.6px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12.8px;
  border-bottom: 1px solid #f1f3f5;
}
/* Padding rows that fill the list out to 15 — blank, no divider lines. */
.npw-access-row-empty {
  background: #fff;
  border-bottom: none;
}
.npw-access-row:last-child {
  border-bottom: none;
}
.npw-access-check {
  flex: 0 0 auto;
  width: 13.6px;
  height: 13.6px;
  margin: 0;
  accent-color: #5b9bd5;
  cursor: pointer;
}
/* Associated rows use a remove (×) button instead of a checkbox. */
.npw-access-remove {
  flex: 0 0 auto;
  width: 20.8px;
  height: 20.8px;
  border: none;
  background: transparent;
  color: #b0b8c0;
  font-size: 16px;
  line-height: 1;
  border-radius: 3.2px;
  cursor: pointer;
}
.npw-access-remove:hover {
  background: #fbe9e7;
  color: #c0392b;
}
/* Lock in place of the checkbox / remove control for a role-held user. */
.npw-access-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20.8px;
  height: 20.8px;
  color: #9aa3ad;
  cursor: not-allowed;
}
.npw-access-lock-check {
  width: 13.6px;
  height: 13.6px;
}
/* Unchecked (access revoked) rows read de-emphasised but stay listed. */
.npw-access-row-off .npw-access-avatar,
.npw-access-row-off .npw-access-meta {
  opacity: 0.45;
}
.npw-access-avatar {
  flex: 0 0 auto;
  width: 25.6px;
  height: 25.6px;
  border-radius: 50%;
  background: #5b9bd5;
  color: #fff;
  font-size: 9.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-access-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.npw-access-name {
  display: flex;
  align-items: center;
  gap: 6.4px;
  min-width: 0;
  font-size: 11.2px;
  font-weight: 500;
  color: #222;
}
.npw-access-name-text {
  flex: 0 0 auto;
}
.npw-access-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2f7d32;
  background: #e6f4e7;
  border-radius: 2.4px;
  padding: 1px 4px;
}
.npw-access-sub {
  font-size: 9.6px;
  color: #8a99a8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "+ Add User" row in the Landmark-Associated box. */
.npw-access-addrow {
  display: flex;
  align-items: center;
  gap: 6.4px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6.4px 12.8px;
  border-bottom: 1px solid #f1f3f5;
}
.npw-access-addbtn {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-size: 10.4px;
  font-weight: 600;
  color: #5b9bd5;
  cursor: pointer;
}
.npw-access-addbtn:hover {
  text-decoration: underline;
}
/* Read-only (edit mode policy). */
.npw-access-addbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}
.npw-access-addchoose {
  display: flex;
  gap: 6.4px;
  flex: 1;
}
.npw-access-addopt {
  flex: 1;
  padding: 6.4px 8px;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  background: #fff;
  font-size: 10.4px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}
.npw-access-addopt:hover {
  border-color: #5b9bd5;
  color: #5b9bd5;
}
.npw-access-addcancel {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: #b0b8c0;
  cursor: pointer;
}

/* ---------- Create New / Directory dialogs (report-docs.css .add-doc-* chrome) ---------- */
/* Setup has no project theme: React's wizard dialogs fall back to a #222 header (report-docs.css
   paints it the project primary) and are 416px wide (report-docs.css widens them to 464). */
.npw-shell .add-doc-modal-header {
  background: #222;
}
.npw-shell .add-doc-modal.npw-assoc-modal {
  width: 416px;
  max-width: 92vw;
}
.npw-assoc-modal .add-doc-modal-body {
  display: flex;
  flex-direction: column;
  gap: 9.6px;
}
.npw-assoc-close {
  font-size: 20.8px;
  line-height: 1;
}
/* Directory picker list — panel-style rows with a multi-select check; ~5 rows then scrolls. */
.npw-dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
}
.npw-dir-row {
  cursor: pointer;
}
.npw-dir-row:hover {
  background: #f0f6fc;
}
.npw-access-dirempty {
  padding: 9.6px 11.2px;
  font-size: 9.6px;
  color: #8a99a8;
}
/* ---------- External Users (step 5) — one box per group in three columns ---------- */
.npw-ext-cols {
  display: flex;
  align-items: stretch;
  /* 57.6px gap (no per-column padding) keeps every column the same width — identical thirds. */
  column-gap: 57.6px;
  margin-top: 14.4px;
}
.npw-ext-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
/* Divider centred in the 57.6px gap to the right of every interior column. */
.npw-ext-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -28.8px;
  width: 1px;
  background: #d9d9d9;
}
.npw-ext-cols .npw-access {
  margin-top: 0;
  width: 100%;
}
/* Each box shows 7 rows (44px) then scrolls; empty rows pad out shorter groups. */
.npw-ext-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 308px;
  overflow-y: auto;
}
/* External user row — user-type tag. */
.npw-access-typetag {
  flex: 0 0 auto;
  margin-right: 4.8px;
  padding: 1.6px 7.2px;
  border-radius: 8px;
  background: #eef2f6;
  color: #44505c;
  font-size: 8.8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Directory dialogs — user-type tabs, company rows (drill in), footer. */
.npw-dir-tabs {
  display: flex;
  gap: 1.6px;
  margin-bottom: 9.6px;
  border-bottom: 1px solid #e2e6ea;
}
.npw-dir-tab {
  border: none;
  background: none;
  padding: 6.4px 12.8px;
  font-size: 10.4px;
  font-weight: 600;
  color: #6b7785;
  cursor: pointer;
  border-bottom: 1.6px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.npw-dir-tab:hover { color: #2f6fae; }
.npw-dir-tab-on { color: #2f6fae; border-bottom-color: #5b9bd5; }
/* Company rows drill in — chevron instead of a checkbox. */
.npw-dir-arrow {
  flex: 0 0 auto;
  font-size: 19.2px;
  line-height: 1;
  color: #b0b8c0;
}
.npw-dir-company .npw-access-name-text {
  font-weight: 600;
}
/* Same fixed footer height in both views so the dialog doesn't resize. */
.npw-dir-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46.4px;
  box-sizing: border-box;
}
.npw-dir-hint {
  font-size: 10.4px;
  color: #8a99a8;
}
/* Grey context row pinned to the top of the users list (the company you're in). */
.npw-dir-company-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12.8px;
  background: #eef1f4;
  border-bottom: 1px solid #e2e6ea;
  font-size: 10.4px;
  font-weight: 600;
  color: #555;
}

/* Create New: Company type-ahead + "Search Directory", read-only User Type. */
.npw-combo {
  position: relative;
}
.npw-combo-row { display: flex; align-items: stretch; gap: 4.8px; }
.npw-combo-row .npw-input { flex: 1 1 auto; min-width: 0; }
/* Locked look once a company is chosen from the directory. */
.npw-combo-row .npw-input[readonly] { background: #f4f6f8; cursor: default; }
.npw-combo-dirbtn {
  flex: 0 0 auto;
  padding: 0 11.2px;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  background: #fff;
  color: #2f6fae;
  font-size: 10.4px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.npw-combo-dirbtn:hover { background: #eef6fc; border-color: #5b9bd5; }
.npw-combo-clear {
  flex: 0 0 auto;
  align-self: center;
  width: 20.8px;
  height: 20.8px;
  border: none;
  background: transparent;
  color: #b0b8c0;
  font-size: 16px;
  line-height: 1;
  border-radius: 3.2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-combo-clear:hover { background: #fbe9e7; color: #c0392b; }
.npw-combo-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 1.6px 0 0;
  padding: 0;
  list-style: none;
  max-height: 134.4px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.12);
}
.npw-combo-list li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6.4px 9.6px;
  border: none;
  background: none;
  font-size: 11.2px;
  color: #333;
  cursor: pointer;
}
.npw-combo-list li button:hover {
  background: #f0f6fc;
}
.npw-input-static {
  display: flex;
  align-items: center;
  background: #f4f6f8;
  color: #44505c;
  cursor: default;
}
/* Inline duplicate messages under Create New fields: error (email, blocks) and warn (name / phone). */
.npw-shell .npw-field-error {
  font-size: 9.6px;
  color: #c0392b;
  padding-left: 7.2px;
}
.npw-shell .npw-field-warn {
  font-size: 9.6px;
  color: #9a6a00;
  padding-left: 7.2px;
}

/* Directory load error shown inside the step body (the footer banner is for saves). */
.npw-error.npw-error-inline {
  margin: 0 0 12.8px;
}

/* Required-field validation outline — the form error red (#c0392b). */
.npw-shell .npw-input-error,
.npw-shell .npw-input-error:focus,
.npw-shell .styled-select-trigger.npw-input-error {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}

.npw-coming-soon-text {
  color: #6b7280;
  font-size: 11.2px;
  line-height: 1.55;
}

/* ---------- Error + footer ---------- */
.npw-error {
  margin: 0 28.8px 9.6px;
  padding: 9.6px 12.8px;
  background: #fdecea;
  border: 1px solid #f0b4ab;
  color: #9a3a2c;
  border-radius: 4.8px;
  font-size: 10.4px;
}

/* Steady, non-error guidance shown while a step is incomplete (Next disabled). */
.npw-step-hint {
  margin: 0 28.8px 9.6px;
  padding: 8px 12.8px;
  background: #f3f6f9;
  border: 1px solid #dbe2e9;
  color: #5b6b7a;
  border-radius: 4.8px;
  font-size: 10.4px;
}

/* Footer mirrors the FormSlideout footer chrome (#eae8e5, 1.6px top rule). */
.npw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28.8px;
  height: 53.6px;
  background: #eae8e5;
  border-top: 1.6px solid #d9d9d9;
}
/* Blazor-only: Cancel, then edit mode's Save & Close to its right. Same gap as the right group. */
.npw-footer-left,
.npw-footer-right {
  display: flex;
  gap: 8px;
}

/* Buttons: React .npw-btn (10.4px / 600 / 6.4px 14.4px / radius 3.2px). Scoped to the
   shell so they beat report-docs.css's .add-doc-overlay variants (project-themed). */
.npw-shell .npw-btn {
  font-family: inherit;
  font-size: 10.4px;
  font-weight: 600;
  line-height: normal;
  padding: 6.4px 14.4px;
  border-radius: 3.2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.npw-shell .npw-btn:disabled {
  cursor: not-allowed;
}
.npw-shell .npw-btn-secondary {
  background: rgba(0, 0, 0, 0.08);
  color: #555;
}
.npw-shell .npw-btn-secondary:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.14);
  color: #333;
}
.npw-shell .npw-btn-secondary:disabled {
  opacity: 0.5;
}
/* No project theme here (React: --brand-hover isn't published on the wizard → #5b9bd5). */
.npw-shell .npw-btn-primary {
  background: #5b9bd5;
  border-color: #5b9bd5;
  color: #fff;
}
.npw-shell .npw-btn-primary:not(:disabled):hover {
  background: #4282c0;
  border-color: #4282c0;
}
.npw-shell .npw-btn-primary:disabled {
  background: #ccc;
  border-color: #ccc;
  color: #999;
}
.npw-shell .npw-btn-cancel {
  background: rgba(217, 54, 54, 0.18);
  color: #c22;
}
.npw-shell .npw-btn-cancel:not(:disabled):hover {
  background: rgba(217, 54, 54, 0.28);
}
.npw-shell .npw-btn-cancel:disabled {
  opacity: 0.5;
}

/* ---------- Success screen ---------- */
.npw-success {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6.4px;
  max-width: 336px;
}
.npw-success-check {
  width: 44.8px;
  height: 44.8px;
  border-radius: 50%;
  background: rgba(92, 184, 92, 0.18);
  color: #2d6e2d;
  font-size: 22.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6.4px;
}
.npw-success .npw-btn {
  margin-top: 12.8px;
}

/* ---------- Cancel confirm modal (reuses report-docs.css .add-doc-* chrome) ---------- */
.npw-confirm-modal {
  width: 336px;
}
.npw-confirm-modal .add-doc-modal-close {
  font-size: 20.8px;
}
.npw-confirm-text {
  margin: 0;
  font-size: 10.4px;
  line-height: 1.5;
  color: #444;
}

/* ---- Project Roles step (React NewProjectWizardPage.css) — two boxes (Landmark / External)
   with prominent coloured headers, in the same two-column + divider layout as Internal Users.
   NB: no overflow:hidden on the box so the role pickers' dropdowns can escape. */
.npw-roles-box {
  width: 100%;
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
  background: #fff;
  /* Fill the column so the External box matches the (taller) Landmark box. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.npw-roles-box-head {
  height: 35.2px;
  padding: 0 12.8px;
  display: flex;
  align-items: center;
  border-radius: 6.4px 6.4px 0 0;
  background: #5b9bd5; /* Landmark accent */
}
.npw-roles-box-head span {
  font-size: 11.2px;
  font-weight: 600;
  color: #fff;
}
.npw-roles-box-grey .npw-roles-box-head {
  background: #6b7785;
}
.npw-roles-body {
  padding: 12.8px;
  display: flex;
  flex-direction: column;
  gap: 12.8px;
  flex: 1 1 auto; /* fill the box height so equal-height boxes look intentional */
}
/* External Roles "N/A" placeholder — shown when no External Users exist. */
.npw-roles-na {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6.4px;
  padding: 19.2px 14.4px;
}
.npw-roles-na-title {
  font-size: 14.4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9aa3ad;
}
.npw-roles-na-sub {
  font-size: 9.6px;
  line-height: 1.5;
  color: #8a929b;
  max-width: 208px;
}
.npw-roles-na-error .npw-roles-na-title,
.npw-roles-na-error .npw-roles-na-sub {
  color: #c0392b;
}

.npw-role-field {
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}
.npw-role-control {
  position: relative;
}
/* Selected people render as rows (like External Users), in a bordered list with
   the add ("Select…" / "+ Add") action as the last row. */
.npw-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  overflow: hidden;
  background: #fff;
}
.npw-role-list-error {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}
.npw-role-list > :last-child {
  border-bottom: none;
}
.npw-role-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 3.2px;
  list-style: none;
  padding: 0;
  max-height: 192px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.12);
}
.npw-role-dropdown li button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6.4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit; /* React's global button rule (App.css) */
}
.npw-role-dropdown li button:hover {
  background: #f0f6fc;
}
.npw-role-opt-avatar {
  flex: 0 0 auto;
  width: 22.4px;
  height: 22.4px;
  border-radius: 50%;
  background: #5b9bd5;
  color: #fff;
  font-size: 8.8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-role-opt-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.npw-role-opt-name {
  font-size: 11.2px;
  color: #222;
}
.npw-role-opt-sub {
  font-size: 9.6px;
  color: #8a99a8;
}
.npw-role-empty {
  padding: 8px;
  font-size: 10.4px;
  color: #8a99a8;
}

/* ===========================================================================
   Step 7 — Workflow Configuration (per-form-type chain editor). Line-for-line port of
   React NewProjectWizardPage.css, preceded by a reset that stands in for React's global
   App.css one (* { margin:0; padding:0; box-sizing:border-box }, button/input font inherit,
   body line-height normal) which Bootstrap's reboot does not match. The reset is
   :where()-scoped so every .npw-wf-* rule below still wins over it.
   =========================================================================== */
.npw-wf-layout {
  line-height: normal;
}
.npw-wf-layout :where(*, *::before, *::after) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.npw-wf-layout :where(h3, button, input) {
  font-family: inherit;
  line-height: inherit;
}
.npw-wf-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 22.4px;
  margin-top: 0;
}

/* ---- Left rail: form-type picker ---- */
.npw-wf-rail {
  flex: 0 0 249.6px;
  display: flex;
  flex-direction: column;
  gap: 12.8px;
  overflow-y: auto;
  padding-right: 3.2px;
}
.npw-wf-rail-group {
  display: flex;
  flex-direction: column;
  gap: 3.2px;
}
.npw-wf-rail-grouphd {
  font-size: 8.8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a99a8;
  padding: 0 3.2px 1.6px;
}
.npw-wf-rail-item {
  display: flex;
  align-items: center;
  gap: 6.4px;
  width: 100%;
  /* Fixed height so the row doesn't grow when the (taller) confirmed check
     appears — every item matches the with-check height. */
  min-height: 32px;
  box-sizing: border-box;
  text-align: left;
  padding: 7.2px 9.6px;
  border: 1px solid #e2e6ea;
  border-radius: 5.6px;
  background: #fff;
  color: #222;
  font-size: 10.8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.npw-wf-rail-item:hover {
  border-color: #c2cdd8;
  background: #f7fafd;
}
.npw-wf-rail-item-on {
  border-color: #5b9bd5;
  background: #eef6fc;
  font-weight: 600;
}
.npw-wf-rail-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npw-wf-rail-dot {
  flex: 0 0 auto;
  width: 6.4px;
  height: 6.4px;
  border-radius: 50%;
  background: #5b9bd5;
}

/* ---- Right editor ---- */
.npw-wf-editor {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
  background: #fbfcfd;
  padding: 16px 19.2px 19.2px;
  overflow-y: auto;
}
/* Blue header band, full-bleed to the editor's edges (offsets its padding). */
.npw-wf-editor-head {
  margin: -16px -19.2px 16px;
  padding: 11.2px 19.2px;
  background: #5b9bd5;
  border-radius: 6.4px 6.4px 0 0;
}
.npw-wf-editor-title {
  margin: 0;
  font-size: 13.6px;
  font-weight: 700;
  color: #fff;
}
.npw-wf-editor-blurb {
  margin: 3.2px 0 0;
  font-size: 10.4px;
  color: rgba(255, 255, 255, 0.88);
}

/* ---- Stages (Submission | Internal Review | Owner / Client Approval) ---- */
.npw-wf-stages {
  display: flex;
  align-items: stretch;
  margin-top: 3.2px;
  /* Guaranteed gap before the footer (the footer's auto top-margin collapses to
     0 when the stages fill the panel, so this keeps them from touching). */
  margin-bottom: 22.4px;
  overflow-x: auto;
}
.npw-wf-stage {
  flex: 1 1 0;
  min-width: 195.2px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 17.6px;
}
.npw-wf-stage:first-child {
  padding-left: 0;
}
.npw-wf-stage:last-child {
  padding-right: 0;
}
/* vertical divider between stages */
.npw-wf-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: #e2e6ea;
}
.npw-wf-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9.6px;
  margin-bottom: 12.8px;
  border-bottom: 1px solid #e2e6ea;
}
.npw-wf-stage-num {
  flex: 0 0 auto;
  width: 20.8px;
  height: 20.8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.4px;
  font-weight: 700;
  color: #fff;
}
.npw-wf-stage-title {
  font-size: 12px;
  font-weight: 700;
}
.npw-wf-stage-sub .npw-wf-stage-num { background: #2b3440; }
.npw-wf-stage-sub .npw-wf-stage-title { color: #2b3440; }
.npw-wf-stage-internal .npw-wf-stage-num { background: #5b9bd5; }
.npw-wf-stage-internal .npw-wf-stage-title { color: #3f7fb8; }
.npw-wf-stage-owner .npw-wf-stage-num { background: #2f9e6f; }
.npw-wf-stage-owner .npw-wf-stage-title { color: #26895f; }
.npw-wf-stage-map .npw-wf-stage-num { background: #5b9bd5; }
.npw-wf-stage-map .npw-wf-stage-title { color: #3f7fb8; }

.npw-wf-stage-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9.6px;
}
.npw-wf-endcap {
  align-self: center;
  padding: 4px 12.8px;
  border-radius: 799.2px;
  background: #eef1f4;
  color: #6b7785;
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.npw-wf-endcap-internal {
  background: #e3eef9;
  color: #3f7fb8;
}
.npw-wf-endcap-done {
  background: #e7f4ec;
  color: #2f7d52;
}
.npw-wf-endcap-map {
  background: #e3eef9;
  color: #3f7fb8;
}
/* connector line between consecutive boxes within a stage */
.npw-wf-stage-body > * + * {
  position: relative;
}
.npw-wf-stage-body > * + *::before {
  content: '';
  position: absolute;
  top: -9.6px;
  left: 50%;
  width: 1.6px;
  height: 9.6px;
  background: #d3dae1;
}

/* ---- Step card ---- */
.npw-wf-step {
  display: flex;
  align-items: center;
  gap: 9.6px;
  padding: 8px 11.2px;
  border: 1px solid #e2e6ea;
  border-left-width: 3.2px;
  border-radius: 6.4px;
  background: #fff;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.04);
}
.npw-wf-tone-landmark { border-left-color: #5b9bd5; }
.npw-wf-tone-ext      { border-left-color: #6b7785; }
.npw-wf-tone-owner    { border-left-color: #2f9e6f; }
.npw-wf-tone-fund     { border-left-color: #c98a2b; }
.npw-wf-tone-sub      { border-left-color: #2b3440; }
.npw-wf-tone-map      { border-left-color: #5b9bd5; }
/* submitter rows are read-only categories (greyed, no avatar/number) */
.npw-wf-submit-row .npw-wf-person-name {
  color: #9aa6b2;
}

.npw-wf-step-meta {
  display: flex;
  flex-direction: column;
  gap: 2.4px;
  min-width: 0;
}
.npw-wf-step-label {
  font-size: 11.2px;
  font-weight: 600;
  color: #222;
}
.npw-wf-step-role {
  font-weight: 400;
  color: #9aa6b2;
}
.npw-wf-step-sub {
  font-size: 9.6px;
  color: #8a99a8;
}
/* Assigned people — one or more mini-avatar + name chips. */
.npw-wf-step-people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.npw-wf-person {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  min-width: 0;
}
.npw-wf-person-av {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5b9bd5;
  color: #fff;
  font-size: 7.2px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-wf-person-name {
  font-size: 10px;
  color: #4a5662;
}
.npw-wf-step-unassigned {
  font-size: 9.6px;
  font-style: italic;
  color: #8a99a8;
}

/* reorder arrows — small rounded chevron buttons (chain step + member rows) */
.npw-wf-reorder {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.4px;
}
.npw-wf-reorder button,
.npw-wf-group-arrows button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.6px;
  height: 12px;
  padding: 0;
  border: 1px solid #e2e6ea;
  border-radius: 3.2px;
  background: #f4f7fa;
  color: #6b7785;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.npw-wf-reorder button:hover:not(:disabled),
.npw-wf-group-arrows button:hover:not(:disabled) {
  background: #e6f1fb;
  border-color: #b9d6ef;
  color: #2f6fae;
}
.npw-wf-reorder button:disabled,
.npw-wf-group-arrows button:disabled {
  background: #fafbfc;
  border-color: #eef1f4;
  color: #cdd5dd;
  cursor: default;
}
.npw-wf-chev {
  display: block;
}
.npw-wf-reorder-lock {
  align-items: center;
  justify-content: center;
  width: 17.6px;
  height: 17.6px;
  color: #aeb8c2;
}
.npw-wf-lock {
  display: block;
}

/* ---- Threshold control — inside the step box, below the members ---- */
.npw-wf-step-threshold {
  padding-top: 8px;
  border-top: 1px dashed #e2e6ea;
}
.npw-wf-threshold {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6.4px 8px;
  /* Indent to line the checkbox up with the user-row box (which is inset 25.6px). */
  padding-left: 25.6px;
}
.npw-wf-thresh-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5.6px;
  font-size: 10px;
  color: #4a5662;
  cursor: pointer;
}
.npw-wf-thresh-toggle input {
  width: 12px;
  height: 12px;
  accent-color: #5b9bd5;
  cursor: pointer;
}
.npw-wf-thresh-amt {
  flex: 1 1 auto; /* stretch so its right edge meets the box's right edge */
  display: flex;
  align-items: center;
  gap: 1.6px;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  padding: 1.6px 6.4px;
  background: #fff;
}

/* PCF Submission — Resolution Deadline (positive days after Date of Origin),
   shown inside the Submitter box below the submitter list. The 25.6px left margin
   matches the submitter input box (.npw-wf-group-list) so their left edges align. */
.npw-wf-deadline {
  margin: 8px 0 0 25.6px;
  padding-top: 8px;
  border-top: 1px dashed #d7dde3;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}
/* Header row: label on the left, remove (×) aligned to the box's right edge. */
.npw-wf-deadline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6.4px;
}
.npw-wf-deadline-label {
  font-size: 9.6px;
  font-weight: 600;
  color: #5b6b7a;
}
.npw-wf-deadline-input {
  display: flex;
  align-items: center;
  gap: 6.4px;
}
.npw-wf-deadline-field {
  width: 51.2px;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  padding: 4px 6.4px;
  font-size: 10.4px;
  color: #222;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.npw-wf-deadline-field::placeholder {
  color: #b0b0b0;
  opacity: 1;
}
.npw-wf-deadline-suffix {
  font-size: 9.6px;
  color: #6b7785;
}
.npw-wf-thresh-amt-off {
  opacity: 0.45;
}
.npw-wf-thresh-dollar {
  font-size: 10.4px;
  color: #6b7785;
}
.npw-wf-thresh-amt input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 10.4px;
  color: #222;
  background: transparent;
  /* $ stays pinned left; the digits sit against the right edge. */
  text-align: right;
}
.npw-wf-thresh-amt input::placeholder {
  color: #b0b0b0;
  opacity: 1;
}

/* ---- Funding-party insertion controls (pinned to the Owner column bottom) -- */
.npw-wf-funds {
  margin-top: auto; /* pushes the section to the bottom of the column */
  padding-top: 11.2px;
  border-top: 1px solid #e2e6ea;
}
/* These sit below the Approved pill — no chain connector to them. */
.npw-wf-stage-body > .npw-wf-funds::before,
.npw-wf-stage-body > .npw-wf-funds-empty::before {
  display: none;
}
.npw-wf-funds-hd {
  font-size: 9.6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a99a8;
  margin-bottom: 8px;
}
/* Each funding party is a row: label + (+ Add → Before/After toggle). */
.npw-wf-fund-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27.2px;
  padding: 3.2px 0;
}
.npw-wf-fund-label {
  flex: 1 1 auto;
  font-size: 10.8px;
  font-weight: 600;
  color: #222;
}
.npw-wf-fund-add {
  flex: 0 0 auto;
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  background: #fff;
  color: #2f6fae;
  font-size: 9.6px;
  font-weight: 600;
  padding: 3.2px 9.6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.npw-wf-fund-add:hover {
  background: #eef6fc;
  border-color: #b9d6ef;
}
.npw-wf-fund-place {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4.8px;
}
.npw-wf-seg {
  display: flex;
  align-items: center;
  gap: 4.8px;
}
.npw-wf-seg-btn {
  padding: 4px 9.6px;
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  background: #fff;
  color: #4a5662;
  font-size: 10px;
  cursor: pointer;
}
.npw-wf-seg-btn:hover {
  border-color: #c98a2b;
}
.npw-wf-seg-btn-on {
  border-color: #c98a2b;
  background: #fbf2e3;
  color: #8a5d16;
  font-weight: 600;
}
.npw-wf-fund-clear {
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: #8a99a8;
  cursor: pointer;
  padding: 0 1.6px;
}
.npw-wf-fund-clear:hover {
  color: #c0392b;
}
.npw-wf-funds-empty {
  margin-top: auto;
  padding-top: 11.2px;
  border-top: 1px solid #e2e6ea;
  font-size: 10px;
  color: #8a99a8;
}

/* ---- Multi-holder approval group (Owner / Investor / Lender) ---- */
.npw-wf-step-group {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.npw-wf-group-head {
  display: flex;
  align-items: center;
  gap: 9.6px;
}
.npw-wf-group-head .npw-wf-step-label {
  flex: 1 1 auto;
}
.npw-wf-simul {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4.8px;
  font-size: 10px;
  color: #4a5662;
  cursor: pointer;
}
.npw-wf-simul input {
  width: 12px;
  height: 12px;
  accent-color: #2f9e6f;
  cursor: pointer;
}
.npw-wf-group-list {
  list-style: none;
  margin: 0 0 0 25.6px; /* indent under the lock/label */
  padding: 0;
  border: 1px solid #e2e6ea;
  border-radius: 5.6px;
  background: #fff;
  overflow: hidden;
}
.npw-wf-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 35.2px;
  box-sizing: border-box;
  padding: 0 9.6px;
  border-bottom: 1px solid #f1f3f5;
}
.npw-wf-group-row:last-child {
  border-bottom: none;
}
.npw-wf-group-num {
  flex: 0 0 auto;
  width: 14.4px;
  height: 14.4px;
  border-radius: 50%;
  background: #eef1f4;
  color: #6b7785;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Placeholder that reserves the number slot so avatars/names stay aligned even
   when no number is shown (simultaneous mode, removed rows). */
.npw-wf-group-num-empty {
  background: transparent;
  color: transparent;
}
.npw-wf-group-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6.4px;
  margin-left: auto;
}
.npw-wf-group-remove {
  border: none;
  background: none;
  font-size: 14.4px;
  line-height: 1;
  color: #b0bac4;
  cursor: pointer;
  padding: 0 1.6px;
}
.npw-wf-group-remove:hover {
  color: #c0392b;
}
/* Removed-but-restorable holder row (greyed, with a + Add action). */
.npw-wf-group-row-removed {
  background: #fafbfc;
}
.npw-wf-group-row-removed .npw-wf-person-av {
  background: #c2cdd8;
}
.npw-wf-group-row-removed .npw-wf-person-name {
  color: #9aa6b2;
  font-style: italic;
}
.npw-wf-group-add {
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  background: #fff;
  color: #2f6fae;
  font-size: 9.2px;
  font-weight: 600;
  padding: 2.4px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.npw-wf-group-add:hover {
  background: #eef6fc;
  border-color: #b9d6ef;
}
.npw-wf-group-arrows {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.4px;
}
.npw-wf-group-hint {
  padding-left: 25.6px;
  font-size: 9.2px;
  font-style: italic;
  color: #9aa6b2;
}
.npw-wf-group-empty {
  padding-left: 25.6px;
}

/* ---- Rail confirmed checkmark ---- */
.npw-wf-rail-check {
  flex: 0 0 auto;
  width: 14.4px;
  height: 14.4px;
  border-radius: 50%;
  background: #2f9e6f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Editor footer (Reset to Default + Confirm) ---- */
/* Full-bleed band flush to the editor's bottom edge (offsets the editor's
   padding) so the buttons centre in their own band, not above the panel's
   bottom padding. */
.npw-wf-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* auto top margin pins the footer to the bottom of the (filled) editor */
  margin: auto -19.2px -19.2px;
  padding: 11.2px 19.2px;
  border-top: 1px solid #e2e6ea;
  border-radius: 0 0 6.4px 6.4px;
}
/* "Assign … in Project Roles to confirm" hint, shown when an internal chain role
   is unassigned (sits between Reset and the disabled Confirm button). */
.npw-wf-foot-hint {
  flex: 1 1 auto;
  text-align: right;
  margin-right: 11.2px;
  font-size: 9.6px;
  line-height: 1.4;
  color: #c0392b;
}
.npw-wf-reset-btn {
  border: none;
  background: none;
  color: #6b7785;
  font-size: 10.4px;
  font-weight: 600;
  cursor: pointer;
  padding: 4.8px 3.2px;
}
.npw-wf-reset-btn:hover:not(:disabled) {
  color: #c0392b;
  text-decoration: underline;
}
.npw-wf-reset-btn:disabled {
  color: #c2cdd8;
  cursor: default;
}
.npw-wf-confirm-btn {
  border: none;
  border-radius: 5.6px;
  background: #5b9bd5;
  color: #fff;
  font-size: 10.8px;
  font-weight: 600;
  padding: 7.2px 17.6px;
  cursor: pointer;
  transition: background 0.12s;
}
.npw-wf-confirm-btn:hover:not(:disabled) {
  background: #4a8ac4;
}
.npw-wf-confirm-btn:disabled {
  cursor: default;
}
/* Disabled but NOT yet confirmed = nothing to do (greyed). */
.npw-wf-confirm-btn:disabled:not(.npw-wf-confirm-done) {
  background: #d3dae1;
  color: #fff;
}
/* Confirmed-and-clean = green "done" state. */
.npw-wf-confirm-done {
  background: #e7f4ec;
  color: #2f7d52;
}

/* ---- Remove-whole-step × (in a step box header) ---- */
.npw-wf-step-remove {
  flex: 0 0 auto;
  border: none;
  background: none;
  font-size: 14.4px;
  line-height: 1;
  color: #b0bac4;
  cursor: pointer;
  padding: 0 1.6px;
}
.npw-wf-step-remove:hover {
  color: #c0392b;
}

/* ---- "+ Add Step" control (Internal Review stage) ---- */
.npw-wf-addstep {
  align-self: center;
}
.npw-wf-stage-body > .npw-wf-addstep::before,
.npw-wf-stage-body > .npw-wf-stage-empty::before {
  display: none;
}
.npw-wf-addstep-btn {
  border: 1px dashed #c2cdd8;
  border-radius: 5.6px;
  background: #fff;
  color: #2f6fae;
  font-size: 10px;
  font-weight: 600;
  padding: 5.6px 12.8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.npw-wf-addstep-btn:hover {
  background: #eef6fc;
  border-color: #5b9bd5;
}
.npw-wf-addstep-opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4.8px;
  justify-content: center;
}
.npw-wf-addstep-opt {
  border: 1px solid #cfd6dd;
  border-radius: 4.8px;
  background: #fff;
  color: #4a5662;
  font-size: 10px;
  padding: 4px 8.8px;
  cursor: pointer;
}
.npw-wf-addstep-opt:hover {
  border-color: #5b9bd5;
  background: #eef6fc;
  color: #2f6fae;
}
.npw-wf-addstep-cancel {
  border: none;
  background: none;
  font-size: 14.4px;
  line-height: 1;
  color: #8a99a8;
  cursor: pointer;
  padding: 0 1.6px;
}
.npw-wf-addstep-cancel:hover {
  color: #c0392b;
}
.npw-wf-stage-empty {
  align-self: center;
  margin: 3.2px 0 0;
  font-size: 10px;
  font-style: italic;
  color: #9aa6b2;
}

/* ---- Dual Internal-Review outcomes (PCF: advance vs. report) ---- */
.npw-wf-endcaps {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8px;
}
.npw-wf-endcaps-or {
  font-size: 8.8px;
  font-style: italic;
  color: #9aa6b2;
}

/* ---- Empty spacer stage (keeps 2-stage forms the same width as 3-stage) ---- */
.npw-wf-stage-spacer {
  pointer-events: none;
}

/* ===========================================================================
   Steps 8 + 9 — the shared spreadsheet ledger (npw-mpb-*), Sources of Funds' category
   picker (npw-sof-addcat*) and duplicate sub-code ring. Line-for-line port of React
   NewProjectWizardPage.css. Like the workflow step, a :where() reset first stands in for
   React's global App.css reset (Bootstrap's reboot differs); every rule below wins over it.
   =========================================================================== */
.npw-mpb-ledger {
  line-height: normal;
}
.npw-mpb-ledger :where(*, *::before, *::after) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.npw-mpb-ledger :where(button, input) {
  font-family: inherit;
  line-height: inherit;
}

.npw-sof-addcat {
  position: relative;
  align-self: flex-start;
}
.npw-sof-addcat-btn {
  border: 1px dashed #c2cdd8;
  border-radius: 5.6px;
  background: #fff;
  color: #2f6fae;
  font-size: 10.4px;
  font-weight: 600;
  padding: 7.2px 12.8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.npw-sof-addcat-btn:hover { background: #eef6fc; border-color: #5b9bd5; }
.npw-sof-addcat-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: 3.2px;
  min-width: 224px;
  list-style: none;
  padding: 3.2px;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 5.6px;
  box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, 0.12);
}
/* Portaled to <body> so the ledger's overflow can't clip it; positioned via the
   trigger's viewport rect (top/left set inline). */
.npw-sof-addcat-menu-portal {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
  z-index: 1000;
}
.npw-sof-addcat-menu li button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6.4px 8px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
}
.npw-sof-addcat-menu li button:hover:not(:disabled) { background: #f0f6fc; }
.npw-sof-addcat-menu li button:disabled { cursor: not-allowed; }
/* Custom checkbox box for the category multi-select; fills blue when checked. */
.npw-sof-addcat-box {
  flex: 0 0 auto;
  width: 12.8px;
  height: 12.8px;
  border: 1.2px solid #b8c2cc;
  border-radius: 2.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #fff;
}
.npw-sof-addcat-opt-on .npw-sof-addcat-box {
  background: #5b9bd5;
  border-color: #5b9bd5;
}
.npw-sof-addcat-lockicon {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  color: #9aa3ad;
}
.npw-sof-addcat-code {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: #6b7785;
  font-variant-numeric: tabular-nums;
}
.npw-sof-addcat-label {
  flex: 1 1 auto;
  font-size: 10.8px;
  color: #222;
}

.npw-sof-seq-error,
.npw-sof-seq-error:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}

/* ===========================================================================
   Step 9 — Master Project Budget (single-pane ledger, mirrors the model "MPB" tab)
   =========================================================================== */
/* Spreadsheet-style ledger: full thin grid (every cell outlined, matching the
   model's all-borders MPB tab), a continuous pale-yellow "Master Project
   Budget" column, bold area / division rows. */
.npw-mpb-ledger {
  border: 3.2px solid #222;
  overflow-x: auto;
  background: #fff;
}
/* Full grid: each cell draws its right + bottom line (container draws top+left).*/
.npw-mpb-row > * {
  border-right: 1px solid #c4ccd3;
  border-bottom: 1px solid #c4ccd3;
  box-sizing: border-box;
}
/* Yellow "Master Project Budget" band (matches the model's FFFFCC fill). */
.npw-mpb-yellow { background: #fffdda; }

/* Every ledger row shares one column template so the columns align. */
.npw-mpb-row {
  display: flex;
  align-items: stretch;
  min-width: 752px;
}

/* Column widths (shared across every row type). */
.npw-mpb-c-add,
.npw-mpb-c-div,
.npw-mpb-c-desc,
.npw-mpb-c-detail,
.npw-mpb-c-mpb,
.npw-mpb-c-notes,
.npw-mpb-c-act {
  display: flex;
  align-items: center;
  padding: 3.2px 6.4px;
  min-height: 25.6px;
  height: 25.6px;
}
.npw-mpb-c-add    { flex: 0 0 36.8px; justify-content: center; padding: 0; }
.npw-mpb-c-div    { flex: 0 0 89.6px; font-variant-numeric: tabular-nums; }
.npw-mpb-c-desc   { flex: 0 0 320px; gap: 4.8px; }
.npw-mpb-c-detail { flex: 0 0 120px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.npw-mpb-c-mpb    { flex: 0 0 120px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.npw-mpb-c-notes  { flex: 1 1 auto; min-width: 272px; }
.npw-mpb-c-act    { flex: 0 0 25.6px; justify-content: center; padding: 0 4.8px; }

/* Header row — pale yellow, bold, centered, two rows tall (mirrors the model) */
.npw-mpb-head > * {
  background: #fffdda;
  border-bottom: 1px solid #aab2ba;
  font-size: 9.6px;
  font-weight: 700;
  color: #222;
  line-height: 1.25;
  white-space: normal;
  min-height: 44.8px;
  justify-content: center;
  text-align: center;
}

/* Area header row — uppercase area name, white on dark gray (mirrors the
   model's "Background 2, Darker 50%" fill) */
.npw-mpb-area-row > * { background: #767171; border-bottom-color: #5f5b5b; }
.npw-mpb-area-name {
  padding-left: 9.6px;
  font-size: 9.6px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}

/* Division row — bold locked code/name + rolled-up MPB in the yellow band */
.npw-mpb-divcode { font-size: 9.6px; font-weight: 700; color: #222; }
.npw-mpb-divname { flex: 1 1 auto; min-width: 0; padding-left: 3.2px; font-size: 9.6px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npw-mpb-rollup { font-size: 9.6px; font-weight: 700; color: #222; }

/* Detail row — regular weight, editable cells that read like the sheet */
.npw-mpb-detailcode { gap: 0; white-space: nowrap; font-size: 9.6px; font-weight: 400; color: #222; }
/* Prefix never wraps (its hyphens are break points) and never shrinks. */
.npw-mpb-prefix { flex: 0 0 auto; white-space: nowrap; font-size: 9.6px; font-weight: 500; color: #222; font-variant-numeric: tabular-nums; }
.npw-mpb-seq,
.npw-mpb-seg {
  width: 27.2px;
  height: 17.6px;
  border: 1px solid transparent;
  border-radius: 2.4px;
  padding: 0 1.6px;
  font: inherit;
  font-size: 9.6px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: #222;
  background: transparent;
}
/* Code segment sized to exactly two digits (2ch) with no border box, so the
   custom code reads + aligns like a static code (10-70-000 under 10-90-000). */
/* Divisional code laid out as fixed-PIXEL slots (px, not ch, so the slot widths
   are independent of font-weight — division 700 and detail 400 codes line up).
   Slots are a touch wider than the digits, which gives the input boxes their
   breathing room (digits centered with a small gap inside the box). */
.npw-mpb-code { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.npw-mpb-code-seg,
.npw-mpb-code-dash {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.npw-mpb-code-seg { width: 17.6px; }   /* 2-digit slot */
.npw-mpb-code-seg3 { width: 23.2px; }  /* 3-digit slot */
.npw-mpb-code-dash { width: 4.8px; }   /* fixed-width dash so it aligns too */
/* Segment inputs fill their slot (the slot owns the width, so alignment holds).
   No padding — breathing room for the focus/error box is the outline-offset below. */
.npw-mpb-seg,
.npw-mpb-seq { width: 100%; flex: 1 1 0; min-width: 0; box-sizing: border-box; border: 0; padding: 0; text-align: center; }
.npw-mpb-seg { font-weight: 700; color: #222; }
.npw-mpb-seq { font-weight: 500; }

/* User-added (custom) division row — editable code segment + name (bold). The
   code reads as one continuous token (10-70-000): prefixes hug the seg input. */
.npw-mpb-customcode { gap: 0; flex-wrap: nowrap; white-space: nowrap; }
.npw-mpb-customcode .npw-mpb-prefix { font-size: 9.6px; color: #222; font-weight: 700; }
/* Match the standard division name formatting (9.6px / 700 / #222). Compound
   selector so it beats the base .npw-mpb-input font-weight (500) regardless of
   source order. */
.npw-mpb-input.npw-mpb-input-bold { font-size: 9.6px; font-weight: 700; color: #222; }

/* Detail (sub) rows — warm off-white background to differentiate from the
   division rows (mirrors Workplan's subtask row #f7f5f2). The yellow MPB band
   stays intact; the focus-within edit highlight (#f0ede8) overrides on edit. */
.npw-mpb-detail-row > *:not(.npw-mpb-yellow) { background: #f7f5f2; }
/* Detail rows render at weight 400 (lighter than the 500 base). */
.npw-mpb-detail-row .npw-mpb-prefix,
.npw-mpb-detail-row .npw-mpb-seq,
.npw-mpb-detail-row .npw-mpb-input,
.npw-mpb-detail-row .npw-mpb-amt-input,
.npw-mpb-detail-row .npw-mpb-amt { font-weight: 400; }

/* Row being added / edited — warm highlight (mirrors Workplan's .wp2-editing),
   leaving the yellow "Master Project Budget" band intact. User-added division
   rows otherwise look identical to the standard ones (no resting tint). */
.npw-mpb-div-row:focus-within > *:not(.npw-mpb-yellow),
.npw-mpb-detail-row:focus-within > *:not(.npw-mpb-yellow) { background: #f0ede8; }
/* Seamless cell inputs — borderless until hover/focus (spreadsheet look) */
.npw-mpb-input {
  flex: 1 1 auto;
  min-width: 0;
}
.npw-mpb-input,
.npw-mpb-amt-input {
  height: 17.6px;
  border: 1px solid transparent;
  border-radius: 2.4px;
  padding: 0 3.2px;
  margin: -1px 0;
  font: inherit;
  font-size: 9.6px;
  font-weight: 500;
  color: #222;
  width: 100%;
  background: transparent;
  box-sizing: border-box;
}
.npw-mpb-amt-input { text-align: right; font-variant-numeric: tabular-nums; }
.npw-mpb-input::placeholder,
.npw-mpb-amt-input::placeholder { color: #b7c0c9; }
/* "Notes" leader text only shows while the row is being edited (focus-within);
   otherwise the Notes field reads empty. */
.npw-mpb-c-notes .npw-mpb-input::placeholder { color: transparent; }
.npw-mpb-row:focus-within .npw-mpb-c-notes .npw-mpb-input::placeholder { color: #b7c0c9; }

/* Accounting $ layout — `$` pinned left, digits right (matches AcctSlots). Used
   in the editable Detail cell and the read-only rollup / subtotal / total cells. */
/* The amount field IS the box — `$` and number both sit inside it (like the
   AcctSlots $ entry fields in the forms). The box shows on hover / focus. */
.npw-mpb-amt {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 17.6px;
  margin: -1px 0;
  padding: 0 3.2px;
  border: 1px solid transparent;
  border-radius: 2.4px;
  box-sizing: border-box;
  font-size: 9.6px;
  font-weight: 500;
}
.npw-mpb-amt:hover { border-color: #d6dce2; background: #fff; }
.npw-mpb-amt:focus-within { border-color: #5b9bd5; background: #fff; box-shadow: 0 0 0 1.6px rgba(91,155,213,0.16); }
/* Inner input is seamless (the wrapper owns the box). flex-basis 0 so it fills
   exactly the space after the `$` and never overflows the column. */
.npw-mpb-amt .npw-mpb-amt-input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.npw-mpb-amt .npw-mpb-amt-input:hover,
.npw-mpb-amt .npw-mpb-amt-input:focus { border: 0; background: transparent; box-shadow: none; }
/* Read-only amount (Owner Contingency): the number fills + right-aligns like the
   editable input, so its $ formatting matches the other detail rows. */
.npw-mpb-amt .npw-mpb-amt-num { flex: 1 1 0; min-width: 0; text-align: right; }
.npw-mpb-amt-sign { flex: 0 0 auto; margin-right: 1.6px; color: #222; }
/* `$` muted to the placeholder gray until a value is entered (matches the digits). */
.npw-mpb-amt-sign-muted { color: #b7c0c9; }

/* Owner Contingency — standard, read-only reconciling detail row. */
.npw-mpb-ro-name { padding-left: 3.2px; font-size: 9.6px; font-weight: 400; color: #222; }
.npw-mpb-amt-ro { cursor: default; }
.npw-mpb-amt-ro:hover { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.npw-mpb-amt-ro .npw-mpb-amt-num { color: #222; }
/* Owner Contingency over-allocated (should not happen via entry — only if Sources
   were later reduced below the budget). Flag it red so the user can correct. */
.npw-mpb-amt-neg .npw-mpb-amt-num,
.npw-mpb-amt-neg .npw-mpb-amt-sign { color: #c0392b; }

/* Required-field validation — red ring + light red fill on an empty required
   field after the user leaves the row. Clears as soon as they edit the field. */
.npw-mpb-err { box-shadow: 0 0 0 1.2px #c0392b !important; border-radius: 2.4px; background: #fbe9e7 !important; }
.npw-mpb-amt-num { font-variant-numeric: tabular-nums; }
/* Match the Detail column's $ inset (cell 6.4px + box border 1px + box pad 3.2px). */
.npw-mpb-rollup,
.npw-mpb-sub-amt,
.npw-mpb-total-amt { justify-content: space-between; padding-left: 10.4px; padding-right: 10.4px; }
.npw-mpb-seq:hover,
.npw-mpb-seg:hover,
.npw-mpb-input:hover,
.npw-mpb-amt-input:hover { border-color: #d6dce2; background: #fff; }
.npw-mpb-seq:focus,
.npw-mpb-seg:focus,
.npw-mpb-input:focus,
.npw-mpb-amt-input:focus {
  outline: none;
  border-color: #5b9bd5;
  background: #fff;
  box-shadow: 0 0 0 1.6px rgba(91,155,213,0.16);
}
/* Code inputs (tight, no padding) float their focus / error ring 1.6px off the
   digits via outline-offset — gives breathing room without affecting layout, so
   each code segment still aligns vertically across rows. */
.npw-mpb-seg:focus,
.npw-mpb-seq:focus { background: transparent; box-shadow: none; outline: 1.2px solid #5b9bd5; outline-offset: 1px; }
.npw-mpb-seg.npw-mpb-err,
.npw-mpb-seq.npw-mpb-err { background: transparent !important; box-shadow: none !important; outline: 1.2px solid #c0392b; outline-offset: 1px; }

/* Add "+" buttons — mirror Workplan exactly. The sub "+" (add detail, right of
   the Description) is the transparent "add subtask" glyph (.wp2-add-child-btn);
   the area "+" (left column) is the filled-blue "add task" box (.wp2-plus-btn). */
.npw-mpb-plus {
  width: 17.6px;
  height: 17.6px;
  border-radius: 2.4px;
  border: none;
  background: transparent;
  color: #5b9bd5;
  font-size: 14.4px;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: opacity 0.15s;
}
.npw-mpb-plus:hover { opacity: 1; color: #2f6fae; }
.npw-mpb-plus-area { background: #5b9bd5; color: #fff; transition: all 0.15s; }
.npw-mpb-plus-area:hover { background: #4282c0; color: #fff; }

/* Delete "×" (user-added rows) — subtle, hover-revealed, larger glyph */
.npw-mpb-x {
  border: none;
  background: none;
  color: #b6bec6;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.npw-mpb-row:hover .npw-mpb-x { opacity: 1; }
.npw-mpb-x:hover { color: #c0392b; }
/* Disabled remove "×" — e.g. a Sources category that still has lines. */
.npw-mpb-x:disabled,
.npw-mpb-x:disabled:hover { color: #d3d8dd; cursor: default; }
/* Add-Category picker centered in the group-header add column. */
.npw-mpb-c-add .npw-sof-addcat { align-self: center; }

/* Hide control (standard/locked divisions) — eye-off icon, neutral hover */
.npw-mpb-hide-btn {
  border: none;
  background: none;
  color: #aab3bc;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.npw-mpb-row:hover .npw-mpb-hide-btn { opacity: 1; }
.npw-mpb-hide-btn:hover { color: #44505c; }
/* Disabled — a division with detail lines / a budget can't be hidden. */
.npw-mpb-hide-btn:disabled { color: #d3d8dd; cursor: default; }
.npw-mpb-hide-btn:disabled:hover { color: #d3d8dd; }
.npw-mpb-restore {
  border: 1px solid #cfd6dd;
  border-radius: 3.2px;
  background: #fff;
  color: #2f6fae;
  font-size: 10.4px;
  font-weight: 700;
  line-height: 1;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.npw-mpb-restore:hover { background: #eef6fc; border-color: #b9d6ef; }

/* "Show N hidden divisions" toggle */
.npw-mpb-hidden-toggle-row { background: #fafbfc; }
.npw-mpb-hidden-toggle {
  border: none;
  background: none;
  color: #8a99a8;
  font-size: 9.2px;
  font-style: italic;
  cursor: pointer;
  padding: 2.4px 6.4px;
}
.npw-mpb-hidden-toggle:hover { color: #5b9bd5; text-decoration: underline; }
.npw-mpb-line-hidden .npw-mpb-c-div,
.npw-mpb-line-hidden .npw-mpb-c-desc { background: #fafbfc; }
.npw-mpb-line-hidden .npw-mpb-divcode,
.npw-mpb-line-hidden .npw-mpb-divname { color: #9aa6b2; font-style: italic; font-weight: 600; }

/* Per-area Subtotal row */
.npw-mpb-sub-row { background: #e4e8ec; }
.npw-mpb-sub-label { padding-left: 9.6px; font-size: 9.6px; font-weight: 700; color: #222; }
.npw-mpb-sub-amt { font-size: 9.6px; font-weight: 700; color: #222; }

/* PROJECT TOTAL row — full pale-yellow band, bold, thick top rule to match
   the outer border (closes the box at the bottom of the table). The +3.2px height
   offsets the thick top border (border-box) so the visible band matches the
   other rows. */
.npw-mpb-total-row > * { background: #fffdda; border-top: 3.2px solid #222; height: 28.8px; min-height: 28.8px; }
.npw-mpb-total-label { padding-left: 9.6px; font-size: 9.6px; font-weight: 700; letter-spacing: 0.03em; color: #222; }
.npw-mpb-total-amt { font-size: 9.6px; font-weight: 700; color: #222; }

/* Reconciliation panel (budget vs. Sources) */
.npw-mpb-recon {
  margin-top: 11.2px;
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
  background: #fff;
  overflow: hidden;
}
.npw-mpb-recon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7.2px 12.8px;
  font-size: 10.4px;
  color: #4a5662;
}
.npw-mpb-recon-row + .npw-mpb-recon-row { border-top: 1px solid #f1f3f5; }
.npw-mpb-recon-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: #222; }
.npw-mpb-recon-diff { font-weight: 700; color: #c0392b; }
.npw-mpb-recon-diff .npw-mpb-recon-amt { color: #c0392b; }
.npw-mpb-recon-ok .npw-mpb-recon-diff,
.npw-mpb-recon-ok .npw-mpb-recon-diff .npw-mpb-recon-amt { color: #2f7d52; }

/* ===========================================================================
   Step 10 — Project Milestones. Line-for-line port of React NewProjectWizardPage.css
   (its milestone rules sit in two places there; both are here), behind the same
   :where() reset as the ledger / workflow steps.
   =========================================================================== */
.npw-mil-layout {
  line-height: normal;
}
.npw-mil-layout :where(*, *::before, *::after) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.npw-mil-layout :where(button, input) {
  font-family: inherit;
  line-height: inherit;
}

/* Same 57.6px-gap two-panel model as the other steps (Project Roles / External
   Users), with a 1px divider centered in the gap. */
.npw-mil-layout { display: flex; gap: 57.6px; align-items: flex-start; position: relative; }
.npw-mil-layout::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d9d9d9;
}
.npw-mil-col { flex: 1 1 0; min-width: 0; }

.npw-mil-table {
  border: 1px solid #d7dde3;
  border-radius: 6.4px;
  overflow: hidden;
  background: #fff;
}
/* CSS Grid with explicit tracks so header and body cells land at the EXACT same
   x positions (flex column widths drifted between header/body). */
.npw-mil-row {
  display: grid;
  grid-template-columns: 24px 1fr 105.6px 105.6px 17.6px;
  column-gap: 6.4px;
  align-items: center;
  padding: 4.8px 9.6px;
  border-top: 1px solid #eef1f4;
}
.npw-mil-row:first-child { border-top: none; }
.npw-mil-c-num,
.npw-mil-c-name,
.npw-mil-c-date,
.npw-mil-c-act { box-sizing: border-box; min-width: 0; }
.npw-mil-c-num  { display: flex; align-items: center; justify-content: center; }
.npw-mil-c-name { display: flex; }
.npw-mil-c-date { display: flex; }
.npw-mil-c-act  { display: flex; align-items: center; justify-content: center; }

/* Order number — a circle with the row's position in the section. */
.npw-mil-num {
  width: 17.6px;
  height: 17.6px;
  border-radius: 50%;
  background: #eef2f6;
  color: #44505c;
  font-size: 9.6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header bar — project-roles style: section title inside a colored bar */
.npw-mil-head {
  height: 35.2px;
  padding: 0 9.6px;
  border-radius: 6.4px 6.4px 0 0;
  background: #5b9bd5;
}
.npw-mil-title { font-size: 11.2px; font-weight: 600; color: #fff; white-space: nowrap; }
/* Permanent Construction-window rows (Construction Start / End): a fixed label
   in place of the name input, sitting on the same baseline as the date inputs. */
.npw-mil-fixed-name {
  font-size: 10.4px;
  font-weight: 600;
  color: #6b7785;
  white-space: nowrap;
  /* Align the label's left edge with the text inside the milestone inputs
     (input border 1px + padding-left 6.4px). */
  padding-left: 7.2px;
}
/* Permanent Construction-window rows read as locked/anchor rows: a grey row
   tint + a star marker in place of the order number. The date input stays
   editable (you still enter the window dates). */
.npw-mil-row-fixed {
  background: #f3f5f7;
}
.npw-mil-star {
  width: 12.8px;
  height: 12.8px;
  display: block;
}
/* The auto-mirrored date on a Construction-window row — the SAME date input,
   disabled and stripped of border/background/icon so it reads as muted text but
   keeps the exact text position of the editable dates (the 1px border is kept as
   transparent so the content box, and therefore the text, doesn't shift). */
/* Compound selector (.npw-mil-date.npw-mil-date-auto) so these win over the base
   .npw-mil-date rule regardless of source order — otherwise the base border +
   white background re-draw the box. */
.npw-mil-date.npw-mil-date-auto {
  -webkit-appearance: none;
  appearance: none;
  border-color: transparent;   /* kept (transparent) so the text doesn't shift 1px */
  background: transparent;     /* strip the native disabled-field box/background */
  box-shadow: none;
  pointer-events: none;
}
.npw-mil-date.npw-mil-date-auto:disabled {
  color: #8a949e;
  -webkit-text-fill-color: #8a949e; /* webkit ignores `color` on disabled inputs */
  opacity: 1;
}
.npw-mil-date.npw-mil-date-auto::-webkit-calendar-picker-indicator { display: none; }

/* Title sits in the number column and overflows right, so its left edge lines up
   with the number circles below it (which are centered in the 24px column). */
.npw-mil-head .npw-mil-c-num { justify-content: flex-start; overflow: visible; padding-left: 3.2px; }
.npw-mil-head .npw-mil-c-date { padding: 0; }
/* The header date label sits in a box with the SAME geometry as the date input
   below it (transparent 1px border + 6.4px padding, border-box), so its text left
   edge lines up exactly with the value text inside the input. */
.npw-mil-dlabel {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 0 6.4px;
  font-size: 8.8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* Inputs */
.npw-mil-input,
.npw-mil-date {
  width: 100%;
  height: 24px;
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  padding: 0 6.4px;
  font: inherit;
  font-size: 10.4px;
  color: #222;
  background: #fff;
  box-sizing: border-box;
}
.npw-mil-input::placeholder { color: #aeb7c0; }
.npw-mil-date { font-variant-numeric: tabular-nums; }
.npw-mil-input:focus,
.npw-mil-date:focus {
  outline: none;
  border-color: #5b9bd5;
  box-shadow: 0 0 0 1.6px rgba(91,155,213,0.16);
}
.npw-mil-date-err,
.npw-mil-err { border-color: #c0392b; box-shadow: 0 0 0 1.6px rgba(192,57,43,0.14); }

/* Remove "×" */
.npw-mil-x {
  border: none; background: none; color: #b6bec6;
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.12s;
}
.npw-mil-row:hover .npw-mil-x { opacity: 1; }
.npw-mil-x:hover { color: #c0392b; }

/* Add control — a bottom row aligned under the Milestone column (same height as
   body rows: 24px control + 9.6px row padding = 33.6px). */
.npw-mil-add {
  flex: 1 1 auto;
  height: 24px;
  line-height: 24px;
  text-align: left;
  border: none;
  background: none;
  color: #2f6fae;
  font-size: 10.4px;
  font-weight: 600;
  padding: 0 6.4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.npw-mil-add:hover { background: #f3f8fc; }


/* ===========================================================================
   Step 11 — Project Accessibility. Port of React NewProjectWizardPage.css (the
   tab bar, the access tree and its controls), behind the same :where() reset as
   the other ported steps. No Live Preview here (as step 3), so .npw-acc-right and
   the preview rules are left out and the controls column has no divider.
   =========================================================================== */
.npw-acc-layout {
  line-height: normal;
}
.npw-acc-layout :where(*, *::before, *::after) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.npw-acc-layout :where(button, input) {
  font-family: inherit;
  line-height: inherit;
}

.npw-acc-layout {
  display: flex;
  align-items: stretch;
}
.npw-acc-controls {
  flex: 0 0 calc(50vw - 252.8px);
  min-width: 288px;
  box-sizing: border-box;
  padding-right: 28.8px;
}

.npw-acc-tabs {
  display: flex;
  justify-content: space-between;
  gap: 0;
  border-bottom: 1.6px solid #e2e6ea;
  margin-bottom: 11.2px;
}
.npw-acc-tab {
  /* Tabs size to their label; shrink (with ellipsis) only if the row overflows.
     Tight horizontal padding so all 7 fit on one row at the centred (Project
     Theme-matched) left-column width without shrinking the label text. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 6.4px 4px;
  font-size: 10.4px;
  font-weight: 600;
  color: #6b7785;
  background: none;
  border: none;
  border-bottom: 1.6px solid transparent;
  margin-bottom: -1.6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  transition: color 0.12s, border-color 0.12s;
}
.npw-acc-tab:hover {
  color: #222;
}
.npw-acc-tab-on {
  color: #5b9bd5;
  border-bottom-color: #5b9bd5;
}
.npw-acc-typehint {
  font-size: 10px;
  color: #6b7785;
  margin: 0 0 9.6px;
}
.npw-acc-typehint strong {
  color: #222;
}
.npw-acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Focused row in the access tree (mirrors the preview focus). */
.npw-acc-focused {
  box-shadow: inset 2.4px 0 0 #5b9bd5;
}

.npw-acc-module {
  border: 1px solid #e2e6ea;
  border-radius: 6.4px;
  background: #fff;
  overflow: hidden;
}
.npw-acc-mod-none {
  background: #fafbfc;
  border-color: #e8ebee;
}
.npw-acc-mhead {
  display: flex;
  align-items: center;
  gap: 8.8px;
  padding: 9.6px 11.2px;
  cursor: pointer;
}
.npw-acc-mhead:hover {
  background: #f7f9fb;
}
/* Expand/collapse caret — matches the project-env sidebar toggle
   (.env-dropdown-toggle): a 5.6px square with right+bottom borders, rotated. */
.npw-acc-caret {
  flex: 0 0 5.6px;
  width: 5.6px;
  height: 5.6px;
  border-right: 1.6px solid #9aa4ae;
  border-bottom: 1.6px solid #9aa4ae;
  transform: rotate(45deg);
  transition: transform 0.4s ease;
  margin-bottom: 1.6px;
  display: inline-block;
}
.npw-acc-caret.open {
  transform: rotate(-135deg);
  margin-bottom: -1.6px;
}
.npw-acc-mhead:hover .npw-acc-caret,
.npw-acc-subhead:hover .npw-acc-caret {
  border-color: #6b7785;
}
/* Slightly smaller caret at the sub-section level. */
.npw-acc-caret-sm {
  flex-basis: 4.8px;
  width: 4.8px;
  height: 4.8px;
  border-width: 1.2px;
}
/* Spacer keeping non-expandable rows' icons/labels aligned with caret rows. */
.npw-acc-caret-empty {
  flex: 0 0 5.6px;
  width: 5.6px;
  display: inline-block;
}
.npw-acc-icon {
  flex: 0 0 auto;
  width: 17.6px;
  height: 17.6px;
  object-fit: contain;
}
.npw-acc-mod-none .npw-acc-icon {
  opacity: 0.45;
}
.npw-acc-mname {
  flex: 1 1 auto;
  font-size: 11.2px;
  font-weight: 600;
  color: #222;
}
.npw-acc-mod-none .npw-acc-mname {
  color: #9aa4ae;
}
.npw-acc-count {
  flex: 0 0 auto;
  font-size: 9.6px;
  color: #8a949e;
  font-variant-numeric: tabular-nums;
}
.npw-acc-core {
  flex: 0 0 auto;
  font-size: 8.8px;
  font-weight: 600;
  color: #5b9bd5;
  background: #eef5fc;
  border-radius: 8px;
  padding: 1.6px 7.2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Level 2 — sub-sections (nested under a section). */
.npw-acc-subs {
  border-top: 1px solid #eef1f4;
  background: #fafbfc;
}
.npw-acc-sub + .npw-acc-sub {
  border-top: 1px solid #eef1f4;
}
.npw-acc-subhead {
  display: flex;
  align-items: center;
  /* Match the section row's gap so the Core badge / control align across levels. */
  gap: 8.8px;
  /* Indent so the sub-section caret lines up under the section label text
     (14 padding + 7 caret + 11 gap + 22 icon + 11 gap = 65). */
  padding: 7.2px 11.2px 7.2px 52px;
  cursor: pointer;
  /* box-sizing is border-box globally, so min-height is the TOTAL row height.
     Set it just above the taller (segmented-control) row so rows with the simple
     slider are forced to the same height (the shorter switch centers within). */
  min-height: 37.6px;
}
.npw-acc-subhead:hover {
  background: #f2f5f8;
}
.npw-acc-sname {
  flex: 1 1 auto;
  font-size: 10.4px;
  font-weight: 600;
  color: #3a4450;
}

/* Level 3 — features (nested under a sub-section). */
.npw-acc-feats {
  background: #f4f6f8;
  border-top: 1px solid #eaedf0;
  padding: 1.6px 11.2px 4.8px 70.4px;
}
.npw-acc-feat {
  display: flex;
  align-items: center;
  padding: 5.6px 0;
  min-height: 34.4px;
}
.npw-acc-feat + .npw-acc-feat,
.npw-acc-featgroup + .npw-acc-feat,
.npw-acc-feat + .npw-acc-featgroup,
.npw-acc-featgroup + .npw-acc-featgroup {
  border-top: 1px solid #eaedf0;
}
/* Nested feature group (e.g. New Forms) — expandable head + indented toggles. */
.npw-acc-featgroup-head {
  cursor: pointer;
  gap: 6.4px;
}
.npw-acc-subfeats {
  padding-left: 16px;
}
.npw-acc-subfeat {
  display: flex;
  align-items: center;
  padding: 5.6px 0;
  min-height: 34.4px;
}
.npw-acc-subfeat + .npw-acc-subfeat {
  border-top: 1px solid #eef1f4;
}
.npw-acc-fname {
  flex: 1 1 auto;
  font-size: 10px;
  color: #55606b;
}
.npw-acc-sub-disabled .npw-acc-sname,
.npw-acc-sub-disabled .npw-acc-fname {
  color: #b3bbc3;
}

/* Section-level binary gate — simple pill slider switch (green = access). */
.npw-acc-switch {
  flex: 0 0 auto;
  position: relative;
  width: 32px;
  height: 17.6px;
  border: none;
  border-radius: 8.8px;
  background: #cfd6dd;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.npw-acc-switch[data-on='true'] {
  background: #5b9bd5;
}
.npw-acc-switch::after {
  content: '';
  position: absolute;
  top: 1.6px;
  left: 1.6px;
  width: 14.4px;
  height: 14.4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.npw-acc-switch[data-on='true']::after {
  transform: translateX(14.4px);
}
.npw-acc-switch:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Locked (read-only) controls: make the toggles/segments click-transparent so
   clicks fall through to the row (preview navigation still works) while nothing
   can be edited, and grey them out (matching the locked core toggles) to signal
   they're locked. */
.npw-acc-readonly .npw-acc-switch,
.npw-acc-readonly .npw-acc-seg {
  pointer-events: none;
  opacity: 0.55;
}

/* Three-segment access control: None | View | Full. Matches the site's
   segmented pill toggles (.fd-draw-toggle) — grey track, filled active chip. */
.npw-acc-seg {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 1.6px;
  padding: 1.6px;
  border-radius: 3.2px;
  background: #ececec;
  border: 1px solid #e0e0e0;
}
.npw-acc-seg-btn {
  appearance: none;
  border: 0;
  border-radius: 2.4px;
  background: transparent;
  color: #666;
  font-family: inherit;
  font-size: 8.8px;
  font-weight: 600;
  padding: 3.2px 9.6px;
  min-width: 36.8px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.npw-acc-seg-btn:hover:not(:disabled):not(.npw-acc-seg-on) {
  color: #222;
}
.npw-acc-seg-btn:disabled {
  color: #c4cbd2;
  cursor: default;
}
/* Selected segment — colour-coded by level. */
.npw-acc-seg-on.npw-acc-seg-full {
  background: #2e9b57;
  color: #fff;
}
.npw-acc-seg-on.npw-acc-seg-view {
  background: #e8a13a;
  color: #fff;
}
.npw-acc-seg-on.npw-acc-seg-none {
  background: #767171;
  color: #fff;
}
/* Choice features (e.g. Limited | Full) — generic active chip in Landmark blue. */
.npw-acc-seg-choice .npw-acc-seg-on {
  background: #5b9bd5;
  color: #fff;
}

/* ===========================================================================
   Step 12 — Review & Create. Line-for-line port of React NewProjectWizardPage.css,
   behind the same :where() reset as the other ported steps.
   =========================================================================== */
.npw-rev-grid {
  line-height: normal;
}
.npw-rev-grid :where(*, *::before, *::after) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.npw-rev-grid :where(button, input) {
  font-family: inherit;
  line-height: inherit;
}

.npw-rev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12.8px;
  align-items: start;
}
.npw-rev-card {
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fff;
  padding: 11.2px 12.8px 12.8px;
  box-shadow: 0 1px 1.6px rgba(0, 0, 0, 0.03);
}
.npw-rev-card-wide { grid-column: 1 / -1; }
/* Stretch a card to fill its grid row's height so it matches the taller card
   beside it; flex column so the body fills and a pinned group can sit at the
   bottom (e.g. Sources/Budget totals align across the two cards). */
.npw-rev-card-stretch { align-self: stretch; display: flex; flex-direction: column; }
.npw-rev-card-stretch .npw-rev-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.npw-rev-pin { margin-top: auto; }
/* Lead card: occupies the whole first row (so nothing sits beside it) but is
   capped to one column's width — left-aligned half-width, alone on its row. */
.npw-rev-card-lead { grid-column: 1 / -1; max-width: calc(50% - 6.4px); }
.npw-rev-card-head {
  display: flex;
  align-items: center;
  gap: 6.4px;
  padding-bottom: 6.4px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eef1f4;
}
.npw-rev-step {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef5fc;
  color: #5b9bd5;
  font-size: 8.8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-rev-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.2px;
  font-weight: 700;
  color: #2f3a45;
}
.npw-rev-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3.2px;
  border: none;
  background: none;
  color: #5b9bd5;
  font: inherit;
  font-size: 9.6px;
  font-weight: 600;
  cursor: pointer;
  padding: 2.4px 5.6px;
  border-radius: 4px;
  transition: background 0.12s;
}
.npw-rev-edit:hover { background: #eef5fc; }
/* Indent the card body so its left edge lines up with the title TEXT (past the
   step chip 16px + the head gap 6.4px) rather than the number circle. */
.npw-rev-card-body { padding-left: 22.4px; }
.npw-rev-row {
  display: flex;
  justify-content: space-between;
  gap: 12.8px;
  padding: 2.4px 0;
  font-size: 10.4px;
}
.npw-rev-label { color: #6b7785; flex: 0 0 auto; }
/* $ value rows (Sources / Budget): fixed-width slot with the `$` pinned left and
   the digits right-aligned, so every `$` lines up across rows + totals. */
.npw-rev-row-acct .npw-rev-label { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* Code column uses tabular figures so every code is the same width → the
   descriptions all start at the same x. */
.npw-rev-code { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.npw-rev-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npw-rev-value-acct { flex: 0 0 auto; display: flex; align-items: baseline; width: 112px; }
.npw-rev-value-acct .npw-mpb-amt-sign { flex: 0 0 auto; margin-right: 1.6px; color: #222; }
.npw-rev-value-acct .npw-mpb-amt-num { flex: 1 1 0; text-align: right; font-variant-numeric: tabular-nums; color: #222; }
.npw-rev-value { color: #222; text-align: right; min-width: 0; word-break: break-word; }
.npw-rev-muted { color: #8a949e; font-size: 9.6px; }
.npw-rev-empty { color: #8a949e; font-style: italic; font-size: 10.4px; }
.npw-rev-note { color: #8a949e; font-size: 9.6px; margin-top: 6.4px; line-height: 1.4; }
.npw-rev-list { list-style: none; margin: 0; padding: 0; }
.npw-rev-list li { font-size: 10.4px; color: #222; padding: 1.6px 0; }
/* User rows: initials avatar + name + company in aligned columns (company lines
   up across rows). */
.npw-rev-user {
  display: grid;
  grid-template-columns: 17.6px 112px minmax(0, 1fr);
  gap: 4.8px;
  align-items: center;
  padding: 2.4px 0;
}
/* Smaller avatar for the compact review rows (the shared one is 25.6px). */
.npw-rev-user .npw-access-avatar { width: 17.6px; height: 17.6px; font-size: 7.2px; }
.npw-rev-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npw-rev-user-co { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a949e; font-size: 9.6px; }

/* Included | Excluded split (Internal Users) — two columns with a divider. */
.npw-rev-incexc { display: flex; }
.npw-rev-incexc-col { flex: 1 1 0; min-width: 0; }
.npw-rev-incexc-col:first-child { padding-right: 11.2px; border-right: 1px solid #eef1f4; }
.npw-rev-incexc-col:last-child { padding-left: 11.2px; }
.npw-rev-incexc .npw-rev-subhead { margin-top: 0; }
.npw-rev-excluded { opacity: 0.5; } /* grayed out */
/* Excluded users: gray initials circle instead of the blue one. */
.npw-rev-excluded .npw-access-avatar { background: #aeb7c0; }
/* Narrow split columns: make the LIST the grid (rows use display:contents) so the
   columns align across rows. The name column is sized to content (max-content),
   so the company aligns just past the widest name — aligned + tight. */
.npw-rev-incexc .npw-rev-list {
  display: grid;
  grid-template-columns: 17.6px max-content minmax(0, 1fr);
  column-gap: 4.8px;
  row-gap: 1.6px;
  align-items: center;
}
.npw-rev-incexc .npw-rev-user { display: contents; }
/* Right-align the company to the column's right edge (Internal Users + Roles). */
.npw-rev-incexc .npw-rev-user-co { text-align: right; }
.npw-rev-subgroup { margin-bottom: 12.8px; } /* space between a group's last row and the next header */
.npw-rev-subhead {
  font-size: 8.8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #5b9bd5; margin: 0 0 5.6px; /* space below header → first row */
}
.npw-rev-swatches { display: inline-flex; align-items: center; gap: 4.8px; }
.npw-rev-swatch { width: 12.8px; height: 12.8px; border-radius: 3.2px; border: 1px solid rgba(0,0,0,0.15); display: inline-block; }
/* Brand color chips: square shows the colour with its hex inside, in the project
   env sidebar's Management-section text colour (white). */
.npw-rev-brand-row { display: flex; gap: 6.4px; margin-top: 4px; }
.npw-rev-brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 22.4px;
  padding: 0 8px;
  border-radius: 4.8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 8.8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.npw-rev-badge {
  display: inline-block; margin-left: 4.8px; font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 5.6px; border-radius: 7.2px;
  background: #eef2f6; color: #5b6b78;
}
.npw-rev-badge-ok { background: #e7f4ec; color: #2e7d4f; }
.npw-rev-badge-warn { background: #fbf1dd; color: #9a7415; }
.npw-rev-badge-mod { background: #eef5fc; color: #5b9bd5; }
/* Workflow Configuration: form label · status chip · notes, in aligned columns
   (label sized to the widest so all chips line up). */
.npw-rev-wf { display: grid; grid-template-columns: 16px max-content auto minmax(0, 1fr); column-gap: 6.4px; row-gap: 3.2px; align-items: center; }
.npw-rev-wf-row { display: contents; }
.npw-rev-num {
  width: 16px; height: 16px; border-radius: 50%;
  background: #eef2f6; color: #5b6b78;
  font-size: 8.8px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.npw-rev-wf-label { font-size: 10.4px; color: #222; min-width: 0; }
.npw-rev-wf .npw-rev-badge { margin-left: 9.6px; justify-self: start; }
.npw-rev-wf-notes { font-size: 9.6px; color: #8a949e; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npw-rev-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6.4px; padding-top: 6.4px; border-top: 1px solid #eef1f4;
  font-size: 10.4px; font-weight: 700; color: #222;
}
/* Milestone rows: name · start · completion on one line, aligned in a grid (the
   list is the grid; rows are display:contents). */
.npw-rev-ms-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: 4.8px; row-gap: 2.4px; align-items: baseline;
}
.npw-rev-ms-item { display: contents; }
.npw-rev-ms-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.4px; color: #222; }
.npw-rev-ms-name.npw-rev-ms-window { font-weight: 700; }
.npw-rev-ms-date { font-size: 9.6px; color: #8a949e; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.npw-rev-ms-dash { font-size: 9.6px; color: #8a949e; text-align: center; }

/* Project Roles: two sections (Landmark / External) each headed by a section
   label, with role-title sub-headers + assignee rows (reusing the user-row grid). */
.npw-rev-rolesection {
  font-size: 9.6px;
  font-weight: 700;
  color: #2f3a45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eef1f4;
}
/* Roles reuse Internal Users' .npw-rev-list grid + .npw-rev-user rows verbatim;
   the role-title header and the "Not assigned" note are full-width grid items. */
/* Scoped under .npw-rev-incexc so these beat `.npw-rev-list li` (0,1,1) — which
   would otherwise force 10.4px/#222 onto the role-title <li>s. */
.npw-rev-incexc .npw-rev-rolehead {
  grid-column: 1 / -1;
  font-size: 8.8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #5b9bd5; margin: 9.6px 0 3.2px;
}
.npw-rev-incexc .npw-rev-rolehead:first-child { margin-top: 0; }
.npw-rev-incexc .npw-rev-rolenone { grid-column: 1 / -1; color: #8a949e; font-style: italic; font-size: 10.4px; }

/* Theme image previews */
.npw-rev-sublabel { font-size: 9.6px; color: #6b7785; margin: 8px 0 4px; }
.npw-rev-logo-banner { display: flex; gap: 9.6px; align-items: flex-end; }
.npw-rev-thumb-group { min-width: 0; }
.npw-rev-thumb-group-grow { flex: 1 1 auto; }
.npw-rev-thumb {
  border: 1px solid #e2e6ea;
  border-radius: 4.8px;
  overflow: hidden;
  background: #f3f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.npw-rev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo: dark box + white-silhouette filter (matches the app's sidebar/banner
   logo treatment) so any logo — light, dark, or colored — is always visible. */
.npw-rev-thumb-logo { width: 57.6px; height: 35.2px; background: #222222; }
.npw-rev-thumb-logo img { object-fit: contain; padding: 3.2px; filter: brightness(0) invert(1); }
.npw-rev-thumb-banner { height: 35.2px; }
/* 10 equal columns so all project images fit one line inside the panel; each
   box matches Project Theme's 16:9 (PROJECT_IMAGE_ASPECT) ratio. */
.npw-rev-thumbs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3.2px; }
/* Box matches the measured image aspect (set inline); the image is absolutely
   positioned so it can't distort the box. min-width:0 lets the columns shrink. */
.npw-rev-thumb-img { position: relative; width: 100%; height: auto; min-width: 0; }
.npw-rev-thumb-img img { position: absolute; inset: 0; min-width: 0; }
/* Unfilled slot: a muted dashed placeholder. */
.npw-rev-thumb-slot-empty { background: #fafbfc; border-style: dashed; border-color: #d8dde2; }
.npw-rev-thumb-empty { font-size: 8.8px; color: #aeb7c0; }