/* ---------- Project list (overview) ---------- */
    

    .project-row {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      padding: 1rem 0 0.5rem;
      border-bottom: 1px solid #eef1f4;
      text-decoration: none;
      color: var(--ink);
      cursor: pointer;
      background: none;
      border-left: none;
      border-right: none;
      border-top: none;
      width: 100%;
      text-align: left;
    }


    /* ---------- Detail panel ---------- */
    .hero-photo {
      border-radius: 12px;
      overflow: hidden;
    }

    .hero-photo img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      display: block;
    }

    .photo-caption {
      font-size: .8rem;
      color: var(--muted);
      margin-top: .5rem;
    }

    .detail-block {
      padding-bottom: 1.1rem;
      margin-bottom: 1.1rem;
      border-bottom: 1px solid #eef1f4;
    }

    .detail-label {
      font-size: .72rem;
      letter-spacing: 1px;
      font-weight: 700;
      color: var(--green);
      margin-bottom: .4rem;
    }

    .detail-value {
      color: var(--navy);
      font-weight: 600;
      font-size: 1rem;
    }

    .customers-line {
      color: var(--ink);
      font-size: .95rem;
    }

    .customers-line .sep {
      color: var(--green);
      margin: 0 .4rem;
    }

    .config-row {
      display: flex;
      align-items: flex-start;
      gap: 1.1rem;
      padding: 1rem 0;
      border-bottom: 1px solid #f2f5f8;
      flex-wrap: wrap;
    }

    .config-row:last-of-type {
      border-bottom: none;
    }

    .config-pct {
      width: 64px;
      flex-shrink: 0;
      text-align: left;
    }

    .config-pct .num {
      color: var(--red);
      font-weight: 800;
      font-size: 1.5rem;
      line-height: 1;
    }

    .config-pct .unit {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 600;
    }

    .config-desc {
      flex: 1.4;
      font-size: .9rem;
      color: var(--ink);
      font-weight: 500;
      min-width: 160px;
    }

    .config-clearance {
      flex: 1;
      font-size: .85rem;
      color: var(--ink);
      min-width: 140px;
    }

    .config-clearance .lbl {
      color: var(--muted);
      font-size: .78rem;
      display: block;
    }

    .config-status {
      flex: 1.1;
      display: flex;
      align-items: flex-start;
      gap: .5rem;
      font-size: .85rem;
      color: var(--ink);
      min-width: 150px;
    }

    .status-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
      margin-top: .1rem;
    }

    .status-icon.done {
      color: var(--green);
    }

    .status-icon.pending {
      color: #e08a00;
    }

    .resource-btn {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        border: 1.5px solid var(--navy);
        border-radius: 8px;
        padding: .55rem 1.2rem;
        color: var(--navy);
        font-weight: 600;
        font-size: .92rem;
        text-decoration: none;
        transition: all .15s ease;
        cursor: pointer;
        background: none;
    }

    .resource-btn i {
      font-size: 1rem;
    }

    .resource-btn:hover {
      background: var(--navy);
      color: #fff;
    }

    .step-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      font-size: .9rem;
      font-weight: 600;
    }

    .step-nav a {
      color: var(--ink);
      text-decoration: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: .4rem;
    }

    .step-nav a:hover {
      color: var(--blue, #1666c9);
    }

    .step-nav a i {
      color: var(--muted);
    }

    /* .step-nav .prev-link {} */

    .step-nav .next-link {
      margin-left: auto;
    }

    /* two-column stat grid (single-configuration pilots) */
    .stat-2col {
      display: flex;
    }

    .stat-2col>div {
      flex: 1;
    }

    .stat-2col>div+div {
      border-left: 1px solid #eef1f4;
      margin-left: 1.5rem;
      padding-left: 1.5rem;
    }

    .pct-inline {
      color: var(--red);
      font-weight: 800;
      font-size: 1.3rem;
    }

    /* divider between members */
    .member-sep {
        display: flex;
        align-items: center;
        /* gap: 12px; */
        margin: 1rem 0 0;
        font-size: .65rem;
        color: #b0c4d6;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .member-sep::before,
    .member-sep::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border)
    }
    figure {
        margin: 0 0 0rem;
    }

    /* ---------- Progress rail (persistent, updates via JS) ---------- */
    .progress-rail {
      text-align: center;
      padding-top: .25rem;
      position: relative;
    }

    .rail-index {
      font-size: 1rem;
      font-weight: 800;
      color: var(--navy);
    }

    .rail-index .of {
      font-size: .9rem;
      font-weight: 600;
      color: var(--muted);
    }

    .rail-sub {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--muted);
      margin-bottom: 1.1rem;
    }

    .rail-track {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.15rem;
    }

    .rail-track::before {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 50%;
      width: 1px;
      background: #dfe4ea;
      transform: translateX(-50%);
      z-index: 0;
    }

    .rail-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #cfd8e2;
      background: #fff;
      position: relative;
      z-index: 1;
      cursor: pointer;
      padding: 0;
    }

    .rail-dot.active {
      background: var(--navy);
      border-color: var(--navy);
      width: 13px;
      height: 13px;
    }

    .step-panel {
      display: none;
    }

    .step-panel.is-active {
      display: block;
    }